/* =========================================================
   GRO Technologies — pixel-perfect from Figma (file 90IQiJiQAcnXZdRUzIBNOr)
   Desktop baseline = 1512px. Uses absolute positioning within
   fixed-dimension sections to mirror Figma exactly.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700;900&family=Onest:wght@400;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; }

:root {
  --c-primary: #16393E;
  --c-body: #484747;
  --c-bg: #F0FDFF;
  --c-coral: #FFAB88;
  --c-purple: #8E99E8;
  --c-white: #FFFFFF;
  --c-nav: #000000;
  --c-stat: #2E6A77;
  --f-head: 'Figtree', sans-serif;
  --f-body: 'Onest', sans-serif;
  /* Page zoom factor — 100vw inside a zoomed element renders smaller by this factor,
     so bleed backgrounds need to pre-scale via calc() to truly cover the viewport. */
  --zoom: 0.9;
  --vw-bleed: calc(100vw / var(--zoom));
}

body {
  background: var(--c-bg);
  color: var(--c-primary);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.27;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;   /* positioning context for full-bleed bg siblings */
  min-height: 100vh;
  /* Global 90% scale — Figma design is at 1512px but renders slightly large on typical browsers.
     Using Chrome-compatible `zoom` so layout (and scrollbars) resize correctly.
     Firefox 126+ also supports zoom. */
  zoom: 0.9;
}

.page {
  width: 1512px;
  margin: 0 auto;
  position: relative;
  /* No overflow:hidden so full-bleed section backgrounds can extend to 100vw. */
}
.page.home { height: 6250px; }

.sec { position: absolute; left: 0; }

/* Full-bleed section backgrounds rendered at body level so they span 100% of viewport
   regardless of .page width. Y positions match Figma absolute coords.
   Works even when viewport is narrower than .page (1512px) because width: 100% of
   body which is always viewport-width. */
.bleed-bg {
  position: absolute;
  left: 0; width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none;
}
.bleed-bg.problem-bleed {
  top: 1014px; height: 568px;
  background-image: url('images/problem-bg.png');
}
.bleed-bg.footer-bleed {
  top: 5428px; height: 822px;
  background-image: url('images/footer-bg.png?v=3');
}
/* Figma "Line 21" (84:87): white 1px divider between CTA band and legal area, page-y 5872 = footer-y 444 */
.bleed-bg.footer-bleed::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 444px;
  height: 1px;
  background: #FFFFFF;
}
/* .page needs to be above the bleed bgs */
.page { position: relative; z-index: 1; }

/* NAV — exact copy of grotech.ai homepage nav design.
   zoom: 1.1111 counters the body's 0.9 zoom so the nav renders at identical
   native size to the homepage. */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 16px 0;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(19, 48, 52, 0.06);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  zoom: 1.1111;
}
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; }
.nav-logo img { height: 32px; width: auto; display: block; }
.nav-toggle { display: none; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none; padding: 0; margin: 0;
}
.nav-links li { list-style: none; }
.nav-links a {
  font-family: 'Onest', sans-serif;
  font-size: 0.88rem; font-weight: 600;
  color: #4A6E74; white-space: nowrap;
  text-decoration: none; transition: color 0.3s;
}
.nav-links a:hover { color: #133034; }
.nav-links a.nav-cta {
  padding: 10px 24px;
  background: #133034; color: #FFFFFF;
  border-radius: 8px;
  font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 2px 12px rgba(19, 48, 52, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-links a.nav-cta:hover {
  background: #16393E; color: #FFFFFF;
  transform: translateY(-1px);
}

/* HERO Seccion01 (56:113 @ -1,156  1513x656) */
.hero {
  top: 156px; left: -1px;
  width: 1513px; height: 656px;
  background: url('images/hero-bg.png') no-repeat top left;
  background-size: 1513px 675px;
}
.hero-hex { display: none; }
.hero-h1 {
  position: absolute; left: 288px; top: 100px; width: auto;
  font-family: var(--f-head); font-weight: 700;
  font-size: 40px; line-height: 47.96px; color: var(--c-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hero-sub {
  position: absolute; left: 288px; top: 307px; width: 376px;
  font-family: var(--f-body); font-weight: 400;
  font-size: 20px; line-height: 25.26px; color: var(--c-primary);
}
.hero-btns { position: absolute; left: 288px; top: 429px; display: flex; gap: 22px; }
.btn-pill {
  height: 61px; width: 177px; border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px; color: var(--c-white);
}
.btn-purple { background: var(--c-purple); }
.btn-coral  { background: var(--c-coral); }

/* Video wrapper — Figma shadow is very subtle grey, mostly below, not a harsh right edge */
.hero-video {
  position: absolute; left: 720px; top: 100px;
  width: 622px; height: 385px;
  cursor: pointer;
  filter:
    drop-shadow(0 18px 24px rgba(22, 57, 62, 0.10))
    drop-shadow(2px 4px 8px rgba(22, 57, 62, 0.08));
}
.hero-video img {
  width: 622px; height: 385px; object-fit: cover;
  display: block;
}
.hero-video { cursor: pointer; }
.hero-video iframe {
  width: 622px; height: 385px;
  border: 0; display: block;
}
/* Play button: per Figma, just a light play arrow icon on a very transparent disk */
.hero-video .play {
  position: absolute; left: 268px; top: 150px;
  width: 86px; height: 86px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-video .play::after {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent #F2F2F7;
  margin-left: 8px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* PARTNERS (56:112 @ 354,787  803x123) */
.partners { top: 787px; left: 354px; width: 803px; height: 123px; }
.partners h2 {
  position: absolute; left: 210px; top: 0; width: 419px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-primary);
  text-align: center;
}
.partners-row { position: absolute; left: -102px; top: 82px; width: 1000px; height: 39px; }
.partners-row img { position: absolute; object-fit: contain; }
.partners-row .p1 { left: 0;   top: 1px;  width: 145px; height: 37px; }
.partners-row .p2 { left: 235px; top: 0;  width: 125px; height: 39px; }
.partners-row .p3 { left: 449px; top: 4px; width: 115px; height: 32px; }
.partners-row .p4 { left: 653px; top: 2px; width: 150px; height: 35px; }
.partners-row img.p5 {
  left: 895px; top: 10px; width: 105px; height: 23px; object-fit: contain;
}

/* YOUR MANUAL (56:340 @ 0,1014  1512x568) */
.problem { top: 1014px; left: 0; width: 1512px; height: 568px; }
/* Background is rendered by `.bleed-bg.problem-bleed` at body level (edge-to-edge) */
.problem-bg { display: none; }
.problem .divider {
  position: absolute; left: 667px; top: 62px;
  width: 1px; height: 444px; background: rgba(0,0,0,0.25);
}
.problem h2 {
  position: absolute; left: 329px; top: 212px; width: 306px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-body);
}
.problem-item { position: absolute; width: 371px; }
.problem-item .icon {
  position: absolute; width: 45px; height: 45px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary);
}
.problem-item .icon svg { width: 100%; height: 100%; }
.problem-item .body {
  font-family: var(--f-body); font-weight: 400;
  font-size: 16px; line-height: 20.2px; color: var(--c-body);
  white-space: pre-line;
}
.problem-item .body strong { font-weight: 700; display: block; margin-bottom: 8px; color: var(--c-body); }
.problem-item.i1 { left: 810px; top: 106px; }
.problem-item.i1 .icon { left: -81px; top: 0; }
.problem-item.i2 { left: 810px; top: 258px; }
.problem-item.i2 .icon { left: -85px; top: -4px; width: 53px; height: 30px; }
.problem-item.i3 { left: 810px; top: 400px; }
.problem-item.i3 .icon { left: -76px; top: -4px; width: 36px; height: 45px; }

/* ECOSYSTEM (56:322 @ -1,1627  1512x212) */
.ecosystem { top: 1627px; left: -1px; width: 1512px; height: 212px; }
.ecosystem h2 {
  /* Width extended to 1150 so "...meets" fits on line 1 in browser Figtree
     (Figma spec was 1009 but browser glyphs render wider). */
  position: absolute; top: 58px;
  left: 50%; transform: translateX(-50%);
  width: 1150px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 40px; line-height: 47.96px;
  letter-spacing: -0.01em;
  color: var(--c-coral);
  text-align: center;
}
.ecosystem h2 .bold { font-weight: 700; }

/* HOW IT WORKS (84:61 @ -9,1884  1521x713) */
.how { top: 1884px; left: -9px; width: 1521px; height: 713px; }
.how h2 {
  position: absolute; left: 682px; top: 0; width: 195px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-primary);
  text-align: center;
}
.how-lines { position: absolute; left: 8px; top: 145px; width: 1517px; height: 568px; pointer-events: none; }
.how-lines .lh { position: absolute; height: 1px; background: rgba(0,0,0,0.12); }
.how-lines .lh.t { left: 0;   top: 0;     width: 1517px; }
.how-lines .lh.a { left: 1px; top: 113px; width: 718px; }
.how-lines .lh.b { left: 1px; top: 216px; width: 709px; }
.how-lines .lh.c { left: 1px; top: 316px; width: 709px; }
.how-lines .lh.d { left: 1px; top: 451px; width: 709px; }
.how-lines .lh.f { left: 0;   top: 568px; width: 1520px; }
/* Bleed extensions: middle dividers extend LEFT to viewport edge; top/bottom extend BOTH sides. */
.how-lines .lh::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: var(--vw-bleed);
  background: inherit;
}
.how-lines .lh.t::after,
.how-lines .lh.f::after {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 100%;
  width: var(--vw-bleed);
  background: inherit;
}

.how-panel { position: absolute; left: 9px; top: 145px; width: 1227px; height: 568px; }
.how-bar {
  position: absolute; left: 0; width: 717px;
  background: var(--c-purple); transition: top .25s ease, height .25s ease;
}
/* Bleed left: purple bar extends to viewport left edge (keeps right end at 717px) */
.how-bar::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: var(--vw-bleed);
  background: inherit;
}
.how-bar[data-active="0"] { top: 0;     height: 114px; }
.how-bar[data-active="1"] { top: 114px; height: 102px; }
.how-bar[data-active="2"] { top: 216px; height: 100px; }
.how-bar[data-active="3"] { top: 316px; height: 135px; }
.how-bar[data-active="4"] { top: 450px; height: 118px; }

.how-titles { position: absolute; left: 287px; top: 0; width: 454px; }
.how-title {
  display: block; font-family: var(--f-head); font-weight: 700;
  font-size: 26px; line-height: 31.18px; color: var(--c-primary);
  cursor: pointer; white-space: pre-line;
  width: 432px;
}
.how-title.active { color: var(--c-white); }
.how-title.t1 { position: absolute; top: 22px;  }
.how-title.t2 { position: absolute; top: 127px; }
.how-title.t3 { position: absolute; top: 229px; width: 441px; }
.how-title.t4 { position: absolute; top: 333px; width: 411px; }
.how-title.t5 { position: absolute; top: 463px; width: 432px; }

.how-right { position: absolute; left: 774px; top: 0; width: 453px; height: 568px; }
.how-image { position: absolute; left: 0; top: 0; width: 453px; height: 373px; object-fit: cover; }
.how-desc {
  position: absolute; left: 0; top: 396px; width: 437px;
  font-family: var(--f-body); font-weight: 400;
  font-size: 16px; line-height: 20.2px; color: var(--c-body);
}
.how-more {
  position: absolute; left: 0; top: 497px;
  font-family: var(--f-body); font-weight: 700;
  font-size: 16px; line-height: 20.2px; color: var(--c-coral);
  cursor: pointer;
}

/* USE GROTECH (84:62 @ 306,2727  905x1100) */
.usegrotech { top: 2727px; left: 306px; width: 905px; height: 1200px; }
.usegrotech h2 {
  position: absolute; left: 315px; top: 0; width: 250px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-primary);
  text-align: center;
}
.ug-card { position: absolute; width: 287px; }
.ug-card .t {
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-primary);
  text-align: center;
}
.ug-card .img {
  position: absolute; top: 138px;
  width: 287px; height: 164px;
  background: #D9D9D9; object-fit: contain;
}
.ug-card .d {
  position: absolute; top: 325px; width: 287px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 20.2px; color: var(--c-body);
  text-align: left;
}
.ug-1 { left: 0;   top: 138px; }
.ug-2 { left: 310px; top: 138px; }
.ug-3 { left: 617px; top: 138px; }
.ug-4 { left: 0;   top: 684px; }
.ug-5 { left: 310px; top: 684px; }
.ug-6 { left: 617px; top: 684px; }
.usegrotech .cta-watch {
  position: absolute; left: 304px; top: 1180px;
  width: 286px; height: 63px; background: var(--c-purple);
  border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-white);
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px;
}

/* RESULTS (61:6 @ 372,4050  842x271) */
.results { top: 4050px; left: 372px; width: 842px; height: 271px; }
.results h2 {
  position: absolute; left: 154px; top: 0; width: 447px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-primary);
  text-align: center;
}
.results .sub {
  position: absolute; left: 187px; top: 38px; width: 380px; height: 29px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 24px; line-height: 28.78px; color: var(--c-primary);
  text-align: center;
}
.results .stat { position: absolute; }
.results .stat .n {
  font-family: var(--f-body); font-weight: 900;
  font-size: 48px; line-height: 60.62px; color: var(--c-stat);
}
.results .stat .c {
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 20.2px; color: var(--c-body);
  width: 212px;
}
.results .s1 { left: 0;   top: 164px; }
.results .s1 .n { position: absolute; left: 5px; top: 7px; }
.results .s1 .c { position: absolute; left: 0;  top: 67px; }
.results .s2 { left: 321px; top: 164px; }
.results .s2 .n { position: absolute; left: 5px; top: 0; }
.results .s2 .c { position: absolute; left: 1px; top: 67px; }
.results .s3 { left: 623px; top: 162px; }
.results .s3 .n { position: absolute; left: 5px; top: 0; }
.results .s3 .c { position: absolute; left: 7px; top: 64px; }

/* DOCTORES (56:330 @ 342,4448  829x916) */
.doctores { top: 4448px; left: 342px; width: 829px; height: 916px; }
.doctores h2 {
  position: absolute; left: 188px; top: 0; width: 459px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px; color: var(--c-primary);
  text-align: center;
}
.vid {
  position: absolute; top: 133px; height: 157px;
  border-radius: 10px; overflow: hidden; cursor: pointer; background: #333;
}
.vid img { width: 100%; height: 100%; object-fit: cover; }
/* Translucent white play triangle — smaller, perfectly centered in each video */
.vid .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.vid.v1 { left: -30px; width: 280px; }
.vid.v2 { left: 289px; width: 273px; }
.vid.v3 { left: 593px; width: 277px; }

.vcap {
  position: absolute; top: 325px; width: 212px;
  font-family: var(--f-body); font-weight: 400;
  font-size: 16px; line-height: 20.2px; color: var(--c-body);
  text-align: center; white-space: pre-line;
}
.vcap.c1 { left: 0; }
.vcap.c2 { left: 312px; }
.vcap.c3 { left: 617px; }

.doc {
  position: absolute; width: 98px; height: 98px; border-radius: 50%;
  overflow: hidden; background: #D9D9D9;
}
.doc img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doccap {
  position: absolute;
  font-family: var(--f-body); font-weight: 400;
  font-size: 16px; line-height: 20.2px; color: var(--c-body);
  text-align: center; white-space: pre-line;
}
.doc.d1 { left: -48px; top: 435px; } .doccap.dc1 { left: -61px; top: 556px; width: 122px; }
.doc.d2 { left: 213px; top: 435px; } .doccap.dc2 { left: 172px; top: 556px; width: 169px; }
.doc.d3 { left: 486px; top: 435px; } .doccap.dc3 { left: 462px; top: 556px; width: 147px; }
.doc.d4 { left: 757px; top: 435px; } .doccap.dc4 { left: 714px; top: 556px; width: 182px; }
.doc.d5 { left: 70px;  top: 670px; } .doccap.dc5 { left: 31px;  top: 791px; width: 181px; }
.doc.d6 { left: 365px; top: 670px; } .doccap.dc6 { left: 339px; top: 791px; width: 150px; }
.doc.d7 { left: 660px; top: 670px; } .doccap.dc7 { left: 618px; top: 791px; width: 193px; }

/* CTA BAND + FOOTER (67:81 @ -6,5428  1523x822) */
.foot { top: 5428px; left: 0; width: 1512px; height: 822px; }
/* Background rendered by `.bleed-bg.footer-bleed` at body level (edge-to-edge) */
.foot-bg { display: none; }
/* Heading + CTAs are sibling page-level nodes in Figma, rendered on top via HTML */
.foot h2 {
  position: absolute; left: 352px; top: 84px; width: 808px; height: 96px;
  font-family: var(--f-head); font-weight: 900;
  font-size: 40px; line-height: 47.96px; color: var(--c-primary);
  text-align: center; white-space: pre-line;
}
.foot .cta-wd {
  position: absolute; left: 569px; top: 260px;
  width: 189px; height: 51px; background: var(--c-purple);
  border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-white);
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px;
}
.foot .cta-lt {
  position: absolute; left: 788px; top: 260px;
  width: 183px; height: 51px; background: var(--c-coral);
  border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-white);
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px;
}
/* Real HTML legal content (logo + copyright + policy links) — replaces baked-PNG version */
.foot .foot-logo {
  position: absolute; left: 299px; top: 587px;
  width: 105px; height: 48px; display: block;
}
.foot .foot-copy {
  position: absolute; left: 812px; top: 543px;
  width: 431px; text-align: center;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-white);
}
.foot .foot-link {
  position: absolute; text-align: center;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-white); text-decoration: underline;
}
.foot .foot-privacy { left: 1120px; top: 587px; width: 123px; }
.foot .foot-msg     { left: 957px;  top: 635px; width: 286px; }

/* =========================================================
   Full-page PNG backgrounds for Product + About (pixel-perfect)
   Overlays screenreader-only semantic content + clickable zones.
   ========================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.page .fullbg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-size: 1512px auto;
  background-repeat: no-repeat;
  background-position: top left;
}
.page.product { height: 5618px; }

.page.about { height: 5858px; }

/* Interactive overlays */
.page .hit { position: absolute; display: block; z-index: 5; }

/* Shared nav click zones (nav baked into image at y=0-156; match Figma exact positions) */
.page .hit.nav-home     { left: 879px;  top: 84px; width: 52px;  height: 34px; }
.page .hit.nav-platform { left: 965px;  top: 84px; width: 74px;  height: 34px; }
.page .hit.nav-about    { left: 1060px; top: 84px; width: 80px;  height: 34px; }
.page .hit.nav-cta      { left: 1174px; top: 76px; width: 153px; height: 34px; }

/* ===== PRODUCT PAGE — proper HTML/CSS rebuild (replaces old full-page PNG shortcut) ===== */

/* Hero (Seccion01 69:136 @ -1,156 1513x438) — centered title + subtitle on hexagon bg */
.p-hero { top: 156px; left: -1px; width: 1513px; height: 438px; }
.p-hero-bg {
  position: absolute; inset: 0;
  background: url('images/hero-bg.png') no-repeat top center;
  background-size: 1513px 675px;
  /* Fade hexagons out before they reach the device image below the subtitle */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 95%);
          mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 95%);
}
.p-hero-h1 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 64px; width: 964px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 48px; line-height: 57.56px;
  color: var(--c-primary); text-align: center;
  letter-spacing: -0.01em;
}
.p-hero-sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 258px; width: 737px;
  font-family: var(--f-body); font-weight: 400;
  font-size: 20px; line-height: 25.26px;
  color: var(--c-primary); text-align: center;
}

/* Device image (87:30 @ 303,534 905x506) */
.p-device {
  top: 534px; left: 303px; width: 905px; height: 506px;
  margin: 0; overflow: hidden;
}
.p-device img { width: 905px; height: 506px; display: block; object-fit: cover; }

/* v2: device image acts as a video player. Poster image + translucent white play triangle. */
.p-device.p-device-video { cursor: pointer; }
.p-device.p-device-video .play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: background .2s ease, transform .2s ease;
}
.p-device.p-device-video:hover .play {
  background: rgba(255, 255, 255, 0.42);
  transform: translate(-50%, -50%) scale(1.06);
}
.p-device.p-device-video .play::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  transform: translate(-40%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 20px 0 20px 32px;
  border-color: transparent transparent transparent #FFFFFF;
}
.p-device.p-device-video iframe {
  width: 905px; height: 506px;
  border: 0; display: block;
}

/* Request Pricing #1 (84:57 @ 640,1082 230x63) */
.p-cta-1 { top: 1082px; left: 640px; width: 230px; height: 63px; }
.p-cta-1 .btn-pill {
  width: 230px; height: 63px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px; border-radius: 30px; color: var(--c-white);
}
.p-cta-1 .btn-purple { background: var(--c-purple); }

/* Stats row (69:118 @ 321,1286 870x104) */
.p-stats { top: 1286px; left: 321px; width: 870px; height: 104px; }
.p-stats .stat { position: absolute; }
.p-stats .stat .n {
  font-family: var(--f-head); font-weight: 900;
  font-size: 48px; line-height: 60.62px; color: var(--c-stat);
  white-space: nowrap;
}
.p-stats .stat .c {
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 20.21px; color: var(--c-body);
  width: 212px;
}
.p-stats .s1 { left: 0; top: 0; }
.p-stats .s1 .n { position: absolute; left: 9px; top: 9px; }
.p-stats .s1 .c { position: absolute; left: 0; top: 64px; }
.p-stats .s2 { left: 341px; top: 0; }
.p-stats .s2 .n { position: absolute; left: 0; top: 2px; }
.p-stats .s2 .c { position: absolute; left: 4px; top: 64px; }
.p-stats .s3 { left: 647px; top: 0; }
.p-stats .s3 .n { position: absolute; left: 0; top: 0; }
.p-stats .s3 .c { position: absolute; left: 11px; top: 64px; }

/* Clinical Standard for hair imaging (Product Smart Practice Systems 200:627 @ 286,1500 940x770)
   — v2 only (inserted between stats and Two Technologies) */
.p-clinical { top: 1500px; left: 286px; width: 940px; height: 770px; }
.p-clinical .cl-title {
  position: absolute; left: 198px; top: 0;
  width: 543px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: #000; text-align: center;
  margin: 0;
}
.p-clinical .cl-sub {
  position: absolute; left: 67px; top: 63px;
  width: 807px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 19.19px;
  color: var(--c-primary); text-align: center;
  margin: 0;
}
.p-clinical .cl-camera {
  position: absolute; left: 46px; top: 148px;
  width: 724px; height: 621px;
  display: block;
}

/* Callout numbers (Figtree 700 64px #FFAB88) */
.p-clinical .cl-num {
  position: absolute;
  font-family: var(--f-head); font-weight: 700;
  font-size: 64px; line-height: 80.83px;
  color: #FFAB88;
  width: 33px; text-align: left;
}
.p-clinical .cl-num.c1 { left: 29px;   top: 217px; }
.p-clinical .cl-num.c2 { left: -77px;  top: 461px; }
.p-clinical .cl-num.c3 { left: 749px;  top: 266px; }
.p-clinical .cl-num.c4 { left: 642px;  top: 530px; }
.p-clinical .cl-num.c5 { left: 688px;  top: 388px; }

/* Callout text (Figtree 500 16px #2E6A77) */
.p-clinical .cl-txt {
  position: absolute;
  font-family: var(--f-head); font-weight: 500;
  font-size: 16px; line-height: 20.21px;
  color: #2E6A77; text-align: left;
}
.p-clinical .cl-txt.c1 { left: 62px;  top: 232px; width: 186px; }
.p-clinical .cl-txt.c2 { left: -30px; top: 473px; width: 180px; }
.p-clinical .cl-txt.c3 { left: 787px; top: 278px; width: 212px; }
.p-clinical .cl-txt.c4 { left: 688px; top: 539px; width: 201px; }
.p-clinical .cl-txt.c5 { left: 735px; top: 400px; width: 161px; }

/* Callout connector lines (2px horizontal, #FFAB88). Figma lines are 2px stroke;
   use 2px to avoid sub-pixel dropout at zoom:0.9. */
.p-clinical .cl-line {
  position: absolute; height: 2px;
  background: #FFAB88;
}
.p-clinical .cl-line.l1 { left: 266px; top: 259px; width: 237px; }
.p-clinical .cl-line.l2 { left: 137px; top: 499px; width: 126px; }
.p-clinical .cl-line.l3 { left: 610px; top: 308px; width: 126px; }
.p-clinical .cl-line.l4 { left: 553px; top: 563px; width: 83px; }
.p-clinical .cl-line.l5 { left: 515px; top: 427px; width: 162px; }

/* Callout dots (12x12 #FFAB88 circles at anchor points on camera) */
.p-clinical .cl-dot {
  position: absolute; width: 12px; height: 12px;
  background: #FFAB88; border-radius: 50%;
}
.p-clinical .cl-dot.d1 { left: 497px; top: 254px; }
.p-clinical .cl-dot.d2 { left: 263px; top: 494px; }
.p-clinical .cl-dot.d3 { left: 604px; top: 304px; }
.p-clinical .cl-dot.d4 { left: 547px; top: 558px; }
.p-clinical .cl-dot.d5 { left: 509px; top: 422px; }

/* Request Pricing CTA button (Figma @ 613,2206 in parent frame → 327,706 in section) */
.p-clinical .cl-cta {
  position: absolute; left: 327px; top: 706px;
  width: 286px; height: 63px;
  background: var(--c-purple); color: var(--c-white);
  border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px;
}

/* Two technologies (95:8 @ 286,1500 940x676) */
.p-tech { top: 1500px; left: 286px; width: 940px; height: 676px; }
.p-tech h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; width: 451px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: #000; text-align: center;
}
.p-tech .tech-tabs {
  position: absolute; top: 86px; left: 0;
  width: 938px; height: 88px;
  display: flex; gap: 2px;
}
.p-tech .tech-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-weight: 700;
  font-size: 24px; line-height: 28.78px;
  color: #fff; text-align: center; padding: 10px;
  background: #D8D7D7; border: 0; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.p-tech .tech-tab.tt-ai { background: #D8D7D7; }
.p-tech .tech-tab.tt-img { background: #E8E8E8; color: rgba(0,0,0,0.35); }
.p-tech .tech-tab.tt-ai.active { background: #D8D7D7; color: #fff; }
.p-tech .tech-tab.tt-img.active { background: var(--c-coral); color: #fff; }

.p-tech .tech-body {
  position: absolute; top: 195px; left: 22px;
  width: 918px; height: 481px;
}
.p-tech .tech-col {
  position: absolute; left: 0; top: 0;
  width: 918px; height: 481px;
  display: none;
}
.p-tech .tech-col.active { display: block; }

/* Shared description paragraph */
.p-tech .tc-desc {
  font-family: var(--f-head); font-weight: 400;
  font-size: 24px; line-height: 30.31px; color: var(--c-body);
}

/* Shared card styles */
.p-tech .tc-card {
  position: absolute; border-radius: 18px;
  background: #EDEBEB;
  display: flex; align-items: center;
}
.p-tech .tc-card .tc-bar {
  position: absolute; left: 0; top: 15px;
  width: 10px; height: 74px;
  border-radius: 18px;
}
.p-tech .tc-card .tc-label {
  margin-left: 48px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 28px; line-height: 33.58px;
  color: #000;
}
.p-tech .tc-card .tc-label-sm {
  font-size: 22px; line-height: 26.65px;
}

/* AI view layout (5 role cards + watermark) */
.p-tech .tc-ai .tc-desc {
  position: absolute; left: 0; top: 191px; width: 312px;
}
.p-tech .tc-ai .tc-watermark {
  position: absolute; left: 589px; top: 0;
  width: 102px; height: 115px;
  font-family: var(--f-head); font-weight: 900;
  font-size: 96px; line-height: 115.12px; color: var(--c-primary);
  text-align: center;
}
.p-tech .tc-ai .tc-cards {
  position: absolute; left: 365px; top: 133px;
  width: 553px; height: 348px;
}
.p-tech .tc-ai .tc-card { width: 267px; height: 104px; }
.p-tech .tc-ai .tc-card:nth-child(1) { left: 0;   top: 0; }
.p-tech .tc-ai .tc-card:nth-child(2) { left: 286px; top: 0; }
.p-tech .tc-ai .tc-card:nth-child(3) { left: 0;   top: 122px; }
.p-tech .tc-ai .tc-card:nth-child(4) { left: 286px; top: 122px; }
.p-tech .tc-ai .tc-card:nth-child(5) { left: 0;   top: 244px; }

/* Hair imaging view layout (shared description + 4 tech cards 2x2) */
.p-tech .tc-img .tc-desc {
  position: absolute; left: 24px; top: 0; width: 911px;
  text-align: left;
}
.p-tech .tc-img .tc-cards {
  position: absolute; left: 0; top: 122px;
  width: 935px; height: 384px;
}
.p-tech .tc-img .tc-card.tc-card-wide { width: 452px; height: 176px; }
.p-tech .tc-img .tc-card.tc-card-wide .tc-bar { top: 17px; height: 104px; }
.p-tech .tc-img .tc-card:nth-child(1) { left: 0;   top: 0; }
.p-tech .tc-img .tc-card:nth-child(2) { left: 483px; top: 0; }
.p-tech .tc-img .tc-card:nth-child(3) { left: 0;   top: 208px; }
.p-tech .tc-img .tc-card:nth-child(4) { left: 483px; top: 208px; }
.p-tech .tc-img .tc-card .tc-label { margin-left: 37px; max-width: 360px; }

/* System diagram (95:11 @ 286,2368 940x471) */
.p-diagram {
  top: 2368px; left: 286px; width: 940px; height: 471px;
  margin: 0;
}
.p-diagram img { width: 940px; height: 471px; display: block; }

/* Integrations (95:12 @ 285,3031 933x475) */
.p-integrations { top: 3031px; left: 285px; width: 933px; height: 475px; }
.p-integrations h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; width: 745px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
}
.p-integrations .p-int-sub {
  position: absolute; left: 197px; top: 48px; width: 548px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 20.21px; color: var(--c-body);
  text-align: center;
}
.p-integrations .p-int-label {
  position: absolute; font-family: var(--f-head); font-weight: 700;
  font-size: 16px; line-height: 19.19px; color: var(--c-primary);
  text-align: center;
}
.p-integrations .l-emr { left: 60px; top: 154px; width: 101px; }
.p-integrations .l-pay { left: 395px; top: 154px; width: 150px; }
.p-integrations .l-com { left: 729px; top: 154px; width: 193px; }
.p-integrations .l-pms { left: 176px; top: 456px; width: 234px; }
.p-integrations .l-cal { left: 587px; top: 456px; width: 133px; }
.p-integrations .p-int-graphic {
  position: absolute; left: 0; top: 210px;
  width: 933px; height: 220px; display: block;
}

/* Clinical studies (72:1083 @ 288,3698 904x399) */
.p-studies { top: 3698px; left: 288px; width: 904px; height: 399px; }
.p-studies h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 22px; width: 720px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
}
.p-studies .p-studies-logos {
  position: absolute; left: 0; top: 88px;
  width: 904px; height: 399px; display: block;
  object-fit: contain;
}

/* FAQ positioning for Product (same as before) */
.page.product .product-faq {
  position: absolute;
  left: 308px; top: 4289px;
  width: 952px;
  background: var(--c-bg);
  z-index: 6;
  padding: 0;
}

/* Product footer (88:145 @ 0,4796 1523x822) — reuses Home footer-bg.png gradient */
.p-foot { top: 4796px; left: 0; width: 1512px; height: 822px; }
.p-foot h2 {
  position: absolute; left: 253px; top: 134px;
  width: 1006px; height: 48px;
  font-family: var(--f-head); font-weight: 900;
  font-size: 40px; line-height: 47.96px;
  color: var(--c-primary); text-align: center;
}
.p-foot .p-foot-cta {
  position: absolute; left: 659px; top: 234px;
  width: 205px; height: 51px;
  background: var(--c-purple); color: var(--c-white);
  border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px;
}
.p-foot .p-foot-logo {
  position: absolute; left: 293px; top: 587px;
  width: 105px; height: 48px; display: block;
}
.p-foot .p-foot-copy {
  position: absolute; left: 806px; top: 543px;
  width: 431px; text-align: center;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-white);
}
.p-foot .foot-link {
  position: absolute; text-align: center;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-white); text-decoration: underline;
}
.p-foot .p-foot-privacy { left: 1114px; top: 587px; width: 123px; }
.p-foot .p-foot-msg     { left: 951px;  top: 635px; width: 286px; }

/* Body-level bleed bg for Product footer (same footer-bg.png as Home, positioned at Product's footer Y) */
.bleed-bg.product-footer-bleed {
  top: 4796px; height: 822px;
  background-image: url('images/footer-bg.png?v=3');
}
.bleed-bg.product-footer-bleed::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 411px;
  height: 1px;
  background: #FFFFFF;
}

/* About page — proper HTML/CSS (replaces old full-page PNG shortcut) */

/* Hero (Part 01 69:377 @ 0,207 1512x263) */
.a-hero { top: 207px; left: 0; width: 1512px; height: 263px; }
.a-hero-h1 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 58px; width: 697px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 48px; line-height: 57.56px;
  color: var(--c-primary); text-align: center;
}
.a-hero-sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 178px; width: 453px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-primary); text-align: center;
}

/* About US section (78:23 @ 0,554 1512x679) */
.a-team { top: 554px; left: 0; width: 1512px; height: 679px; }
.a-team-title {
  position: absolute; left: 151px; top: 368px;
  font-family: var(--f-head); color: #6365B8;
  line-height: 153.49px;
}
.a-team-title .w1 { font-weight: 900; font-size: 128px; display: block; }
.a-team-title .w2 { font-weight: 300; font-size: 128px; display: block; margin-top: -50px; margin-left: 246px; }
.a-team-photo {
  position: absolute; left: 133px; top: 76px;
  width: 411px; height: 286px;
  border-radius: 18px; object-fit: cover;
}
.a-card { position: absolute; }
.a-card h3 {
  font-family: var(--f-head); font-weight: 400;
  font-size: 28px; line-height: 33.58px;
  color: var(--c-primary); margin: 0 0 15px 0;
  text-align: left;
}
.a-card h3 strong { font-weight: 700; }
.a-card h3 .reg { font-weight: 400; }
.a-card p {
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 19.19px; color: #000;
  margin: 0;
}
.a-card.why { left: 677px; top: 79px; width: 624px; }
.a-card.what { left: 677px; top: 260px; width: 600px; }
.a-card.how {
  left: 638px; top: 425px; width: 634px; height: 254px;
  padding: 25px 33px;
  box-sizing: border-box;
}
.a-card.how h3, .a-card.how p { text-align: left; }
.a-card.how p { color: var(--c-body); }

/* Dividing lines in About US section (Figma: 3 gray 1px strokes #707070) */
.a-team .a-divider { position: absolute; background: #707070; }
.a-team .a-divider.a-div-v {
  left: 614px; top: 0; width: 1px; height: 604px;
}
.a-team .a-divider.a-div-h1 {
  left: 617px; top: 222px; width: 816px; height: 1px;
}
.a-team .a-divider.a-div-h2 {
  left: 617px; top: 425px; width: 816px; height: 1px;
}

/* Timeline (77:19 @ 325,1332 861x1380) */
.a-timeline { top: 1332px; left: 325px; width: 861px; height: 1380px; }
.a-timeline h2 {
  position: absolute; left: 281px; top: 0;
  width: 344px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
}
.a-timeline .a-tl-sub {
  /* Widened to fit the 2-line wrap in browser Figtree (Figma spec 711 wraps to 3 here).
     Centered on the timeline's 861 width so stays visually centered. */
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 38px; width: 820px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 24px; line-height: 28.78px;
  color: var(--c-primary); text-align: center;
  letter-spacing: -0.005em;
}
/* Central vertical spine (Figma Vector 1 @ 424,140 1240 tall, gradient stroke, fades at top+bottom) */
.a-timeline .tl-spine {
  position: absolute;
  left: 424px; width: 1px;
  top: 140px; height: 1240px;
  background: #484747;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  z-index: 1;
}

/* Horizontal connector lines (Figma Vectors 2/3/4/5/6, each 156x0 stroke #000 w=0.5) */
.a-timeline .tl-tick {
  position: absolute;
  height: 1px; width: 156px;
  background: #484747;
  opacity: 0.55;
  z-index: 1;
}
.a-timeline .tl-tick.t1 { left: 248px; top: 358px; }   /* 2016 left */
.a-timeline .tl-tick.t2 { left: 444px; top: 563px; }   /* 2019 right */
.a-timeline .tl-tick.t3 { left: 248px; top: 787px; }   /* 2021 left */
.a-timeline .tl-tick.t4 { left: 444px; top: 987px; }   /* 2025 right */
.a-timeline .tl-tick.t5 { left: 248px; top: 1188px; }  /* 2026 left */

/* Bullseye dots: outer ring (41×41 coral stroke, transparent fill) + inner solid 27×27 coral circle.
   Figma Unions at x=403, y=337/542/765/966/1167. Circle centers at (424, 358/563/786/987/1188). */
.a-timeline .tl-node {
  position: absolute;
  left: 403px;
  width: 41px; height: 41px;
  border-radius: 50%;
  border: 1px solid var(--c-coral);
  background: transparent;
  z-index: 3;
}
.a-timeline .tl-node::before {
  /* Inner solid coral circle (Ellipse 12: 27×27 at (7,7) within the 41×41 outer) */
  content: "";
  position: absolute;
  left: 7px; top: 7px; width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--c-coral);
}
.a-timeline .tl-node.n1 { top: 337px; }
.a-timeline .tl-node.n2 { top: 542px; }
.a-timeline .tl-node.n3 { top: 765px; }
.a-timeline .tl-node.n4 { top: 966px; }
.a-timeline .tl-node.n5 { top: 1167px; }

/* Milestone frames — absolute containers matching Figma frame positions exactly */
.a-tl-item { position: absolute; }
.a-tl-item .tl-circle {
  position: absolute;
  width: 136px; height: 136px; border-radius: 50%;
  background: #FFAB88;
  z-index: 1;
}
.a-tl-item .tl-img {
  position: absolute;
  object-fit: cover;
  max-width: none;   /* override the base img{max-width:100%} so images can exceed parent width */
  z-index: 2;        /* image layers ABOVE the circle */
}
.a-tl-item .tl-year {
  position: absolute;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
  z-index: 3;
}
.a-tl-item .tl-body {
  position: absolute;
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 20.21px;
  color: var(--c-body); text-align: center;
  z-index: 3;
}

/* 2016 — frame 214x348 @ (8,144); image above circle */
.a-tl-item.tl-2016 { left: 8px; top: 144px; width: 214px; height: 348px; }
.a-tl-item.tl-2016 .tl-circle { left: 39px; top: 42px; }
.a-tl-item.tl-2016 .tl-img    { left: 21px; top: 0;  width: 147px; height: 178px; }
.a-tl-item.tl-2016 .tl-year   { left: 61px; top: 214px; width: 93px; }
.a-tl-item.tl-2016 .tl-body   { left: 0;   top: 268px; width: 214px; }

/* 2019 — frame 214x367 @ (647,330); image extends sides */
.a-tl-item.tl-2019 { left: 647px; top: 330px; width: 214px; height: 367px; }
.a-tl-item.tl-2019 .tl-circle { left: 45px; top: 69px; }
.a-tl-item.tl-2019 .tl-img    { left: 1px; top: 62px; width: 225px; height: 150px; }
.a-tl-item.tl-2019 .tl-year   { left: 61px; top: 233px; width: 93px; }
.a-tl-item.tl-2019 .tl-body   { left: 0;   top: 287px; width: 214px; }

/* 2021 — frame 221x304 @ (1,617); image extends above circle */
.a-tl-item.tl-2021 { left: 1px; top: 617px; width: 221px; height: 304px; }
.a-tl-item.tl-2021 .tl-circle { left: 46px; top: 12px; }
.a-tl-item.tl-2021 .tl-img    { left: 46px; top: -70px; width: 134px; height: 200px; }
.a-tl-item.tl-2021 .tl-year   { left: 68px; top: 170px; width: 93px; }
.a-tl-item.tl-2021 .tl-body   { left: 7px; top: 224px; width: 214px; }

/* 2025 — frame 214x301 @ (647,817); image above-left of circle */
.a-tl-item.tl-2025 { left: 647px; top: 817px; width: 214px; height: 301px; }
.a-tl-item.tl-2025 .tl-circle { left: 43px; top: 11px; }
.a-tl-item.tl-2025 .tl-img    { left: 0; top: 0; width: 211px; height: 121px; }
.a-tl-item.tl-2025 .tl-year   { left: 61px; top: 167px; width: 93px; }
.a-tl-item.tl-2025 .tl-body   { left: 0;   top: 221px; width: 214px; }

/* 2026 — image masked into the circle */
.a-tl-item.tl-2026 { left: 0; top: 1036px; width: 229px; height: 286px; }
.a-tl-item.tl-2026 .tl-circle { left: 47px; top: 0;   }
.a-tl-item.tl-2026 .tl-img    { left: 47px; top: 0;   width: 136px; height: 136px; border-radius: 50%; }
.a-tl-item.tl-2026 .tl-year   { left: 0;   top: 152px; width: 229px; }
.a-tl-item.tl-2026 .tl-body   { left: -10px; top: 206px; width: 246px; }

/* Numbers (78:26 @ 116,2827 1266x366) */
.a-numbers { top: 2827px; left: 116px; width: 1266px; height: 366px; }
.a-numbers h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; width: 231px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
}
.a-num-card {
  position: absolute; top: 108px; height: 258px;
  border-radius: 18px;
  background: #EEEEEF;
}
.a-num-card.n1 { left: 0;   width: 307px; background: #FFAB88; }
.a-num-card.n2 { left: 319px; width: 309px; }
.a-num-card.n3 { left: 638px; width: 309px; }
.a-num-card.n4 { left: 959px; width: 307px; }
.a-num-icon {
  position: absolute; right: 22px; top: 22px;
  width: 69px; height: 69px;
  object-fit: contain;
  object-position: top right;
  max-width: none;
}
.a-num-card.n1 .a-num-icon { width: 52px; height: 59px; }
.a-num-card.n2 .a-num-icon { width: 67px; height: 62px; top: 18px; }
.a-num-card.n3 .a-num-icon { width: 55px; height: 61px; }
.a-num-card.n4 .a-num-icon { width: 69px; height: 69px; top: 18px; }
.a-num-n {
  font-family: var(--f-body); font-weight: 900;
  font-size: 64px; line-height: 80.83px; color: var(--c-stat);
  position: absolute; left: 34px; top: 89px;
}
.a-num-c {
  position: absolute; left: 28px; top: 183px; width: 259px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 16px; line-height: 20.21px; color: var(--c-body);
}

/* Leadership (95:30 @ 191,3348 1163x500) */
.a-leaders { top: 3348px; left: 191px; width: 1163px; height: 500px; }
.a-leaders h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; width: 320px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
}
/* "Management Team" subtitle below the Our Leadership Team heading (Figma 79:21) */
.a-leaders-sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 49px; width: 205px;
  font-family: var(--f-head); font-weight: 400;
  font-size: 24px; line-height: 28.78px;
  color: var(--c-primary); text-align: center;
}

.a-lead { position: absolute; width: 370px; height: 180px; overflow: visible; }
.a-lead img {
  position: absolute; left: 0; top: 0;
  width: 112px; height: 112px;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: #D9D9D9;
}
.a-lead-text {
  position: absolute; left: 140px; top: 0; width: 228px;
  font-family: var(--f-head);
  font-size: 16px; line-height: 20.21px;
}
.a-lead-text .ld-name {
  font-weight: 900; color: var(--c-body);
}
.a-lead-text .ld-title {
  font-weight: 900; color: var(--c-coral);
}
.a-lead-text .ld-line {
  margin: 8px 0;
  width: 228px; height: 2px;
  background: rgba(0, 0, 0, 0.5);
}
.a-lead-text .ld-bio {
  font-weight: 400; color: var(--c-body);
}
.a-lead.l1 { left: 8px; top: 172px; }
.a-lead.l2 { left: 399px; top: 172px; }
.a-lead.l3 { left: 803px; top: 172px; }
.a-lead.l4 { left: 0; top: 388px; }
.a-lead.l5 { left: 404px; top: 388px; }
.a-lead.l6 { left: 816px; top: 388px; }

/* Global presence (95:31 @ 256,4202 1000x861) — map per Figma spec.
   Moved up to top=3990 so the gap to Leadership Team matches Figma (~142px) rather than ~354px. */
.a-global { top: 3990px; left: 256px; width: 1000px; height: 861px; }
.a-global h2 {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; width: 237px; height: 38px;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary); text-align: center;
}
.a-global-map {
  position: absolute;
  /* Tight gap below title, 20% larger than Figma's 1000x659 = 1200x791 */
  left: 50%; transform: translateX(-50%);
  top: 60px;
  width: 1200px; height: 791px;
  object-fit: contain;
  max-width: none;
}

/* CTA band (Slide 03 69:450) — moved up 288px to close gap to map */
.a-cta { top: 5129px; left: 0; width: 1512px; height: 362px; z-index: 2; }
.a-cta h2 {
  position: absolute; left: 374px; top: 39px;
  width: 765px; height: 48px;
  font-family: var(--f-head); font-weight: 900;
  font-size: 40px; line-height: 47.96px;
  color: var(--c-primary); text-align: center;
}
.a-cta .a-cta-btn {
  position: absolute; left: 641px; top: 130px;
  width: 230px; height: 51px;
  background: var(--c-purple); color: var(--c-white);
  border-radius: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 700; font-size: 24px;
  line-height: 30.58px;
}

/* About footer (88:170) — moved up 288px with CTA */
.a-foot { top: 5036px; left: 0; width: 1512px; height: 822px; }
.a-foot .a-foot-logo {
  position: absolute; left: 290px; top: 587px;
  width: 105px; height: 48px; display: block;
}
.a-foot .a-foot-copy {
  position: absolute; left: 803px; top: 543px;
  width: 431px; text-align: center;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-white);
}
.a-foot .foot-link {
  position: absolute; text-align: center;
  font-family: var(--f-head); font-weight: 400;
  font-size: 20px; line-height: 23.98px;
  color: var(--c-white); text-decoration: underline;
}
.a-foot .a-foot-privacy { left: 1111px; top: 587px; width: 123px; }
.a-foot .a-foot-msg     { left: 948px;  top: 635px; width: 286px; }

/* Body-level bleed: About team section tri-gradient */
.bleed-bg.about-team-bleed {
  top: 554px; height: 679px;
  background:
    linear-gradient(180deg, rgba(251,200,178,0.55) 0%, rgba(251,200,178,0) 55%),
    linear-gradient(90deg, rgba(255,171,136,0.6) 0%, rgba(255,171,136,0) 45%),
    linear-gradient(300deg, rgba(171,231,229,0.55) 0%, rgba(171,231,229,0) 45%),
    #F0FDFF;
}

/* Body-level bleed: About footer uses same footer-bg.png */
.bleed-bg.about-footer-bleed {
  top: 5036px; height: 822px;
  background-image: url('images/footer-bg.png?v=3');
}
.bleed-bg.about-footer-bleed::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 433px;
  height: 1px;
  background: #FFFFFF;
}

/* ---- Product page interactive FAQ overlay (covers baked-in PNG FAQ area) ---- */
/* Figma node 72:1075 @ (308, 4289) 952x309; title at y=0, items from y=88 */
.product-faq {
  position: absolute;
  left: 308px; top: 4289px;
  width: 952px;
  background: #F0FDFF;  /* covers underlying PNG */
  z-index: 6;
  padding: 0;
}
.product-faq h2 {
  margin: 0; padding: 0;
  font-family: var(--f-head); font-weight: 700;
  font-size: 32px; line-height: 38.37px;
  color: var(--c-primary);
  text-align: center;
}
.product-faq .faq-list {
  list-style: none; padding: 0; margin: 50px 0 0 0;
}
.product-faq .faq-item {
  border-bottom: 0;
  padding: 0;
}
.product-faq .faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 700;
  font-size: 16px; line-height: 20.21px;
  color: var(--c-body);
  text-align: left;
}
.product-faq .faq-arrow {
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 15px 0 15px;
  border-color: #D9D9D9 transparent transparent transparent;
  margin-left: 16px; flex-shrink: 0;
  transition: transform .2s ease, border-top-color .2s ease;
}
.product-faq .faq-q[aria-expanded="true"] .faq-arrow {
  border-top-color: var(--c-primary);
  transform: rotate(180deg);
}
.product-faq .faq-a {
  max-height: 0; overflow: hidden;
  font-family: var(--f-body); font-weight: 400;
  font-size: 16px; line-height: 20.21px;
  color: var(--c-body);
  transition: max-height .25s ease, padding .25s ease;
  padding: 0 30px 0 0;
}
.product-faq .faq-q[aria-expanded="true"] + .faq-a {
  max-height: 400px;
  padding: 4px 30px 10px 0;
}
/* (legacy hit zones removed — About now uses proper HTML/CSS) */

/* ===== Product v2: shift sections below to accommodate the Clinical Standard section =====
   Clinical Standard occupies 1500 → 2270 (770 tall, CTA removed).
   p-tech is tightened (no title, no tabs, no description paragraph) — cards only.
   p-diagram (system diagram) is removed in v2. */
.page.product.v2 { height: 5599px; }

.page.v2 .p-tech { top: 2370px; height: 384px; }
.page.v2 .p-tech .tech-body { top: 0; }
.page.v2 .p-tech .tc-img .tc-cards { top: 0; }

.page.v2 .p-integrations { top: 2946px; }
.page.v2 .p-studies      { top: 3613px; height: 465px; }
.page.v2 .p-studies h2   { width: 904px; white-space: nowrap; }

/* v2: HTML h2 replaces baked title; crop top 75px of PNG to hide its duplicate title.
   Gives ~80px of breathing room between h2 and logos. */
.page.v2 .p-studies .p-studies-wrap {
  position: absolute; left: 0; top: 140px;
  width: 904px; height: 325px;
  overflow: hidden;
}
.page.v2 .p-studies .p-studies-logos {
  position: absolute; left: 0; top: -75px;
  width: 904px; height: 399px;
  display: block; object-fit: contain;
}
.page.v2 .product-faq    { top: 4270px; }
.page.v2 .p-foot         { top: 4777px; }

.bleed-bg.product-footer-bleed-v2 { top: 4777px; }

/* ===================================================================
   RESPONSIVE
   ===================================================================
   Strategy:
   - ≥1512px: native desktop (body zoom: 0.9 as designed in Figma)
   - 1200–1511px: proportional scale (zoom = 100vw/1680 so 1512px design fits)
   - 768–1199px: tablet — stronger scale, nav stays horizontal
   - ≤767px: mobile — reset zoom, stacked flow, hamburger nav
================================================================== */

/* Between full desktop (≥1512) and mobile (≤767), step the zoom down so the 1512px
   Figma layout keeps shrinking as the viewport narrows. Discrete steps because
   Chrome's `zoom: calc(100vw / 1680)` renders inconsistently. */
@media (min-width: 1280px) and (max-width: 1511px) { body { zoom: 0.82; } }
@media (min-width: 1120px) and (max-width: 1279px) { body { zoom: 0.74; } }
@media (min-width: 1000px) and (max-width: 1119px) { body { zoom: 0.66; } }
@media (min-width: 900px)  and (max-width: 999px)  { body { zoom: 0.60; } }
@media (min-width: 820px)  and (max-width: 899px)  { body { zoom: 0.54; } }
@media (min-width: 768px)  and (max-width: 819px)  { body { zoom: 0.50; } }

/* ============ MOBILE (≤767px) ============ */
@media (max-width: 767px) {
  /* Reset the Figma-fixed 1512px layout — switch to natural flow */
  body { zoom: 1; overflow-x: hidden; }
  .page {
    width: 100%; max-width: 100vw;
    height: auto !important; min-height: 100vh;
  }
  .sec {
    position: relative !important;
    left: auto !important; top: auto !important; right: auto !important;
    width: 100% !important; max-width: 100%;
    padding-left: 20px; padding-right: 20px;
    box-sizing: border-box;
  }
  /* Hide full-bleed decorative backgrounds — they assume 1512 layout */
  .bleed-bg { display: none; }

  /* Nav: hamburger */
  .nav {
    position: fixed; zoom: 1;
    height: auto; padding: 14px 0;
    background: #FFFFFF;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(19,48,52,0.06);
  }
  .nav-container {
    padding: 0 20px;
    justify-content: space-between;
  }
  .nav-logo img { height: 28px; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: transparent; border: 0; padding: 6px; cursor: pointer;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px;
    background: #133034; border-radius: 2px;
    transition: all 0.3s;
  }
  .nav-links {
    position: fixed; top: 0; right: -100%;
    width: 280px; max-width: 85vw; height: 100vh;
    background: #FFFFFF;
    flex-direction: column; align-items: flex-start;
    padding: 80px 28px 28px; gap: 22px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
    transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 999;
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 1rem; }
  .nav-links a.nav-cta { width: 100%; text-align: center; }

  /* Spacer so content doesn't sit under fixed nav */
  .page > .sec:first-of-type,
  .page > *:first-child.sec { margin-top: 70px; }

  /* ----- PRODUCT / GROTRACK PAGE (platform.html) ----- */
  .p-hero, .p-hero-bg { height: auto; }
  .p-hero { padding: 80px 20px 40px; }
  .p-hero-bg { display: none; }
  .p-hero-h1 { position: relative; top: auto; left: auto; transform: none;
    width: 100%; font-size: 28px; line-height: 1.2; }
  .p-hero-sub { position: relative; top: auto; left: auto; transform: none;
    width: 100%; font-size: 16px; line-height: 1.5; margin-top: 16px; }

  .p-device {
    height: auto; padding: 0; margin: 24px 0;
  }
  .p-device img, .p-device iframe {
    width: 100%; height: auto; max-height: 260px;
  }
  .p-device.p-device-video .play {
    width: 64px; height: 64px;
  }
  .p-device.p-device-video .play::after {
    border-width: 14px 0 14px 22px;
  }

  .p-cta-1 { height: auto; padding: 16px 0; text-align: center; }
  .p-cta-1 .btn-pill { display: inline-flex; width: 200px; height: 50px; font-size: 18px; }

  .p-stats { height: auto; padding: 32px 20px;
    display: flex; flex-direction: column; gap: 24px; }
  .p-stats .stat { position: relative !important; left: auto !important; top: auto !important; }
  .p-stats .stat .n, .p-stats .stat .c {
    position: relative !important; left: auto !important; top: auto !important;
    text-align: center; width: 100%;
  }
  .p-stats .stat .n { font-size: 36px; line-height: 1.2; }

  .p-clinical { height: auto; padding: 40px 20px; }
  .p-clinical .cl-title { position: relative; left: auto; top: auto; width: 100%; font-size: 24px; line-height: 1.2; }
  .p-clinical .cl-sub { position: relative; left: auto; top: auto; width: 100%; font-size: 15px; line-height: 1.5; margin-top: 12px; }
  .p-clinical .cl-camera { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 20px; }
  /* Hide callouts + connector lines on mobile — they depend on exact pixel positions */
  .p-clinical .cl-num, .p-clinical .cl-line, .p-clinical .cl-dot { display: none; }
  .p-clinical .cl-txt {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; margin-top: 14px;
    padding-left: 28px;
  }
  .p-clinical .cl-txt::before {
    content: attr(data-num); position: absolute; left: 0; top: 0;
    color: #FFAB88; font-weight: 700; font-size: 20px;
  }
  /* Auto-number fallback via order */
  .p-clinical .cl-txt.c1::before { content: "1"; position: absolute; left: 0; top: 0; color: #FFAB88; font-weight: 700; font-size: 20px; }
  .p-clinical .cl-txt.c2::before { content: "2"; position: absolute; left: 0; top: 0; color: #FFAB88; font-weight: 700; font-size: 20px; }
  .p-clinical .cl-txt.c3::before { content: "3"; position: absolute; left: 0; top: 0; color: #FFAB88; font-weight: 700; font-size: 20px; }
  .p-clinical .cl-txt.c4::before { content: "4"; position: absolute; left: 0; top: 0; color: #FFAB88; font-weight: 700; font-size: 20px; }
  .p-clinical .cl-txt.c5::before { content: "5"; position: absolute; left: 0; top: 0; color: #FFAB88; font-weight: 700; font-size: 20px; }

  .p-tech { height: auto; padding: 32px 20px; }
  .p-tech .tech-body { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .p-tech .tech-col { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .p-tech .tc-cards {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    display: flex; flex-direction: column; gap: 14px;
  }
  .p-tech .tc-card {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; min-height: 96px;
    padding: 20px 20px 20px 28px;
  }
  .p-tech .tc-card .tc-label, .p-tech .tc-card .tc-label-sm { font-size: 15px; line-height: 1.4; }

  .p-integrations { height: auto; padding: 32px 20px; }
  .p-integrations h2 { position: relative; left: auto; top: auto; transform: none; width: 100%; font-size: 22px; line-height: 1.3; }
  .p-integrations .p-int-sub { position: relative; left: auto; top: auto; width: 100%; font-size: 14px; margin-top: 10px; }
  .p-integrations .p-int-graphic { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 20px; }
  .p-integrations .p-int-label { display: none; }

  .p-studies { height: auto !important; padding: 32px 20px; }
  .p-studies h2 {
    position: relative !important; left: auto !important; top: auto !important; transform: none !important;
    width: 100% !important; white-space: normal !important;
    font-size: 20px !important; line-height: 1.3;
  }
  .p-studies .p-studies-wrap,
  .p-studies .p-studies-logos {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    overflow: visible;
  }

  .product-faq { padding: 32px 20px !important;
    position: relative !important; left: auto !important; top: auto !important; width: 100% !important; }
  .product-faq h2 { font-size: 22px; }
  .product-faq .faq-q { font-size: 15px; line-height: 1.35; }

  .p-foot { height: auto !important; padding: 40px 20px; text-align: center; }
  .p-foot h2 { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; font-size: 22px !important; line-height: 1.3; }
  .p-foot .p-foot-cta { position: relative !important; left: auto !important; top: auto !important;
    display: inline-flex; width: 180px; height: 48px; margin: 24px auto; font-size: 18px; }
  .p-foot .p-foot-logo, .p-foot .p-foot-copy, .p-foot .foot-link {
    position: relative !important; left: auto !important; top: auto !important;
    margin: 10px auto; width: auto !important; text-align: center; display: block;
  }

  /* ----- ABOUT US PAGE (about.html) ----- */
  .a-hero { height: auto; padding: 100px 20px 40px; }
  .a-hero-h1 { position: relative; left: auto; top: auto; transform: none; width: 100%; font-size: 28px; line-height: 1.2; }
  .a-hero-sub { position: relative; left: auto; top: auto; transform: none; width: 100%; font-size: 16px; margin-top: 14px; }

  .a-team { height: auto !important; padding: 32px 20px; }
  .a-team-title { position: relative !important; left: auto !important; top: auto !important;
    text-align: center; line-height: 1; margin-bottom: 16px; }
  .a-team-title .w1, .a-team-title .w2 {
    display: inline-block; font-size: 56px; margin: 0; font-weight: 900;
  }
  .a-team-title .w2 { font-weight: 300; margin-left: 8px; }
  .a-team-photo { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; aspect-ratio: 3/2; margin-bottom: 20px; }
  .a-team .a-divider { display: none; }
  .a-card {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; padding: 20px 0 !important;
    border-top: 1px solid rgba(19,48,52,0.08);
  }
  .a-card h3 { font-size: 20px; }
  .a-card p { font-size: 15px; line-height: 1.5; }

  .a-timeline { height: auto !important; padding: 40px 20px; }
  .a-timeline h2 { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 22px; line-height: 1.3; }
  .a-timeline .a-tl-sub { position: relative !important; left: auto !important; top: auto !important;
    transform: none !important; width: 100% !important; font-size: 16px; margin-top: 10px; }
  .a-timeline .tl-spine, .a-timeline .tl-tick, .a-timeline .tl-node { display: none; }
  .a-tl-item {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    padding: 18px 0; border-top: 1px solid rgba(19,48,52,0.08); margin-top: 0;
  }
  /* tl-circle intentionally visible — styled by the polish block below */
  .a-tl-item .tl-img {
    /* Sized + positioned by the polish block below */
  }
  .a-tl-item .tl-year { position: relative !important; left: auto !important; top: auto !important;
    font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  .a-tl-item .tl-body { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 15px; line-height: 1.5; }

  .a-numbers { height: auto !important; padding: 32px 20px;
    display: flex; flex-direction: column; gap: 20px; }
  .a-numbers h2 { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 22px; text-align: center; }
  .a-num-card { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; padding: 20px;
    border-radius: 14px; background: #F0FDFF;
    display: flex; align-items: center; gap: 16px; }
  .a-num-card .a-num-icon { position: relative !important; left: auto !important; top: auto !important;
    width: 44px !important; height: 44px !important; flex-shrink: 0; }
  .a-num-card .a-num-n { position: relative !important; left: auto !important; top: auto !important;
    font-size: 32px; font-weight: 900; }
  .a-num-card .a-num-c { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 14px; line-height: 1.4; }

  .a-leaders { height: auto !important; padding: 32px 20px; }
  .a-leaders h2 { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 22px; text-align: center; }
  .a-leaders .a-leaders-sub { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 15px; text-align: center; margin-bottom: 20px; }
  .a-lead { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    display: flex; flex-direction: column; gap: 10px; padding: 18px 0;
    border-top: 1px solid rgba(19,48,52,0.08); }
  .a-lead img { position: relative !important; left: auto !important; top: auto !important;
    width: 100px !important; height: 100px !important; object-fit: cover; border-radius: 50%; }
  .a-lead-text { position: relative; left: auto; top: auto; width: 100%; }
  .a-lead-text .ld-name { font-size: 18px; font-weight: 700; }
  .a-lead-text .ld-title { font-size: 14px; color: #6365B8; margin: 2px 0 8px; }
  .a-lead-text .ld-line { width: 40px; height: 2px; background: #FFAB88; margin-bottom: 10px; }
  .a-lead-text .ld-bio { font-size: 14px; line-height: 1.5; }

  .a-global { height: auto !important; padding: 32px 20px; }
  .a-global h2 { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 22px; text-align: center; }
  .a-global .a-global-map { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; margin-top: 16px; }

  .a-cta { height: auto !important; padding: 40px 20px; text-align: center; }
  .a-cta h2 { position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; font-size: 22px; line-height: 1.3; }
  .a-cta .a-cta-btn { position: relative !important; left: auto !important; top: auto !important;
    display: inline-flex; margin: 20px auto; width: 200px; height: 50px; font-size: 18px; }

  .a-foot { height: auto !important; padding: 32px 20px; text-align: center; }
  .a-foot .a-foot-logo, .a-foot .a-foot-copy, .a-foot .foot-link {
    position: relative !important; left: auto !important; top: auto !important;
    margin: 8px auto; width: auto !important; text-align: center; display: block;
    font-size: 14px;
  }
}

/* ===== Mobile polish pass — fixes per Leon's review ===== */
@media (max-width: 767px) {
  /* Force .p-tech (incl. v2 override) to auto height so cards don't overlap next section */
  .page .p-tech,
  .page.v2 .p-tech { height: auto !important; min-height: 0 !important; }
  .page .p-tech .tech-body,
  .page.v2 .p-tech .tech-body { position: relative !important; height: auto !important; }

  /* Breathing room between sections so p-tech cards don't run into p-integrations */
  .p-tech { margin-bottom: 16px; padding-bottom: 28px !important; }
  .p-integrations { padding-top: 40px !important; }
  .p-studies { padding-top: 40px !important; }
  .product-faq { margin-top: 16px; }

  /* Restore footer color — hide global bleed-bg still, but give .p-foot a direct gradient */
  .p-foot {
    background: linear-gradient(180deg, #ABE7E5 0%, #FFAB88 50%, #FBC8B2 100%) !important;
    color: #FFFFFF !important;
    padding: 56px 20px 40px !important;
    border-top: 1px solid rgba(255,255,255,0.3);
  }
  .p-foot h2 { color: #16393E !important; }
  .p-foot .p-foot-logo {
    filter: brightness(0) invert(1); /* white the dark logo */
    height: 40px; width: auto;
  }

  /* ----- GROTRACK card fixes: force full-width + add gap ----- */
  .p-tech .tc-card.tc-card-wide { padding: 20px 20px 20px 28px; margin: 0; }

  /* Crop the baked title out of the studies logos PNG on mobile (matches desktop treatment) */
  .p-studies .p-studies-wrap {
    overflow: hidden !important;
    aspect-ratio: 904 / 325;
  }
  .p-studies .p-studies-logos {
    margin-top: -18% !important; /* shift image up to hide baked title */
  }

  /* ----- ABOUT US fixes ----- */

  /* Timeline: each item is a centered stack — a "stage" area up top (circle behind,
     image in front) followed by year + body below. Stage height is reserved via
     padding-top so content doesn't overlap the absolute-positioned visuals. */
  .a-tl-item {
    text-align: center;
    padding: 30px 20px 28px !important;
    padding-top: 170px !important;
    min-height: 0 !important;
    margin-top: 18px !important;
  }
  .a-tl-item .tl-circle {
    position: absolute !important;
    left: 50% !important; top: 30px !important;
    width: 110px !important; height: 110px !important;
    transform: translateX(-50%) !important;
    background: #FFAB88 !important;
    border-radius: 50% !important;
    z-index: 1 !important;
  }
  /* Rectangular images sit ON TOP of the circle, smaller so the circle shows around them */
  .a-tl-item.tl-2016 .tl-img,
  .a-tl-item.tl-2019 .tl-img,
  .a-tl-item.tl-2021 .tl-img,
  .a-tl-item.tl-2025 .tl-img {
    position: absolute !important;
    left: 50% !important; top: 55px !important;
    transform: translateX(-50%) !important;
    width: 110px !important; height: 82px !important;
    max-height: 82px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    display: block !important;
  }
  /* 2026 image is intentionally circular */
  .a-tl-item.tl-2026 .tl-img {
    position: absolute !important;
    left: 50% !important; top: 30px !important;
    transform: translateX(-50%) !important;
    width: 110px !important; height: 110px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
    z-index: 2 !important;
    display: block !important;
  }
  /* Year + body flow naturally under the 170px stage area */
  .a-tl-item .tl-year {
    position: relative !important; left: auto !important; top: auto !important;
    text-align: center !important; width: 100% !important;
    font-size: 22px !important; font-weight: 700;
    margin: 0 0 8px !important;
  }
  .a-tl-item .tl-body {
    position: relative !important; left: auto !important; top: auto !important;
    text-align: center !important;
    width: 100% !important; max-width: 240px !important;
    margin: 0 auto !important;
    font-size: 14px !important; line-height: 1.5 !important;
    padding: 0 !important;
  }

  /* Center all about-page section titles + fix "By the numbers" overflow */
  .a-team-title,
  .a-timeline h2,
  .a-timeline .a-tl-sub,
  .a-numbers h2,
  .a-leaders h2,
  .a-leaders .a-leaders-sub,
  .a-global h2,
  .a-cta h2,
  .p-integrations h2,
  .p-studies h2,
  .p-foot h2 {
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: none !important;  /* clear translateX(-50%) from base */
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word;
  }

  /* "By the numbers" — make title fit on one line if possible, else wrap cleanly */
  .a-numbers h2 { font-size: 22px !important; line-height: 1.25; padding: 0 10px; }

  /* ----- Leadership Team: 2 per row, centered ----- */
  .a-leaders {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 32px 16px !important;
  }
  .a-leaders h2, .a-leaders .a-leaders-sub { grid-column: 1 / -1; }
  .a-lead {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 16px 8px !important;
    border-top: none !important;
    border-radius: 12px;
    background: rgba(240, 253, 255, 0.5);
    height: 100%;
  }
  .a-lead img {
    width: 80px !important; height: 80px !important;
  }
  .a-lead-text { text-align: center !important; }
  .a-lead-text .ld-line { margin: 8px auto !important; }
  .a-lead-text .ld-name { font-size: 15px !important; }
  .a-lead-text .ld-title { font-size: 12px !important; margin: 2px 0 4px; }
  .a-lead-text .ld-bio { font-size: 12px !important; line-height: 1.4 !important; }

  /* ----- Global map centered (override translateX(-50%)) ----- */
  .a-global-map,
  .a-global .a-global-map {
    display: block;
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    width: 100% !important; height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }

  /* ----- About footer centering + color ----- */
  .a-foot {
    background: linear-gradient(180deg, #ABE7E5 0%, #FFAB88 50%, #FBC8B2 100%) !important;
    padding: 40px 20px 32px !important;
    text-align: center !important;
  }
  .a-foot .a-foot-logo {
    filter: brightness(0) invert(1);
    height: 38px !important; width: auto !important;
    margin: 0 auto 14px !important; display: block !important;
  }
  .a-foot .a-foot-copy { color: #16393E !important; font-size: 13px !important; }
  .a-foot .foot-link { color: #16393E !important; font-size: 13px !important; margin-top: 8px !important; }
}

/* =========================================================
   FIGMA MOBILE REDESIGN — match 370:391 (Product) + 370:804 (About)
   Targets: width <= 767. Overrides earlier mobile rules where needed.
   ========================================================= */
@media (max-width: 767px) {

  /* ----- Shared mobile typography baseline ----- */
  :root { --m-h1: 36px; --m-h2: 28px; }

  /* ----- PRODUCT / GROTRACK HERO ----- */
  .p-hero { padding: 88px 24px 28px !important; text-align: left !important; }
  .p-hero-h1 {
    font-size: var(--m-h1) !important;
    line-height: 1.12 !important;
    font-weight: 700;
    max-width: 320px;
    letter-spacing: -0.005em;
    text-align: left !important;
    margin-left: 0 !important;
  }
  .p-hero-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-top: 18px !important;
    max-width: 320px;
    text-align: left !important;
    margin-left: 0 !important;
  }

  /* CTA1 below device — Talk to an Expert pill, mid-size */
  .p-cta-1 .btn-pill {
    width: 188px !important;
    height: 50px !important;
    font-size: 17px !important;
    border-radius: 28px;
  }

  /* ----- PRODUCT STATS — left-aligned coral numbers (Figma mobile) ----- */
  .p-stats {
    align-items: flex-start !important;
    padding: 36px 28px !important;
    gap: 30px !important;
  }
  .p-stats .stat .n {
    text-align: left !important;
    font-size: 56px !important;
    line-height: 1 !important;
    font-weight: 700;
    color: #FFAB88;
  }
  .p-stats .stat .c {
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 6px;
    max-width: 280px;
    color: #16393E;
  }

  /* ----- PRODUCT clinical / integrations / studies / faq headings ----- */
  .p-clinical { padding: 44px 24px !important; text-align: left !important; }
  .p-clinical .cl-title {
    font-size: var(--m-h2) !important;
    line-height: 1.15 !important;
    font-weight: 700;
    text-align: left !important;
    margin-bottom: 14px !important;
    height: auto !important;
  }
  .p-clinical .cl-sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-top: 14px !important;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .p-integrations { padding: 44px 24px !important; text-align: left !important; }
  .p-integrations h2 {
    font-size: var(--m-h2) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    max-width: 320px;
    margin-bottom: 12px !important;
    height: auto !important;
    width: 100% !important;
  }
  .p-integrations .p-int-sub {
    font-size: 16px !important;
    line-height: 1.5;
    margin-top: 12px !important;
    max-width: 320px;
    text-align: left !important;
  }
  /* Keep integration labels hidden — they're absolutely positioned for the desktop graphic and don't fit the mobile flow */
  .p-integrations .p-int-label { display: none !important; }

  .p-studies { padding: 44px 24px !important; }
  .p-studies h2 {
    font-size: var(--m-h2) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    max-width: 320px;
    height: auto !important;
    margin-bottom: 14px !important;
  }

  .product-faq h2 {
    font-size: var(--m-h2) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    margin-bottom: 18px !important;
    height: auto !important;
  }
  .product-faq .faq-item { border-radius: 14px; }

  /* ----- PRODUCT footer band — white headline on gradient ----- */
  .p-foot {
    padding: 64px 24px 36px !important;
  }
  .p-foot h2 {
    color: #FFFFFF !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 700;
    max-width: 280px;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
  }
  .p-foot .p-foot-cta {
    height: 50px !important;
    width: 188px !important;
    font-size: 17px !important;
    margin: 22px auto 18px !important;
  }

  /* ----- ABOUT HERO ----- */
  .a-hero { padding: 96px 24px 32px !important; text-align: left !important; }
  .a-hero-h1 {
    font-size: 40px !important;
    line-height: 1.08 !important;
    font-weight: 700;
    max-width: 320px;
    letter-spacing: -0.005em;
    height: auto !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  .a-hero-sub {
    font-size: 16px !important;
    line-height: 1.5;
    margin-top: 14px;
    max-width: 320px;
    text-align: left !important;
    margin-left: 0 !important;
  }

  /* ----- ABOUT — "About us" team section on coral→purple gradient ----- */
  .a-team {
    background: linear-gradient(180deg, #F5C0A6 0%, #C9B8E2 78%, #F0FDFF 100%) !important;
    padding: 36px 24px 32px !important;
  }
  .a-team-title {
    line-height: 0.88 !important;
    margin-bottom: 18px !important;
    text-align: center !important;
  }
  .a-team-title .w1 {
    display: block !important;
    font-size: 92px !important;
    font-weight: 800 !important;
    color: #6365B8 !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
  }
  .a-team-title .w2 {
    display: block !important;
    font-size: 60px !important;
    font-weight: 300 !important;
    color: #16393E !important;
    margin: -6px 0 0 !important;
  }
  .a-team-photo {
    border-radius: 14px !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* WHY/WHAT/HOW cards on the gradient backdrop */
  .a-card {
    margin-top: 14px !important;
    padding: 18px 20px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border-radius: 14px !important;
    border-top: none !important;
  }
  .a-card h3 { font-size: 19px !important; font-weight: 700; color: #16393E !important; }
  .a-card p { font-size: 14px !important; line-height: 1.5 !important; color: #16393E !important; }

  /* ----- ABOUT timeline heading + journey copy ----- */
  .a-timeline { padding: 48px 24px !important; }
  .a-timeline h2 {
    font-size: var(--m-h2) !important;
    line-height: 1.15 !important;
    font-weight: 700;
    text-align: left !important;
    height: auto !important;
  }
  .a-timeline .a-tl-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 10px auto 24px !important;
    max-width: 320px;
    text-align: left !important;
  }

  /* ----- ABOUT BY THE NUMBERS — Figma layout (number-left big, icon-right, caption below) ----- */
  .a-numbers {
    padding: 44px 24px !important;
    gap: 14px !important;
  }
  .a-numbers h2 {
    font-size: var(--m-h2) !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
    font-weight: 700;
    height: auto !important;
  }
  .a-num-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    padding: 22px !important;
    background: #E5EAEB !important;
    border-radius: 18px !important;
  }
  .a-num-card.n1 { background: #FFAB88 !important; }
  .a-num-card .a-num-n {
    grid-column: 1; grid-row: 1;
    font-size: 44px !important;
    font-weight: 800;
    color: #16393E !important;
    line-height: 1 !important;
    text-align: left !important;
  }
  .a-num-card .a-num-icon {
    grid-column: 2; grid-row: 1;
    align-self: start !important;
    width: 32px !important; height: 32px !important;
    flex-shrink: 0;
  }
  .a-num-card .a-num-c {
    grid-column: 1 / -1; grid-row: 2;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #16393E !important;
    margin-top: 4px !important;
    text-align: left !important;
  }

  /* ----- ABOUT LEADERSHIP — single column, larger headshots ----- */
  .a-leaders {
    display: block !important;
    grid-template-columns: none !important;
    padding: 48px 24px !important;
  }
  .a-leaders h2 {
    font-size: var(--m-h2) !important;
    text-align: left !important;
    line-height: 1.15 !important;
    font-weight: 700;
    margin-bottom: 4px;
    height: auto !important;
  }
  .a-leaders .a-leaders-sub {
    font-size: 16px !important;
    text-align: left !important;
    margin-bottom: 24px !important;
  }
  .a-lead {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(19,48,52,0.08) !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .a-lead img { width: 110px !important; height: 110px !important; }
  .a-lead-text { text-align: center !important; }
  .a-lead-text .ld-name { font-size: 17px !important; font-weight: 700 !important; }
  .a-lead-text .ld-title { font-size: 14px !important; color: #FFAB88 !important; margin: 4px 0 8px !important; }
  .a-lead-text .ld-line { width: 64px; height: 2px; background: rgba(19,48,52,0.12); margin: 6px auto 12px !important; }
  .a-lead-text .ld-bio { font-size: 14px !important; line-height: 1.5 !important; max-width: 280px; margin: 0 auto !important; }

  /* ----- ABOUT global presence ----- */
  .a-global { padding: 48px 24px !important; }
  .a-global h2 {
    font-size: var(--m-h2) !important;
    text-align: left !important;
    line-height: 1.15 !important;
    font-weight: 700;
    height: auto !important;
  }

  /* ----- ABOUT CTA band — Figma "Join 700+ Clinics" ----- */
  .a-cta { padding: 64px 24px 24px !important; }
  .a-cta h2 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    font-weight: 800;
    max-width: 280px;
    margin: 0 auto !important;
    color: #16393E !important;
    height: auto !important;
  }
  .a-cta .a-cta-btn {
    height: 50px !important;
    width: 168px !important;
    font-size: 17px !important;
    margin: 24px auto 8px !important;
  }
}

@media (min-width: 1512px) { body { overflow-x: auto; } }