/* ════════════════════════════════════════════════════════════════
   PETLAB · vet-web-5.0
   Editorial-minimal in the manner of abelfragrance.com: warm cream
   ground, one sans family, generous whitespace, full-bleed imagery —
   carrying Petlab's purple ink and the deck's orange accent.
   ════════════════════════════════════════════════════════════════ */

:root{
  --cream:#F5F1FC;
  --cream-deep:#EAE1F9;
  --ink:#1D1530;          /* near-black purple */
  --ink-soft:#565064;
  --ink-faint:#6B6478;
  --purple:#3C1D73;
  --violet:#5B34A0;
  --lilac:#A98CDC;
  --orange:#C2510E;
  --rule:rgba(29,21,48,.12);
  --rule-strong:rgba(29,21,48,.28);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;

  --h1:clamp(2.7rem,6.8vw,5.6rem);
  --h2:clamp(2rem,4.2vw,3.4rem);
  --h3:clamp(1.15rem,1.7vw,1.4rem);
  --lead:clamp(1.1rem,1.5vw,1.35rem);
  --text:1.05rem;

  --pad:clamp(20px,4vw,72px);
  --wrap:1360px;
  --sec:clamp(90px,11vw,180px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font);font-size:var(--text);font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--font-display);font-weight:480;line-height:1.06;letter-spacing:-.012em;margin:0;text-wrap:balance;font-variation-settings:"opsz" 100}
h1 em,h2 em{font-style:italic;font-weight:440}
h1 strong,h2 strong{font-weight:700;font-variation-settings:"opsz" 100}   /* the brand name, set bold in the display face */
h3,h4{font-family:var(--font);font-weight:500;line-height:1.3;letter-spacing:-.008em;margin:0;text-wrap:balance}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
picture{display:contents}   /* the <img> stays the layout box, so no selector shifts */
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}

/* labels — small caps, wide tracking, the Abel signature */
.label{
  font-size:.8rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 26px;
}
.lead{font-size:var(--lead);line-height:1.6;color:var(--ink-soft);max-width:36em;font-weight:300}
.head{max-width:820px;margin:0 auto clamp(56px,7vw,110px);text-align:center}
.head .lead{margin-inline:auto;margin-top:26px}
.head--left{margin-inline:0;text-align:left}
.head--left .lead{margin-inline:0}
.note{
  font-size:.85rem;line-height:1.7;color:var(--ink-faint);
  border-left:2px solid var(--rule-strong);padding-left:16px;max-width:46em;
  margin-top:30px;
}

/* buttons — text-forward, capitalised, minimal */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--purple);
  padding:1.2em 2.6em;border:1px solid var(--purple);border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease);
  cursor:pointer;
}
.btn:hover{background:var(--violet);border-color:var(--violet)}
.btn--line{background:transparent;color:var(--purple)}
.btn--line:hover{background:var(--purple);color:#fff}
.btn--sm{padding:.9em 1.8em;font-size:.78rem}
.btn--block{width:100%}

/* ═══ NAV ═══ */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  padding-block:18px;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.nav.stuck{background:rgba(245,241,252,.92);backdrop-filter:blur(12px);padding-block:12px;box-shadow:0 1px 0 var(--rule)}
.nav__inner{
  max-width:calc(var(--wrap) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);
}
.nav__brand{flex:none}
.nav__brand img{height:48px;width:auto}
.nav__links{display:flex;gap:clamp(18px,2.4vw,40px);margin-left:auto}
.nav__links a{
  font-size:.85rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding-block:6px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav__toggle{display:none;flex-direction:column;gap:6px;width:40px;height:36px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--ink)}

/* ═══ HERO — product-led, on the Petlab lavender ground ═══ */
.hero{
  position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;align-items:center;
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(80% 70% at 76% 42%, rgba(122,76,173,.18), rgba(122,76,173,0) 64%),
    radial-gradient(60% 50% at 18% 90%, rgba(255,144,77,.10), rgba(255,144,77,0) 60%),
    linear-gradient(180deg, #F5F1FC 0%, #EDE5F9 100%);
}
.hero__split{
  display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,4.5vw,80px);
  align-items:center;
  max-width:calc(var(--wrap) + var(--pad)*2);margin-inline:auto;width:100%;
  padding:150px var(--pad) 70px;
}
.hero h1{max-width:12em}
.hero__lead{font-size:var(--lead);color:var(--ink-soft);max-width:26em;margin-top:30px}
.hero__points{margin-top:26px;max-width:30em}
.hero__points li{
  position:relative;padding:9px 0 9px 30px;font-size:.98rem;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);
}
.hero__points li::before{
  content:"";position:absolute;left:0;top:13px;width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23E8631A%22%3E%3Cellipse%20cx%3D%224.6%22%20cy%3D%229.6%22%20rx%3D%222.5%22%20ry%3D%223.1%22%20transform%3D%22rotate%28-24%204.6%209.6%29%22%2F%3E%3Cellipse%20cx%3D%229.4%22%20cy%3D%225.6%22%20rx%3D%222.6%22%20ry%3D%223.3%22%20transform%3D%22rotate%28-8%209.4%205.6%29%22%2F%3E%3Cellipse%20cx%3D%2214.8%22%20cy%3D%225.6%22%20rx%3D%222.6%22%20ry%3D%223.3%22%20transform%3D%22rotate%288%2014.8%205.6%29%22%2F%3E%3Cellipse%20cx%3D%2219.5%22%20cy%3D%229.6%22%20rx%3D%222.5%22%20ry%3D%223.1%22%20transform%3D%22rotate%2824%2019.5%209.6%29%22%2F%3E%3Cpath%20d%3D%22M12%2010.2c-3.3%200-6.3%202.7-6.3%205.7%200%202%201.5%203.4%203.5%203.4%201%200%201.9-.4%202.8-.4s1.8.4%202.8.4c2%200%203.5-1.4%203.5-3.4%200-3-3-5.7-6.3-5.7z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transform:rotate(-14deg);
}
.hero__points li:nth-child(2)::before{transform:rotate(12deg);top:15px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:38px}
.hero__call{
  font-size:.85rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple);padding-bottom:4px;
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .3s var(--ease);
}
.hero__call:hover{border-bottom-color:var(--purple)}
.btn+.hero__call{margin-left:10px}

.hero__proof{
  position:relative;z-index:2;width:100%;
  border-top:1px solid var(--rule);background:rgba(255,255,255,.36);
}
.hero__proof-inner{
  max-width:calc(var(--wrap) + var(--pad)*2);margin-inline:auto;width:100%;
  padding:18px var(--pad);
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(18px,2.6vw,44px);
}
.hero__proof-label{
  margin:0;flex:none;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.hero__proof-logos{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(20px,3.2vw,50px)}
.hero__proof-logos img{
  height:34px;width:auto;
  filter:grayscale(1);opacity:.6;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.hero__proof-logos li:hover img{filter:grayscale(0);opacity:1}

.hero__visual{perspective:1300px}
.hero__scene{position:relative;transform-style:preserve-3d;transition:transform .18s linear;will-change:transform}
.hero__kit{
  position:relative;z-index:2;width:100%;
  transform:translateZ(34px);
  filter:drop-shadow(0 34px 54px rgba(60,29,115,.26));
}
.hero__halo{
  position:absolute;z-index:0;left:50%;top:46%;
  width:96%;aspect-ratio:1.35;transform:translate(-50%,-50%) translateZ(-50px);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), rgba(245,241,252,0) 72%);
  pointer-events:none;
}
.hero__shadow{
  position:absolute;z-index:1;left:50%;bottom:-5%;
  width:70%;height:8%;transform:translateX(-50%) translateZ(-24px);
  background:radial-gradient(closest-side, rgba(29,21,48,.30), rgba(29,21,48,0) 72%);
  filter:blur(6px);pointer-events:none;
}
.hero__cap{
  margin-top:26px;text-align:center;
  font-size:.85rem;color:var(--ink-faint);letter-spacing:.02em;
}

/* ═══ AT A GLANCE ═══ */
.glance{background:var(--cream)}
.glance__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.stat{
  background:#FFFFFF;border:1px solid var(--rule);border-radius:18px;
  padding:clamp(26px,2.6vw,38px);
}
.stat strong{
  display:block;font-family:var(--font-display);font-weight:460;letter-spacing:-.01em;
  font-size:clamp(2.6rem,4.6vw,4rem);line-height:1;color:var(--purple);
}
.stat strong em{font-style:normal;font-size:.45em;letter-spacing:0;color:var(--orange)}
.stat span{
  display:block;margin:12px 0 14px;font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.stat p{font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.glance__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);
  margin-top:clamp(16px,2vw,28px);
}
.glance__facts li{
  border-top:2px solid var(--purple);padding-top:16px;
  font-size:.92rem;line-height:1.65;color:var(--ink-soft);
}
.glance__facts li span{
  display:block;margin-bottom:6px;font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}

/* ═══ THE SHIFT ═══ */
.shift{background:var(--cream-deep)}
.chains{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-bottom:clamp(56px,7vw,96px)}
.chain{background:#FFFFFF;border-radius:18px;padding:clamp(26px,3vw,42px);border:1px solid var(--rule)}
.chain--after{background:var(--purple);color:#fff;border-color:transparent}
.chain__tag{
  display:inline-block;font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:.6em 1.1em;border-radius:999px;background:rgba(29,21,48,.07);color:var(--ink-soft);margin:0 0 22px;
}
.chain__tag--brand{background:var(--orange);color:#2A1503}
.chain ol{counter-reset:c}
.chain ol li{
  counter-increment:c;position:relative;
  padding:12px 0 12px 44px;border-bottom:1px solid var(--rule);font-size:1rem;
}
.chain--after ol li{border-color:rgba(255,255,255,.16)}
.chain ol li::before{
  content:counter(c,decimal-leading-zero);
  position:absolute;left:0;top:13px;
  font-size:.74rem;font-weight:500;letter-spacing:.06em;color:var(--orange);
}
.chain__note{margin-top:20px;font-size:.85rem;color:var(--ink-faint)}
.chain__note--brand{color:var(--lilac)}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center}
.duo--flip{grid-template-columns:.9fr 1.1fr;margin-top:clamp(56px,7vw,96px)}
.duo__media{margin:0}
.duo__media img{width:100%;border-radius:18px;aspect-ratio:4/3;object-fit:cover}
.duo--flip .duo__media img{aspect-ratio:4/5}
.duo__text{font-size:1.08rem;line-height:1.8;color:var(--ink-soft)}
.duo h3{margin-bottom:16px}

/* ═══ WHY ═══ */
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,64px) clamp(28px,3.4vw,56px)}
.why__item{border-top:1px solid var(--rule-strong);padding-top:22px}
.why__n{font-size:.8rem;font-weight:500;letter-spacing:.14em;color:var(--orange)}
.why__item h3{margin:12px 0 12px}
.why__item p{font-size:.95rem;line-height:1.7;color:var(--ink-soft)}

/* ═══ THE KIT — 3D stage ═══ */
.kit{background:var(--cream-deep);overflow:hidden}
.stage{
  position:relative;
  max-width:1100px;margin-inline:auto;padding-inline:var(--pad);
  perspective:1400px;
}
.stage__scene{
  position:relative;transform-style:preserve-3d;
  transition:transform .18s linear;
  will-change:transform;
}
.stage__kit{width:100%;position:relative;z-index:2;transform:translateZ(40px)}
.stage__glow{
  position:absolute;left:50%;top:44%;z-index:0;
  width:78%;aspect-ratio:1.6;transform:translate(-50%,-50%) translateZ(-60px);
  background:radial-gradient(closest-side, rgba(91,52,160,.16), rgba(91,52,160,0) 70%);
  pointer-events:none;
}
.stage__shadow{
  position:absolute;left:50%;bottom:-3%;z-index:1;
  width:72%;height:9%;transform:translateX(-50%) translateZ(-30px);
  background:radial-gradient(closest-side, rgba(29,21,48,.28), rgba(29,21,48,0) 72%);
  filter:blur(6px);pointer-events:none;
}
.hot{
  position:absolute;z-index:3;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--orange);background:rgba(232,99,26,.16);
  cursor:pointer;transform:translateZ(90px);
  transition:background .25s,transform .25s;
}
.hot::after{
  content:"";position:absolute;inset:7px;border-radius:50%;background:var(--orange);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,99,26,.45)}70%{box-shadow:0 0 0 14px rgba(232,99,26,0)}100%{box-shadow:0 0 0 0 rgba(232,99,26,0)}}
.hot:hover,.hot:focus-visible{background:rgba(232,99,26,.35);transform:translateZ(90px) scale(1.25)}
.hot--1{left:9%;top:64%}    /* Mobicube — left tray unit */
.hot--2{left:31%;top:38%}   /* lid screen / analyzer */
.hot--3{left:24%;top:66%}   /* Mobimix — phone-dock unit */
.hot--4{left:39%;top:64%}   /* Mobifuge dome */
.hot--5{left:49%;top:62%}   /* pipettes */
.stage__readout{
  margin:34px auto 0;max-width:520px;text-align:center;
  background:#FFFFFF;border:1px solid var(--rule);border-radius:999px;
  padding:14px 28px;
  display:flex;gap:14px;align-items:baseline;justify-content:center;
}
.stage__readout strong{font-weight:500;font-size:.95rem;letter-spacing:.02em;color:var(--purple);white-space:nowrap}
.stage__readout span{font-size:.85rem;color:var(--ink-faint)}
.modules{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:1px solid var(--rule-strong)}
.modules li{
  padding:16px 18px 16px 0;border-bottom:1px solid var(--rule);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);
}
.modules li span{
  display:block;margin-bottom:4px;font-size:.78rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.modules--plain li{color:var(--ink);font-size:.95rem}

/* ═══ STEPS ═══ */
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.steps__grid li{background:#FFFFFF;border:1px solid var(--rule);border-radius:18px;padding:clamp(24px,2.4vw,34px)}
.steps__grid li>span{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--purple);color:#fff;
  font-size:.78rem;font-weight:500;letter-spacing:.05em;margin-bottom:18px;
}
.steps__grid h3{margin-bottom:10px}
.steps__grid p{font-size:.92rem;line-height:1.65;color:var(--ink-soft)}

/* ═══ SOFTWARE ═══ */
.soft__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,90px);align-items:start}
.soft__grid .modules{margin-top:0}
/* the two films run side by side, so the pair spans the whole grid rather
   than sitting in its left column */
.soft__vids{
  grid-column:1/-1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,32px);align-items:start;
  margin-top:clamp(10px,1.6vw,22px);
}
.soft__vids figure{margin:0}
.soft__vids video{width:100%;border-radius:14px;background:#000;aspect-ratio:16/9}
.soft__vids figcaption{margin-top:10px;font-size:.85rem;color:var(--ink-faint);line-height:1.6}

/* ═══ PET GALLERY ═══ */
.gallery{padding-block:clamp(60px,7vw,110px) 0;overflow:hidden}
.gallery .label{margin-bottom:34px}
.gallery__track{
  display:flex;gap:clamp(14px,1.6vw,24px);
  width:max-content;padding-inline:var(--pad);
  animation:drift 46s linear infinite;
}
.gallery__track:hover{animation-play-state:paused}
.gallery__track figure{margin:0;flex:none}
.gallery__track img{height:clamp(240px,30vw,400px);width:auto;border-radius:14px;object-fit:cover}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ TRUST ═══ */
.trust__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,90px)}
.trust__cols h3{margin-bottom:14px}
.trust__cols p{font-size:1rem;line-height:1.75;color:var(--ink-soft)}
.trust__figures{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(48px,6vw,80px);padding-top:clamp(30px,4vw,48px);
  border-top:2px solid rgba(232,99,26,.4);
}
.trust__figures strong{
  display:block;font-family:var(--font-display);font-weight:460;letter-spacing:-.008em;
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;color:var(--orange);
}
.trust__figures span{
  display:block;margin-top:10px;font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}

/* ═══ CONTACT ═══ */
.contact{background:var(--purple);color:#fff}
.contact .label{color:var(--lilac)}
.contact .lead{color:rgba(255,255,255,.78)}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.contact__list{margin-top:34px;border-top:1px solid rgba(255,255,255,.2)}
.contact__list li{border-bottom:1px solid rgba(255,255,255,.2)}
.contact__list a{display:block;padding:14px 0;font-size:1.05rem;color:rgba(255,255,255,.85);transition:color .25s}
.contact__list a:hover{color:#fff}
.contact__quote{margin-top:30px;font-style:italic;color:var(--lilac)}
.form label{display:block;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}
.form input,.form textarea{
  display:block;width:100%;margin-top:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:10px;
  padding:.95em 1.1em;color:#fff;
  font-family:var(--font);font-size:1rem;font-weight:300;
  transition:border-color .25s,background .25s;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.4)}
.form input:focus,.form textarea:focus{outline:none;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.13)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact .btn{background:#fff;color:var(--purple);border-color:#fff}
.contact .btn:hover{background:var(--orange);border-color:var(--orange);color:#2A1503}
.form__status{margin-top:14px;font-size:.9rem;color:var(--lilac)}

/* ═══ FOOTER ═══ */
.footer{background:var(--cream);border-top:1px solid var(--rule)}
.footer__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,5vw,90px);padding-block:clamp(48px,6vw,80px)}
.footer__logo{height:60px;width:auto}
.footer__inner p{margin-top:18px;font-size:.95rem;color:var(--ink-soft)}
.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.footer__nav h4{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.footer__nav a{display:block;padding-block:6px;font-size:.95rem;color:var(--ink-soft)}
.footer__nav a:hover{color:var(--ink)}
.footer__bar{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-block:22px;border-top:1px solid var(--rule);
}
.footer__bar p{margin:0;font-size:.8rem;line-height:1.6;color:var(--ink-faint);max-width:52em}

/* ═══ REVEAL ═══ */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1;transform:none;transition:none}
  .gallery__track{animation:none}
  .stage__scene{transition:none}
  html{scroll-behavior:auto}
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1080px){
  .glance__grid,.glance__facts{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:repeat(3,1fr)}
  .steps__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;gap:0;
    background:var(--cream);box-shadow:0 18px 34px rgba(29,21,48,.14);
    padding:10px var(--pad) 24px;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding-block:14px;border-bottom:1px solid var(--rule)}
  .nav__toggle{display:flex}
  .nav .btn--sm{margin-left:auto}
  .chains,.duo,.duo--flip,.soft__grid,.contact__inner,.trust__cols,.footer__inner{grid-template-columns:1fr}
  .hero__split{grid-template-columns:1fr;padding-top:130px}
  /* width:100% is required — auto inline margins on a grid item cancel
     stretch, and the theatre has no in-flow content to size against,
     so the whole visual collapsed to 0x0 on mobile without it */
  .hero__visual{max-width:560px;margin-inline:auto;width:100%}
  .hero__proof-inner{padding-block:15px;gap:14px}
  .hero__proof-logos img{height:28px}
  .form__row{grid-template-columns:1fr}
}
@media (max-width:600px){
  .glance__grid,.glance__facts,.why__grid,.steps__grid{grid-template-columns:1fr}
  .panels{grid-template-columns:1fr 1fr}
  .hero h1{font-size:clamp(2.2rem,10vw,2.9rem)}
  .nav__brand img{height:40px}
  .hero__proof-label{width:100%}
  .hero__proof-logos{gap:22px}
  .hero__proof-logos img{height:24px}
  .hot{width:20px;height:20px}
}

/* ── hero theatre: the case-opening film on its dark stage — hovering
     it (or tapping) replays the opening ── */
.hero__theatre{
  position:relative;z-index:2;overflow:hidden;
  aspect-ratio:1/1;border-radius:22px;
  background:radial-gradient(120% 100% at 50% 30%, #17102A 0%, #0B0714 68%);
  transform:translateZ(34px);
  box-shadow:0 34px 64px rgba(60,29,115,.32);
  cursor:pointer;
  transition:box-shadow .5s var(--ease);
}
.hero__scene:hover .hero__theatre{box-shadow:0 40px 76px rgba(60,29,115,.42)}
.hero__theatre video,.hero__theatre img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 44%;
}
.hero__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(105% 105% at 50% 46%, rgba(11,7,20,0) 55%, rgba(11,7,20,.88) 92%),
    linear-gradient(180deg, rgba(11,7,20,.5) 0%, rgba(11,7,20,0) 16%),
    linear-gradient(0deg, rgba(11,7,20,.6) 0%, rgba(11,7,20,0) 20%);
}

/* ═══════════════════════════════════════════════════════════════════
   4.0 MODULES — AI-led hero, trust ribbon, comes-to-you, Mobilab, FAQ
   Structure borrowed from vetic.in (USP strip, card grids, repeated
   CTAs, FAQ accordion); palette and type unchanged from 3.0.
   ═══════════════════════════════════════════════════════════════════ */

/* AI pill in the hero label */
.pill-ai{
  display:inline-block;margin-right:10px;
  background:var(--purple);color:#fff;
  padding:.35em .85em;border-radius:999px;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;
}

/* hero USP strip — vetic's three-icon promise row */
.usp{margin-top:30px;display:grid;gap:2px;max-width:34em}
.usp li{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);
}
.usp li>span+*,.usp__txt{flex:1}
.usp__ico{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--rule);
  color:var(--purple);font-size:.9rem;
}
.usp__txt strong{display:block;font-weight:500;color:var(--ink);font-size:1rem;margin-bottom:2px}

/* nav dual CTA */
.nav__cta{display:flex;gap:10px;align-items:center}
.btn--ghost{background:transparent;color:var(--purple);border-color:var(--rule-strong)}
.btn--ghost:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

/* trust ribbon */
.ribbon{background:var(--purple);color:#fff;padding-block:18px}
.ribbon__inner{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px clamp(20px,3.4vw,54px);
}
.ribbon span{
  position:relative;font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);
}
.ribbon span+span::before{
  content:"";position:absolute;left:calc(-1 * clamp(10px,1.7vw,27px));top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--orange);transform:translateY(-50%);
}

/* AI spotlight */
.ai{background:var(--cream-deep)}
.ai__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.ai__card{
  background:#fff;border:1px solid var(--rule);border-radius:18px;
  padding:clamp(26px,2.6vw,36px);
}
.ai__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--purple);color:#fff;
  font-size:.76rem;font-weight:500;letter-spacing:.05em;margin-bottom:18px;
}
.ai__card h3{margin-bottom:10px}
.ai__card p{font-size:.93rem;line-height:1.68;color:var(--ink-soft)}

/* comes-to-you */
.comes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.comes__card{
  border-top:2px solid var(--orange);padding-top:22px;
}
.comes__card h3{margin-bottom:10px}
.comes__card p{font-size:.93rem;line-height:1.68;color:var(--ink-soft)}

/* the four pillars — the brochure's promise panel */
.pillars__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  max-width:1080px;margin-inline:auto;
  gap:clamp(18px,2.2vw,30px);
}
.pillars__card{
  background:#fff;border:1px solid var(--rule);border-radius:18px;
  padding:clamp(30px,3.4vw,48px) clamp(24px,3vw,40px);
  text-align:center;
}
.pillars__ico{display:block;color:var(--purple);margin:0 auto 22px}
.pillars__ico svg{width:clamp(46px,4.4vw,62px);height:auto;margin-inline:auto}
.pillars__card h3{
  font-size:clamp(1.1rem,1.5vw,1.32rem);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--purple);
}
.pillars__card h3::after{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--purple);margin:16px auto 14px;
}
.pillars__card p{
  font-size:.95rem;line-height:1.7;color:var(--ink-soft);
  max-width:22em;margin-inline:auto;
}
.compare{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(48px,6vw,80px);
}
.compare__col{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:clamp(24px,2.6vw,36px)}
.compare__col--brand{background:var(--purple);border-color:transparent;color:#fff}
.compare__tag{
  display:inline-block;margin:0 0 20px;padding:.55em 1.05em;border-radius:999px;
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(29,21,48,.06);color:var(--ink-soft);
}
.compare__tag--brand{background:var(--orange);color:#2A1503}
.compare ol{counter-reset:k}
.compare li{
  counter-increment:k;position:relative;padding:11px 0 11px 40px;
  border-bottom:1px solid var(--rule);font-size:.97rem;
}
.compare__col--brand li{border-color:rgba(255,255,255,.16)}
.compare li::before{
  content:counter(k,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-size:.74rem;font-weight:500;color:var(--orange);
}

/* About Mobilab */
.mobilab{background:var(--cream-deep)}
.mobilab__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,5vw,80px);align-items:start}
.mobilab__body p{font-size:1.02rem;line-height:1.8;color:var(--ink-soft)}
.mobilab__body strong{font-weight:500;color:var(--ink)}
.mobilab__body .btn{margin-top:12px}
.mobilab__facts{border-top:2px solid var(--purple)}
.mobilab__facts li{
  padding:18px 0;border-bottom:1px solid var(--rule);
  font-size:.9rem;color:var(--ink-soft);line-height:1.5;
}
.mobilab__facts span{
  display:block;font-family:var(--font-display);font-weight:460;letter-spacing:-.01em;
  font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.1;color:var(--orange);margin-bottom:4px;
}

/* FAQ accordion */
.faq__list{max-width:900px;margin-inline:auto;border-top:1px solid var(--rule-strong)}
.faq__list details{border-bottom:1px solid var(--rule)}
.faq__list summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font);font-size:1.05rem;font-weight:500;color:var(--ink);
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"+";position:absolute;right:8px;top:19px;
  font-size:1.5rem;font-weight:300;color:var(--purple);
  transition:transform .3s var(--ease);
}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list p{padding:0 44px 26px 0;font-size:.98rem;line-height:1.75;color:var(--ink-soft);margin:0}

@media (max-width:1080px){
  .ai__grid,.comes__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav__cta .btn--ghost{display:none}
  .mobilab__grid,.compare{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ai__grid,.comes__grid,.pillars__grid{grid-template-columns:1fr}
  .ribbon span:nth-child(n+4){display:none}
}

/* ── Mobilab Duo ecosystem (content from mobilab.in/products, recoloured
     from their green into the Petlab purple/orange system) ── */
.duo-eco{background:var(--cream-deep)}
.eco{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,22px);
  counter-reset:none;
}
.eco li{
  position:relative;background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:clamp(22px,2.3vw,30px);
}
/* the flow arrows between ecosystem stages */
.eco li:not(:last-child)::after{
  content:"";position:absolute;right:calc(-1 * clamp(14px,1.6vw,22px) / 2 - 4px);top:50%;
  width:8px;height:8px;border-top:1.5px solid var(--orange);border-right:1.5px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);
}
.eco__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--purple);color:#fff;
  font-size:.74rem;font-weight:500;letter-spacing:.05em;margin-bottom:16px;
}
.eco h3{margin-bottom:8px;font-size:1.05rem}
.eco p{font-size:.88rem;line-height:1.6;color:var(--ink-soft)}

.eco__split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,72px);
  margin-top:clamp(52px,6.5vw,88px);
}
.eco__split h3{margin-bottom:14px}
.eco__split .modules{margin-top:0}
.eco__lede{font-size:1.02rem;line-height:1.7;color:var(--ink-soft);margin-bottom:18px}
.note a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1080px){
  .eco{grid-template-columns:repeat(3,1fr)}
  .eco li:not(:last-child)::after{display:none}
}
@media (max-width:860px){ .eco__split{grid-template-columns:1fr} }
@media (max-width:600px){ .eco{grid-template-columns:1fr} }

/* ── the kit links through to its own product page ── */
.hero__theatre{display:block;text-decoration:none}
.hero__more{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%) translateY(8px);
  padding:.65em 1.4em;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);white-space:nowrap;
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.hero__scene:hover .hero__more{opacity:1;transform:translateX(-50%) translateY(0)}
.stage__link{display:block;position:relative;z-index:2}
.kit__cta{margin-top:clamp(36px,4vw,56px)}

/* ── product page ── */
.hero--product{min-height:auto;padding-bottom:clamp(20px,3vw,40px)}
.hero--product .hero__split{padding-top:140px}
.crumb{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px;
}
.crumb a{color:var(--purple);border-bottom:1px solid transparent;transition:border-color .25s}
.crumb a:hover{border-bottom-color:var(--purple)}
.crumb span{margin:0 .5em;opacity:.5}

/* nav now carries seven links plus two CTAs — tighten so it holds one line */
@media (min-width:861px){
  .nav__links{gap:clamp(12px,1.5vw,26px)}
  .nav__links a{font-size:.78rem;letter-spacing:.06em;white-space:nowrap}
  .nav__inner{gap:clamp(14px,1.8vw,30px)}
  .nav__brand img{height:52px}
  .nav .btn--sm{padding:.8em 1.35em;font-size:.72rem;white-space:nowrap}
}
@media (min-width:861px) and (max-width:1240px){
  .nav__links a[href*="faq"]{display:none}
}

/* ── product shot, app/dashboard screens, validator logo wall ── */
.shot{padding-block:clamp(40px,5vw,80px)}
.shot__fig{margin:0;position:relative}
.shot__fig img{width:100%;border-radius:20px}
/* the product name, set live over the photograph — the old raster wordmark
   was baked in at 1400px and went soft on any retina screen */
.shot__fig .shot__name{
  position:absolute;left:clamp(22px,4.4%,62px);bottom:clamp(18px,7.5%,74px);
  margin:0;text-align:left;
  font-family:var(--font-display);font-weight:440;
  font-size:clamp(1.5rem,4.3vw,3.3rem);line-height:1;letter-spacing:-.012em;
  color:rgba(255,255,255,.94);text-shadow:0 2px 34px rgba(0,0,0,.6);
  font-variation-settings:"opsz" 100;
}
.shot__fig .shot__name em{font-style:italic;font-weight:400;color:rgba(255,255,255,.8)}
.shot__fig figcaption{margin-top:14px;font-size:.85rem;color:var(--ink-faint);text-align:center}

.soft__shots{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(16px,2vw,28px);align-items:end;margin-bottom:clamp(26px,3vw,40px)}
.soft__shots figure{margin:0}
.soft__shots img{width:100%;border-radius:14px;background:#fff}
.soft__shots figcaption{margin-top:10px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);margin-top:4px}
.logos li{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:clamp(14px,1.6vw,20px) 10px;
}
.logos img{height:clamp(38px,4vw,54px);width:auto;object-fit:contain}
.logos span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);line-height:1.35}
@media (max-width:860px){ .soft__shots{grid-template-columns:1fr} .logos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .soft__vids{grid-template-columns:1fr} }
@media (max-width:600px){ .logos{grid-template-columns:repeat(2,1fr)} }

/* ── tightened rhythm: the landing page is an intro, the device page
     carries the detail. Sections were running ~180px of padding each. ── */
:root{
  --sec:clamp(40px,4.6vw,66px);
}
.head{margin-bottom:clamp(24px,2.8vw,40px)}
.head .lead{margin-top:18px}
.label{margin-bottom:18px}
.note{margin-top:22px}
.hero__split{padding-top:clamp(120px,13vh,150px);padding-bottom:clamp(44px,5vw,72px)}
.hero{min-height:auto}
.hero__lead{margin-top:22px}
.usp{margin-top:22px}
.usp li{padding:11px 0}
.hero__actions{margin-top:28px}
.duo__media img,.gallery__track img{border-radius:14px}
.gallery{padding-block:clamp(44px,5vw,80px) 0}
.gallery .label{margin-bottom:24px}
.chains{margin-bottom:clamp(36px,4.5vw,64px)}
.duo--flip{margin-top:clamp(36px,4.5vw,64px)}
.compare{margin-top:clamp(32px,4vw,56px)}
.eco__split{margin-top:clamp(36px,4.5vw,64px)}
.trust__figures{margin-top:clamp(32px,4vw,56px);padding-top:clamp(24px,3vw,36px)}
.mobilab__grid--solo{grid-template-columns:1fr;max-width:70ch}
.faq__list summary{padding-block:17px}
.faq__list p{padding-bottom:20px}
.why__grid{gap:clamp(26px,3vw,44px) clamp(24px,3vw,48px)}

/* ── final pass on inter-section rhythm ── */
.ribbon{padding-block:14px}
.gallery{padding-block:clamp(30px,3.4vw,52px) 0}
.gallery .label{margin-bottom:18px}
.chains{margin-bottom:clamp(26px,3vw,42px)}
.duo--flip,.eco__split{margin-top:clamp(26px,3vw,44px)}
.compare{margin-top:clamp(24px,2.8vw,40px)}
.trust__cols+.note,.note{margin-top:18px}
.kit__cta{margin-top:clamp(24px,2.8vw,38px)}
.stage__readout{margin-top:24px}
.modules{margin-top:clamp(28px,3.2vw,44px)}
.hero__split{padding-bottom:clamp(32px,3.6vw,52px)}
/* the 3D stage carried a lot of dead air under the case */
.stage{padding-bottom:0}
.trust__cols[style]{margin-top:clamp(30px,3.4vw,50px)!important}

/* Mobilab links carry the brand purple wherever they replace plain headings */
.label a{color:var(--purple);border-bottom:1px solid rgba(60,29,115,.35);transition:border-color .25s}
.label a:hover{border-bottom-color:var(--purple)}
.trust__cols h3 a{color:var(--purple);border-bottom:1px solid rgba(60,29,115,.28);transition:border-color .25s}
.trust__cols h3 a:hover{border-bottom-color:var(--purple)}



/* ── product block, in the manner of mobilab.in/products ── */
.prod{margin:0}
.prod img{
  width:100%;border-radius:20px;display:block;
  box-shadow:0 24px 54px rgba(60,29,115,.22);
}

/* ── the same block, as a film: autoplays muted, sound only if asked for ── */
.prod--film{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 54px rgba(60,29,115,.22);
  background:var(--ink);
}
.prod__video{
  width:100%;height:auto;display:block;
  object-fit:contain;
  background:var(--ink);
}
/* No scrim over the film: it would sit on the Petlab lockup in the bottom
   right of the frame. The control pills carry their own dark glass instead. */
.prod__controls{display:none}
.js .prod__controls{
  position:absolute;right:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);
  z-index:2;display:flex;gap:8px;
}
.prod__ctl{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 14px;border-radius:999px;
  font-family:var(--font);font-size:.82rem;font-weight:400;line-height:1;color:#fff;
  background:rgba(21,13,42,.52);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  cursor:pointer;opacity:.88;
  transition:background .25s var(--ease),opacity .25s var(--ease),transform .25s var(--ease);
}
.prod__ctl:not(.prod__ctl--sound){padding:0;width:40px;justify-content:center}
.prod__ctl:hover{background:rgba(21,13,42,.78);opacity:1;transform:translateY(-1px)}
.prod--film:hover .prod__ctl{opacity:1}
.prod__ico{width:17px;height:17px;flex:none}
/* icon pairs — one of each shows, driven by state classes on the figure */
.prod__ico--play,.prod__ico--loud{display:none}
.is-paused .prod__ico--play{display:block}
.is-paused .prod__ico--pause{display:none}
.is-loud .prod__ico--loud{display:block}
.is-loud .prod__ico--muted{display:none}
.prod__ctl-txt{white-space:nowrap;letter-spacing:.01em}
@media (max-width:520px){
  .prod__ctl{min-height:36px;font-size:.78rem;padding:0 12px}
  .prod__ctl:not(.prod__ctl--sound){width:36px}
}
.feats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(26px,3vw,42px);
}
.feats li{
  background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:clamp(20px,2.2vw,28px);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);
}
.feats__ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:14px;border-radius:50%;
  background:var(--cream-deep);color:var(--purple);
}
.feats__ico svg{width:20px;height:20px}
.feats strong{
  display:block;margin-bottom:5px;
  font-size:1rem;font-weight:500;color:var(--ink);
}
.kit__cta{margin-top:clamp(22px,2.6vw,34px);text-align:center}
@media (max-width:860px){ .feats{grid-template-columns:1fr} }

/* ═══════════ CHAT WIDGET — interface only, no backend ═══════════ */
.chat{position:fixed;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);z-index:80}
.chat__launcher{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--purple);color:#fff;
  box-shadow:0 12px 28px rgba(60,29,115,.38);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.chat__launcher:hover{transform:scale(1.06);background:var(--violet)}
.chat__launcher svg{width:25px;height:25px}
.chat__icoClose{display:none}
.chat.open .chat__icoOpen{display:none}
.chat.open .chat__icoClose{display:block}
.chat__ping{
  position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 2px var(--purple);
}
.chat.open .chat__ping{display:none}

.chat__panel{
  position:absolute;right:0;bottom:72px;width:min(94vw,368px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--rule);border-radius:18px;
  box-shadow:0 26px 60px rgba(29,21,48,.26);
  transform-origin:bottom right;
  animation:chatIn .28s var(--ease);
}
.chat__panel[hidden]{display:none}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

.chat__head{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 14px 16px;background:var(--purple);color:#fff;
}
.chat__avatar{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:50%;padding:3px;flex:none}
.chat__head div{flex:1;min-width:0}
.chat__head strong{display:block;font-size:.95rem;font-weight:500;line-height:1.2}
.chat__head span{display:block;font-size:.72rem;color:rgba(255,255,255,.72);margin-top:2px}
.chat__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ADE80;margin-right:4px}
.chat__x{background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;padding:4px;display:flex}
.chat__x svg{width:17px;height:17px}
.chat__x:hover{color:#fff}

.chat__log{
  padding:16px;display:flex;flex-direction:column;gap:10px;
  max-height:min(46vh,330px);overflow-y:auto;background:#FBFAFE;
}
.chat__note{
  margin:0;font-size:.7rem;line-height:1.5;text-align:center;color:var(--ink-faint);
  background:var(--cream-deep);border-radius:8px;padding:7px 10px;
}
.msg{max-width:84%;font-size:.87rem;line-height:1.55;padding:10px 13px;border-radius:14px;margin:0}
.msg--bot{align-self:flex-start;background:#fff;border:1px solid var(--rule);border-bottom-left-radius:5px;color:var(--ink)}
.msg--me{align-self:flex-end;background:var(--purple);color:#fff;border-bottom-right-radius:5px}
.msg--typing span{display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;background:var(--ink-faint);animation:blink 1.2s infinite}
.msg--typing span:nth-child(2){animation-delay:.2s}
.msg--typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.chat__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px;background:#FBFAFE}
.chat__chips button{
  font-family:var(--font);font-size:.74rem;color:var(--purple);
  background:#fff;border:1px solid rgba(60,29,115,.28);border-radius:999px;
  padding:6px 11px;cursor:pointer;transition:background .2s,color .2s;
}
.chat__chips button:hover{background:var(--purple);color:#fff}

.chat__form{display:flex;gap:8px;padding:11px;border-top:1px solid var(--rule)}
.chat__form input{
  flex:1;font-family:var(--font);font-size:.88rem;color:var(--ink);
  border:1px solid var(--rule);border-radius:999px;padding:9px 14px;background:#fff;
}
.chat__form input:focus{outline:none;border-color:var(--purple)}
.chat__form button{
  flex:none;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;
}
.chat__form button svg{width:18px;height:18px}
.chat__form button:hover{background:var(--violet)}

.chat__foot{display:flex;gap:14px;padding:9px 16px 12px;border-top:1px solid var(--rule)}
.chat__foot a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);
}
.chat__foot a:hover{color:var(--purple)}
.chat__foot svg{width:14px;height:14px;color:#25D366}

@media (max-width:560px){
  .chat__panel{width:min(94vw,340px)}
  .chat__log{max-height:44vh}
}

/* ── compact demo strip: both deck videos, minimal height ── */
.demo{padding-block:clamp(28px,3.2vw,48px)}
.demo .head{margin-bottom:clamp(18px,2.2vw,28px)}
.demo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
.demo__grid figure{margin:0}
.demo__grid video,.demo__grid img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:14px;background:#000;display:block;
}
.demo__grid figcaption{margin-top:8px;font-size:.78rem;line-height:1.5;color:var(--ink-faint)}
@media (max-width:760px){ .demo__grid{grid-template-columns:1fr} }

/* ═══ TEST MENU — tabbed profiles ═══ */
.menu{background:var(--cream-deep)}
.tabs{max-width:940px;margin-inline:auto}
.tabs__bar{
  display:flex;gap:4px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule-strong);
}
.tabs__bar button{
  position:relative;flex:1 1 auto;
  font-family:var(--font);font-size:.78rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);background:none;border:0;cursor:pointer;
  padding:13px 12px;white-space:nowrap;
  transition:color .25s var(--ease);
}
.tabs__bar button::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  background:var(--pc);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.tabs__bar button:hover{color:var(--ink)}
.tabs__bar button[aria-selected="true"]{color:var(--pc)}
.tabs__bar button[aria-selected="true"]::after{transform:scaleX(1)}

.tabs__pane{
  background:var(--pt);border-radius:0 0 16px 16px;
  border-left:4px solid var(--pc);
  padding:clamp(22px,2.6vw,32px);
  animation:paneIn .3s var(--ease);
}
.tabs__pane[hidden]{display:none}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tabs__count{margin:0 0 16px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.tabs__count strong{font-weight:600;color:var(--pc)}
.tabs__pane ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2px 24px;
}
.tabs__pane li{
  position:relative;padding:8px 0 8px 18px;
  font-size:1rem;color:#443D57;
}
.tabs__pane li::before{
  content:"";position:absolute;left:0;top:16px;
  width:6px;height:6px;border-radius:50%;background:var(--pc);opacity:.55;
}
.tabs__foot{
  margin:18px 0 0;font-size:.88rem;line-height:1.65;color:var(--ink-soft);
}
@media (max-width:640px){
  .tabs__bar button{flex:1 1 40%;font-size:.7rem;padding:11px 6px;letter-spacing:.06em}
}

/* the one surviving note is a compliance disclaimer, not a citation —
   keep it, but make it a quiet single line */
.note{
  margin-top:14px;font-size:.76rem;line-height:1.5;color:var(--ink-faint);
  border-left:0;padding-left:0;
}

/* ── tighter still: this build is an introduction, not a brochure ── */
.head .lead{margin-top:14px}
.label{margin-bottom:14px}
.hero__split{padding-top:clamp(104px,12vh,128px);padding-bottom:clamp(24px,2.6vw,38px)}
.ribbon{padding-block:11px}
.gallery{padding-block:clamp(22px,2.4vw,34px) 0}
.gallery .label{margin-bottom:14px}
.chains{margin-bottom:clamp(20px,2.2vw,30px)}
.duo--flip,.eco__split{margin-top:clamp(20px,2.2vw,32px)}
.compare,.feats{margin-top:clamp(18px,2vw,28px)}
.kit__cta{margin-top:clamp(16px,1.8vw,24px)}
.demo{padding-block:clamp(20px,2.2vw,32px)}
.demo .head{margin-bottom:clamp(14px,1.6vw,20px)}
.tabs__foot{margin-top:14px}
.trust__figures{margin-top:clamp(22px,2.4vw,34px);padding-top:clamp(18px,2vw,26px)}
.trust__cols[style]{margin-top:clamp(22px,2.4vw,34px)!important}
.mobilab__body .btn{margin-top:8px}
.faq__list summary{padding-block:15px}
.faq__list p{padding-bottom:17px}
.why__grid{gap:clamp(20px,2.2vw,32px) clamp(22px,2.6vw,42px)}
.footer__inner{padding-block:clamp(30px,3.4vw,48px)}

/* ═══════════ 5.0 — AUDIT FIXES ═══════════ */

/* the hero film shows its poster until played, so it costs nothing on load */
.hero__theatre video,.hero__theatre img{background:#0B0714}
.hero__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;transition:background .25s,transform .25s;
}
.hero__scene:hover .hero__play{background:rgba(255,255,255,.26);transform:translate(-50%,-50%) scale(1.06)}
.hero__play svg{width:22px;height:22px;margin-left:3px}
.hero.playing .hero__play{opacity:0;pointer-events:none}

/* touch targets: tabs were 40px, below the 44px minimum */
.tabs__bar button{min-height:46px}
.chat__chips button{min-height:34px}
.nav__links a{min-height:44px;display:flex;align-items:center}
@media (min-width:861px){ .nav__links a{min-height:0;display:inline-flex} }

/* the credential ribbon was dropping half its content on small screens */
@media (max-width:600px){
  .ribbon span:nth-child(n+4){display:inline}
  .ribbon__inner{gap:8px 16px;font-size:.72rem}
  .ribbon span{font-size:.68rem}
}

/* restore breathing room between the hero and the ribbon */
.ribbon{padding-block:15px}


/* ════════════════════════════════════════════════════════════════
   6.0 — LAUNCH AUDIT
   ════════════════════════════════════════════════════════════════ */

/* ── skip link: first tab stop, invisible until focused ── */
.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--purple);color:#fff;border-radius:0 0 10px 10px;
  padding:12px 20px;font-size:.85rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{top:0}

/* ── FIX: .trust__figures was a hard 4-column grid with no small-screen rule,
      so duo.html scrolled sideways on every phone (scrollWidth 484 at 390px) ── */
@media (max-width:860px){ .trust__figures{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .trust__figures{grid-template-columns:repeat(2,1fr);gap:22px 16px} }
.trust__figures span{overflow-wrap:anywhere}

/* ── CONTACT FORM ────────────────────────────────────────────────
   The form is the whole point of the page, and it was the least legible
   thing on it: placeholders read 3.29:1 and the field borders 1.93:1
   against the purple ground (WCAG needs 4.5:1 and 3:1). Lifted both. */
.form input,.form textarea{border-color:rgba(255,255,255,.42)}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.62)}
.form input:hover,.form textarea:hover{border-color:rgba(255,255,255,.6)}
.form input:focus,.form textarea:focus{
  border-color:#fff;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.form input:focus-visible,.form textarea:focus-visible{outline:none}

.req{color:var(--orange);font-weight:600;margin-left:2px}
.contact .req{color:#FFB37A}
.opt{
  color:rgba(255,255,255,.45);font-weight:400;letter-spacing:.06em;
  text-transform:none;font-size:.72rem;margin-left:4px;
}

.form__err{
  display:block;min-height:0;margin-top:7px;
  font-size:.78rem;letter-spacing:.02em;text-transform:none;font-weight:400;
  color:#FFC2A3;line-height:1.4;
}
.form__err:empty{margin-top:0}
.form input.is-invalid,.form textarea.is-invalid{
  border-color:#FF9A6B;background:rgba(255,120,60,.10);
}

.form__promise{
  margin:16px 0 0;font-size:.84rem;line-height:1.6;
  color:rgba(255,255,255,.72);
}
.form__legal{
  margin:14px 0 0;font-size:.75rem;line-height:1.55;
  color:rgba(255,255,255,.5);
}
.form__status{margin-top:14px;font-size:.9rem;line-height:1.6}
.form__status:empty{margin-top:0}
.form__status.is-ok{color:#B6F0C8}
.form__status.is-error{color:#FFC2A3}
.form__status a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* spam trap — removed from layout, from the a11y tree and from the tab order */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── TOUCH TARGETS: measured below the 44px minimum on a 390px viewport ── */
.nav__toggle{width:44px;height:44px}
.footer__nav a{padding-block:11px}          /* was 39px tall */
.nav__brand{display:flex;align-items:center;min-height:44px}
.contact__list a{padding:15px 0}
.chat__foot a{min-height:44px;display:inline-flex;align-items:center}

/* ── HERO EYEBROW: the pill and the strapline shared one line box, so the
      line broke mid-phrase and orphaned "CDSCO licensed" onto its own row ── */
.hero .label{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  line-height:1.5;
}
.hero .label .pill-ai{flex:none}
@media (max-width:600px){
  .hero .label{font-size:.7rem;letter-spacing:.16em}
}

/* ── FOCUS VISIBILITY on the dark contact panel: the global violet outline
      all but vanished against the purple ground ── */
.contact :focus-visible{outline-color:#fff;outline-offset:3px}
.footer :focus-visible,.ribbon :focus-visible{outline-color:var(--purple)}

/* ── reduced motion: the hero tilt and the marquee are the two things that
      actually move; the earlier rule missed both ── */
@media (prefers-reduced-motion:reduce){
  .hero__scene,.hero__theatre{transition:none!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* a line break that a screen reader reads as a space, not a joined word */
.brk{display:block;height:0}
@media (max-width:600px){ .brk{display:inline} }

/* ── HEADER CTA on small screens ─────────────────────────────────
   "Book a demo" was wrapping onto 3–4 lines below 414px (90px tall at
   320px), because the only white-space:nowrap rule for it lived inside a
   min-width:861px media query and never reached a phone. And the call CTA
   was display:none under 861px — hiding tap-to-call on the one device
   that can actually place the call. */
.nav__callIco{width:19px;height:19px;flex:none}
.nav__callTxt{display:inline}

@media (min-width:861px){
  .nav__callIco{display:none}
}
@media (max-width:860px){
  .nav__cta .btn--ghost{display:inline-flex}   /* was display:none */
  .nav__cta{gap:8px;margin-left:auto}
  .nav .btn--sm{white-space:nowrap;padding:.75em 1.25em;font-size:.72rem;letter-spacing:.1em;min-height:44px}
  .nav__call{
    width:44px;height:44px;padding:0;border-radius:50%;
    justify-content:center;flex:none;
  }
  .nav__callTxt{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .nav__toggle{margin-left:2px}
}
@media (max-width:400px){
  .nav__brand img{height:35px}
  .nav .btn--sm{padding:.72em .95em;font-size:.68rem;letter-spacing:.06em;min-height:44px}
  .nav__inner{gap:8px}
}

/* the fixed chat launcher was sitting on top of the footer's legal line —
   reserve a lane for it so nothing is ever obscured at the end of the page */
.footer__bar{padding-bottom:34px}
@media (min-width:861px){
  .footer__bar p:last-child{max-width:calc(100% - 110px)}
}
@media (max-width:860px){
  .footer__bar{padding-bottom:88px}
}

/* ── ABOUT MOBILAB: field photograph ──────────────────────────────
   The section was mobilab__grid--solo, so the right half of a 1440px
   screen sat empty. This is Mobilab's own deployment photograph,
   self-hosted rather than hotlinked from the Wix CDN. It is sized to
   fill the column so the space still reads as deliberate. */
.mobifield{
  margin:0;position:relative;overflow:hidden;
  /* align-self:start, NOT stretch: with a stretched height, aspect-ratio
     resolves width FROM that height and overflows the grid column */
  align-self:start;width:100%;
  border-radius:16px;background:var(--cream);
  aspect-ratio:4/3;
}
.mobifield img{width:100%;height:100%;object-fit:cover;display:block}
.mobifield figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:34px 16px 14px;
  font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;line-height:1.35;
  background:linear-gradient(to top,rgba(20,12,38,.85),rgba(20,12,38,0));
}
.mobifield img{transition:transform .9s var(--ease)}
.mobifield:hover img{transform:scale(1.03)}

/* ════════════════════════════════════════════════════════════════
   7.0 — REALISTIC DEPTH
   The redesign the team signed off: photographic scenes on a soft
   lavender ground, glass cards that sit a few millimetres off the page,
   raised icon wells, and a little parallax so the room has depth.
   Everything moves by a few pixels at most and holds still for anyone
   who asked for reduced motion.
   ════════════════════════════════════════════════════════════════ */

:root{
  --em:#6A3DC8;                       /* the brighter italic violet of the mockups */
  --ground:#F6F2FD;
  --ground-2:#EFE8FB;
  --ink-deep:#140C30;
  --font-script:'Caveat','Segoe Print','Bradley Hand',cursive;

  /* one shadow language, three heights */
  --lift-1:0 1px 2px rgba(60,29,115,.05),0 6px 14px -6px rgba(60,29,115,.10);
  --lift-2:0 1px 2px rgba(60,29,115,.05),0 12px 26px -10px rgba(60,29,115,.16),0 30px 60px -24px rgba(60,29,115,.20);
  --lift-3:0 2px 4px rgba(60,29,115,.06),0 22px 40px -14px rgba(60,29,115,.24),0 60px 110px -40px rgba(60,29,115,.34);
  --rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(60,29,115,.05);
}
body{background:var(--ground)}
h1 em,h2 em{color:var(--em)}
h2 em strong{color:var(--em)}
h2 .it{font-style:italic;font-weight:560}

.eyebrow{
  margin:0 0 16px;font-size:.78rem;font-weight:500;line-height:1.7;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
}
.script{
  margin:0;font-family:var(--font-script);font-weight:500;
  font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.1;color:var(--violet);
  transform:rotate(-9deg);pointer-events:none;
}
.script::after{
  content:"";display:block;width:78%;height:2px;margin:8px 0 0 18%;
  border-radius:2px;background:currentColor;opacity:.75;transform:rotate(-4deg);
}

/* soft lilac shapes behind sections: depth without noise */
.blob{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(2px)}
.blob--tl{left:-10vw;top:-6vw;width:34vw;height:28vw;background:radial-gradient(closest-side,rgba(169,140,220,.20),rgba(169,140,220,0))}
.blob--tr{right:-8vw;top:-4vw;width:30vw;height:26vw;background:radial-gradient(closest-side,rgba(169,140,220,.18),rgba(169,140,220,0))}
.blob--br{right:-10vw;bottom:-8vw;width:36vw;height:30vw;background:radial-gradient(closest-side,rgba(169,140,220,.18),rgba(169,140,220,0))}
.blob--bl{left:-10vw;bottom:-8vw;width:32vw;height:28vw;background:radial-gradient(closest-side,rgba(169,140,220,.16),rgba(169,140,220,0))}
.diff,.near,.shift--flow,.why--cards,.kit--split,.closer{position:relative;overflow:hidden;isolation:isolate}
.diff>.wrap,.near>.wrap,.shift--flow>.wrap,.why--cards>.wrap,.kit--split>.wrap{position:relative;z-index:1}

/* ── raised icon well: a lit sphere pressed into the card ── */
.orb{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;color:var(--purple);
  background:radial-gradient(circle at 32% 26%,#FFFFFF 0%,#F5F0FE 42%,#E7DDFA 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset -6px -8px 14px rgba(106,61,200,.10),
    0 1px 1px rgba(60,29,115,.06),
    0 12px 22px -8px rgba(60,29,115,.28);
}
.orb svg{width:44%;height:44%}
.orb--sm{width:48px;height:48px}

/* ── glass surface ── */
.glass{
  background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,255,255,.70));
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--rim),var(--lift-2);
}

/* ── pointer tilt (driven by app.js; inert without it) ── */
[data-tilt]{
  --rx:0deg;--ry:0deg;--gx:50%;--gy:0%;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  will-change:transform;
}
[data-tilt].is-tilting{transition:transform .12s linear,box-shadow .4s var(--ease)}

/* ── buttons with a real edge ── */
.btn--3d{
  background:linear-gradient(180deg,#5A34A6 0%,#3C1D73 58%,#331764 100%);
  border-color:#2E1560;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 #25104E,0 10px 22px -8px rgba(60,29,115,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.btn--3d:hover{
  background:linear-gradient(180deg,#6A42BA 0%,#4A2690 58%,#3C1D73 100%);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #25104E,0 18px 30px -10px rgba(60,29,115,.6);
}
.btn--3d:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 4px 10px -6px rgba(60,29,115,.5)}
.btn--lg{padding:1.25em 2.2em;font-size:.92rem;letter-spacing:.12em;gap:.8em}
.btn__arrow{font-size:1.15em;line-height:1;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn__play{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.7);
}
.btn__play svg{width:16px;height:16px}
.nav .btn--ghost{border-color:rgba(60,29,115,.4);background:rgba(255,255,255,.4)}

.tag{
  display:inline-block;margin:0 0 14px;padding:.55em 1.15em;border-radius:999px;
  font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(60,29,115,.07);
}
.tag--brand{color:#fff;background:linear-gradient(180deg,#5A34A6,#3C1D73);box-shadow:0 6px 14px -6px rgba(60,29,115,.6)}

/* ═══ HERO — the clinic scene ═══ */
.hero--scene{
  display:block;min-height:clamp(640px,56vw,920px);
  background:linear-gradient(180deg,#F7F3FE 0%,#EFE8FB 100%);
}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__layer{
  position:absolute;right:0;bottom:0;width:min(100%,1789px);
  transition:transform 1.2s var(--ease);will-change:transform;
}
.hero__layer img{
  width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%),linear-gradient(180deg,transparent 0%,#000 14%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%),linear-gradient(180deg,transparent 0%,#000 14%);
  mask-composite:intersect;
}
.hero__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(247,243,254,.97) 0%,rgba(247,243,254,.9) 26%,rgba(247,243,254,.35) 40%,rgba(247,243,254,0) 47%),
    linear-gradient(0deg,rgba(239,232,251,.9) 0%,rgba(239,232,251,0) 12%);
}
.hero--scene .hero__inner{position:relative;padding-block:clamp(118px,13vw,168px) clamp(40px,4.4vw,70px)}
.hero--scene .hero__copy{max-width:min(640px,48vw)}
.hero--scene .eyebrow{margin-bottom:22px}
.hero--scene h1{
  max-width:none;font-size:clamp(2.5rem,3.95vw,4rem);line-height:1.04;
  font-weight:560;letter-spacing:-.022em;color:var(--ink-deep);
}
.hero--scene h1 em{display:block;font-weight:500;letter-spacing:-.018em}
@media (min-width:861px){ .hero--scene h1 em{white-space:nowrap} }
.hero--scene .hero__lead{margin-top:22px;max-width:31em;font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6;color:#3F3753}
.hero--scene .hero__actions{margin-top:30px;gap:22px}
.hero__usps{
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
  margin-top:clamp(28px,3vw,40px);
}
.hero__usps li{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:0 clamp(12px,1.5vw,24px);
  font-size:.72rem;font-weight:500;letter-spacing:.1em;line-height:1.35;text-transform:uppercase;color:var(--ink);
}
.hero__usps li:first-child{padding-left:0}
.hero__usps li+li{border-left:1px solid var(--rule)}
.hero__usps li>span:last-child{display:block}
.hero__tag{
  display:flex;align-items:center;gap:12px;margin-top:clamp(24px,2.6vw,36px);max-width:520px;
  font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.hero__tag svg{width:20px;height:20px;flex:none;color:var(--violet)}
.hero__tag::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rule-strong),transparent)}
.hero__script{position:absolute;z-index:2;right:clamp(90px,17vw,300px);top:clamp(110px,11vw,160px);color:#7D6BA8}
.hero__script::after{display:none}

/* the one live element in the photograph: a result card resting over the case */
.hero__chip{
  position:absolute;left:78%;top:25%;margin:0;
  display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:16px;
  font-size:.82rem;line-height:1.25;color:var(--ink);white-space:nowrap;
  transition:transform 1.2s var(--ease);
  animation:chipIn 1s .9s var(--ease) both;
}
.hero__chip strong{display:block;font-weight:500}
.hero__chip small{display:block;font-size:.72rem;color:var(--ink-faint);margin-top:2px}
.hero__chipDot{
  width:10px;height:10px;border-radius:50%;flex:none;background:#2FAE60;
  box-shadow:0 0 0 4px rgba(47,174,96,.18);animation:breathe 2.6s ease-in-out infinite;
}
@keyframes chipIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 3px rgba(47,174,96,.2)}50%{box-shadow:0 0 0 7px rgba(47,174,96,.06)}}

.hero__proof{background:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.9);box-shadow:0 -1px 0 var(--rule)}

@media (max-width:1080px){
  .hero__chip,.hero__script{display:none}
  .hero--scene .hero__copy{max-width:min(560px,52vw)}
}
@media (max-width:860px){
  .hero--scene{min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .hero__bg{position:relative;inset:auto;order:2;z-index:0;width:100%;aspect-ratio:4/3;margin-top:-10px}
  .hero__layer{position:absolute;inset:0;width:auto}
  .hero__layer img{
    width:100%;height:100%;object-fit:cover;object-position:78% 60%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%);mask-image:linear-gradient(180deg,transparent 0%,#000 18%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .hero__wash{display:none}
  .hero--scene .hero__inner{order:1;padding-top:118px;padding-bottom:10px}
  .hero--scene .hero__copy{max-width:none}
  .hero__usps{grid-template-columns:repeat(4,1fr);width:100%}
  .hero__usps li{padding:0 6px;font-size:.64rem;letter-spacing:.05em}
}
@media (max-width:600px){
  .hero__usps{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .hero__usps li:nth-child(3){border-left:0;padding-left:0}
  .hero--scene .hero__actions .btn--lg{width:100%}
}

/* ═══ THE PETLAB DIFFERENCE ═══ */
.diff{background:linear-gradient(180deg,#F5F0FD 0%,#EDE5FA 100%)}
.diff .head{margin-bottom:clamp(10px,2vw,24px)}
.diff__stage{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.9fr) minmax(220px,1fr);
  align-items:center;gap:clamp(12px,2vw,28px);
}
.diff__col{display:grid;gap:clamp(22px,3.4vw,52px)}
.diff__item{display:flex;align-items:center;gap:18px}
.diff__item .orb{width:clamp(66px,6vw,92px);height:clamp(66px,6vw,92px)}
.diff__item h3{font-size:clamp(1.02rem,1.35vw,1.2rem);font-weight:500;color:var(--ink-deep)}
.diff__item p{margin-top:5px;font-size:.86rem;line-height:1.5;color:var(--ink-faint)}
.diff__device{position:relative;margin:0}
.diff__float{position:relative;z-index:1;animation:float 7s ease-in-out infinite}
.diff__device img{
  width:100%;height:auto;
  -webkit-mask-image:radial-gradient(farthest-side at 50% 46%,#000 68%,transparent 100%);
  mask-image:radial-gradient(farthest-side at 50% 46%,#000 68%,transparent 100%);
}
.diff__glow{position:absolute;inset:8% 10% 18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));z-index:0}
.diff__floor{
  position:absolute;left:18%;right:14%;bottom:3%;height:7%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(40,20,80,.26),rgba(40,20,80,0));
  filter:blur(8px);animation:floor 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floor{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.92);opacity:.75}}
.diff{padding-bottom:calc(var(--sec) + 36px)}
.diff__script{position:absolute;right:clamp(0px,1vw,20px);bottom:-52px}

@media (max-width:1080px){
  .diff__stage{grid-template-columns:1fr 1fr}
  .diff__device{grid-column:1/-1;order:-1;max-width:760px;margin-inline:auto}
  .diff__script{display:none}
}
@media (max-width:600px){
  .diff__stage{grid-template-columns:1fr}
  .diff__item .orb{width:58px;height:58px}
}

/* ═══ DIAGNOSTICS NEAR YOU ═══ */
.near{background:linear-gradient(180deg,#F7F3FE 0%,#F1EBFC 100%)}
.near .lead{max-width:48em}
.near__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:clamp(8px,1.4vw,18px)}
.place{height:100%}
.place__card{height:100%;display:flex;flex-direction:column;border-radius:34px 34px 30px 30px}
.place__media{
  position:relative;overflow:hidden;
  border-radius:120px 36px 28px 28px / 70px 36px 28px 28px;
  aspect-ratio:5/4;box-shadow:var(--lift-2);
  transform:translateZ(0);
}
.place:nth-child(2) .place__media{border-radius:36px 120px 28px 28px / 36px 70px 28px 28px}
.place__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.place:nth-child(3) .place__media img{object-position:60% 40%}
.place__card:hover .place__media img{transform:scale(1.045)}
.place__body{
  position:relative;z-index:2;flex:1;
  margin:-46px 14px 0;padding:44px clamp(20px,2vw,28px) clamp(22px,2.2vw,30px);
  border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.86));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--rim),var(--lift-2);
  transform:translateZ(30px);
}
.place__badge{
  position:absolute;left:clamp(18px,2vw,26px);top:-34px;
  width:68px;height:68px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:radial-gradient(circle at 32% 26%,#8B5FDD 0%,#5B34A0 50%,#3C1D73 100%);
  border:4px solid #fff;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.35),0 14px 24px -8px rgba(60,29,115,.6);
  transform:translateZ(24px);
}
.place__badge svg{width:30px;height:30px}
.place__body h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:500;color:var(--ink-deep);margin-bottom:8px}
.place__body p{font-size:.93rem;line-height:1.6;color:var(--ink-soft)}

.near__route{position:relative;height:70px;margin:clamp(22px,3vw,40px) auto 0;max-width:900px;color:var(--violet)}
.near__path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.near__path path{fill:none;stroke:#A98CDC;stroke-width:1.6;stroke-dasharray:5 7;vector-effect:non-scaling-stroke}
.near__pin{position:absolute;width:28px;height:28px;color:var(--violet);filter:drop-shadow(0 6px 6px rgba(60,29,115,.25))}
.near__pin svg{width:100%;height:100%}
.near__pin--a{left:4%;top:4px}
.near__pin--b{right:4%;top:-6px}
.near__van{
  position:absolute;left:50%;top:6px;width:66px;height:40px;margin-left:-33px;
  color:var(--purple);filter:drop-shadow(0 8px 8px rgba(60,29,115,.22));
  animation:drive 9s ease-in-out infinite;
}
.near__van svg{width:100%;height:100%}
@keyframes drive{0%,100%{transform:translateX(-120px)}50%{transform:translateX(120px)}}
.near__foot{
  margin:6px 0 0;text-align:center;
  font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.near__foot strong{font-weight:600;color:var(--violet)}
.near__script{position:absolute;right:clamp(0px,1vw,24px);bottom:clamp(-6px,0vw,10px)}

@media (max-width:1080px){ .near__script{display:none} }
@media (max-width:860px){
  .near__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .near__route{display:none}
}

/* ═══ THE SHIFT — one flow ═══ */
.shift--flow{background:linear-gradient(180deg,#F4EFFD 0%,#F7F3FE 100%)}
.flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(14px,2vw,28px)}
.flow__panel{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,34px);border-radius:26px;
}
.flow__panel--before{
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--rim),var(--lift-1);
}
.flow__panel--after{
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(247,242,255,.9));
  border:1.5px solid rgba(122,79,214,.38);
  box-shadow:var(--rim),0 0 0 6px rgba(169,140,220,.10),var(--lift-3);
}
.flow__panel .tag{align-self:flex-start}
.near .head,.shift--flow .head{max-width:1000px}
.flow__panel h3{font-size:clamp(1.12rem,1.6vw,1.4rem);font-weight:500;color:var(--ink-deep);margin-bottom:clamp(18px,2vw,26px)}
.flow__script{position:absolute;right:clamp(16px,2vw,30px);top:clamp(58px,5vw,74px);font-size:clamp(1.1rem,1.5vw,1.45rem)}
.flow__script::after{width:70%}
.steps{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;flex:1}
.steps li{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  font-size:.82rem;line-height:1.3;color:var(--ink);
}
.steps li b{display:block;margin:10px 0 3px;font-size:1rem;font-weight:600;color:var(--orange)}
.steps li+li::before{
  content:"";position:absolute;left:-12px;top:clamp(36px,3.6vw,48px);width:10px;height:10px;
  border-top:1.5px solid #B9A5E3;border-right:1.5px solid #B9A5E3;transform:rotate(45deg);
}
.steps__pic{
  width:clamp(72px,7vw,98px);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none;
  background:#F1ECFA;
  box-shadow:inset 0 0 0 3px #fff,0 10px 20px -8px rgba(60,29,115,.3);
}
.steps__pic img{width:100%;height:100%;object-fit:cover}
.steps__cut{height:clamp(84px,8.2vw,112px);display:flex;align-items:flex-end;justify-content:center}
.steps__cut img{height:100%;width:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(farthest-side,#000 64%,transparent 100%);mask-image:radial-gradient(farthest-side,#000 64%,transparent 100%)}
.steps--after .steps__pic{width:clamp(76px,7.4vw,104px)}
.steps__wide{flex-grow:1.35!important}
.flow__note{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:clamp(18px,2vw,26px) auto 0;padding:.8em 1.5em;border-radius:999px;
  font-size:.9rem;color:var(--ink-soft);background:rgba(60,29,115,.05);
}
.flow__note svg{width:22px;height:22px;flex:none;color:var(--ink-soft)}
.flow__note--brand{
  color:var(--purple);font-weight:500;background:#fff;
  box-shadow:var(--rim),var(--lift-1);border:1px solid rgba(122,79,214,.18);
}
.flow__note--brand svg{color:var(--violet)}
.flow__turn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--violet)}
.flow__turn svg{width:clamp(38px,3.6vw,54px);height:auto;filter:drop-shadow(0 8px 10px rgba(106,61,200,.28));animation:nudge 2.8s ease-in-out infinite}
.flow__turn span{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.5}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.gains{
  display:grid;grid-template-columns:repeat(3,auto);justify-content:center;
  margin-top:clamp(28px,3.4vw,48px);
}
.gains li{display:flex;align-items:center;gap:14px;padding:4px clamp(22px,3.4vw,54px)}
.gains li+li{border-left:1px solid var(--rule)}
.gains svg{width:40px;height:40px;flex:none;color:var(--purple)}
.gains strong{display:block;font-weight:500;color:var(--ink-deep)}
.gains span{display:block;font-size:.85rem;color:var(--ink-faint)}

@media (max-width:1180px){
  .flow{grid-template-columns:1fr}
  .flow__turn{flex-direction:row}
  .flow__turn svg{transform:rotate(90deg);animation:none}
}
@media (max-width:760px){
  .steps{flex-wrap:wrap;justify-content:center;row-gap:20px}
  .steps li{flex:0 0 30%}
  .steps li+li::before{display:none}
  .steps__wide{flex:0 0 42%!important}
  .flow__script{position:static;margin:-8px 0 14px auto;transform:rotate(-5deg)}
  .gains{grid-template-columns:1fr;justify-content:stretch;gap:14px}
  .gains li{padding:0}
  .gains li+li{border-left:0}
}

/* ═══ CLOSER TO CARE ═══ */
.closer{background:linear-gradient(180deg,#F7F3FE,#F3EDFD)}
.closer__grid{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.closer__media{margin:0}
.closer__frame{border-radius:26px;overflow:hidden;box-shadow:var(--lift-3);aspect-ratio:4/3.3}
.closer__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transition:transform 1.4s var(--ease)}
.closer__frame:hover img{transform:scale(1.035)}
.closer__copy h2{margin:4px 0 0}
.closer__lead{margin-top:18px;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.7;color:var(--ink-soft)}
.closer__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(22px,2.6vw,34px)}
.closer__steps li{position:relative}
.closer__steps li+li::before{
  content:"→";position:absolute;left:calc(-1 * clamp(14px,2vw,28px) / 2 - 10px);top:18px;
  font-size:1.2rem;color:#B9A5E3;
}
.closer__steps .orb{width:62px;height:62px}
.closer__steps b{display:block;margin:12px 0 4px;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--lilac)}
.closer__steps h3{font-size:1rem;font-weight:600;color:var(--ink-deep);margin-bottom:6px}
.closer__steps p{font-size:.86rem;line-height:1.55;color:var(--ink-faint)}
@media (max-width:860px){
  .closer__grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .closer__steps{grid-template-columns:1fr}
  .closer__steps li{display:grid;grid-template-columns:62px 1fr;column-gap:16px;align-items:start}
  .closer__steps li .orb{grid-row:span 3}
  .closer__steps b{margin-top:2px}
  .closer__steps li+li::before{display:none}
}

/* ═══ WHY — raised cards ═══ */
.why--cards{background:linear-gradient(180deg,#F3EEFD 0%,#F7F3FE 100%)}
.why__script{position:absolute;right:clamp(10px,4vw,70px);top:clamp(10px,2vw,30px);font-size:clamp(1.15rem,1.7vw,1.6rem)}
.why__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.rev{
  height:100%;display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px);
  padding:clamp(20px,2.2vw,30px);border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--rim),var(--lift-1);
}
.rev:hover{box-shadow:var(--rim),var(--lift-2)}
.rev .orb{width:clamp(62px,5.6vw,84px);height:clamp(62px,5.6vw,84px);transform:translateZ(24px)}
.rev>div{transform:translateZ(14px)}
.rev__n{
  display:inline-block;padding:.2em .6em;border-radius:6px;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;color:var(--orange);background:rgba(232,99,26,.1);
}
.rev h3{
  margin:8px 0 8px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink-deep);
}
.rev p{font-size:.92rem;line-height:1.55;color:var(--ink-faint)}
@media (max-width:1080px){ .why__cards{grid-template-columns:repeat(2,1fr)} .why__script{display:none} }
@media (max-width:640px){ .why__cards{grid-template-columns:1fr} }

/* ═══ PRODUCT — split ═══ */
.kit--split{background:linear-gradient(180deg,#F7F3FE 0%,#F1EAFC 100%)}
.kit__grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(28px,4vw,64px);align-items:center}
.kit__copy h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1}
.kit__copy h2 strong{font-weight:700}
.kit__lead{margin-top:20px;font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.kit__feats{margin-top:clamp(18px,2vw,28px)}
.kit__feats li{display:flex;align-items:center;gap:18px;padding:14px 0}
.kit__feats li+li{border-top:1px solid var(--rule)}
.kit__feats .orb{width:58px;height:58px}
.kit__feats strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink-deep)}
.kit__feats div span{display:block;font-size:.9rem;line-height:1.5;color:var(--ink-faint)}
.kit--split .prod--film{
  border-radius:26px;
  box-shadow:0 0 0 1px rgba(255,255,255,.6),var(--lift-3);
  transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg);
  transition:transform .9s var(--ease);
}
.kit--split .prod--film:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.kit--split .kit__cta{margin-top:clamp(22px,2.6vw,34px);text-align:center}
@media (max-width:960px){
  .kit__grid{grid-template-columns:1fr}
  .kit--split .prod--film{transform:none}
}

/* ═══ the rest of the page, lifted into the same material ═══ */
.pillars__card{
  background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.95);border-radius:24px;
  box-shadow:var(--rim),var(--lift-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pillars__card:hover{transform:translateY(-4px);box-shadow:var(--rim),var(--lift-2)}
.pillars__ico.orb{display:flex;width:84px;height:84px;margin:0 auto 20px}
.pillars__ico.orb svg{width:44%;height:44%}
.tabs__pane{box-shadow:var(--lift-1)}
.faq__list details{transition:background .3s var(--ease)}
.faq__list details[open]{background:rgba(255,255,255,.6);border-radius:14px;box-shadow:var(--lift-1);padding-inline:18px;margin-block:6px}
.logos li,.feats li{box-shadow:var(--rim),var(--lift-1);border-color:rgba(255,255,255,.95)}
.mobifield,.demo__grid video,.demo__grid img{box-shadow:var(--lift-2)}
.gallery__track img{box-shadow:0 18px 36px -18px rgba(60,29,115,.45)}
.contact{background:linear-gradient(160deg,#4A2690 0%,#3C1D73 45%,#2A1258 100%)}
.contact .form{
  padding:clamp(22px,2.6vw,34px);border-radius:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.5);
}

/* nav: five links plus two CTAs */
@media (min-width:861px) and (max-width:1120px){ .nav__links a[href="#why"]{display:none} }

@media (prefers-reduced-motion:reduce){
  [data-tilt]{transform:none!important}
  .hero__layer,.hero__chip{transform:none!important}
  .kit--split .prod--film{transform:none}
}

/* the longer header CTA pushed the menu toggle off a 360px screen */
@media (max-width:420px){ .nav__long{display:none} }

/* ════════════════════════════════════════════════════════════════
   Trust & compliance (.tc) and About mobilab (.ab), rebuilt to the
   Sep 2026 mockups. Self-contained: carries its own tokens, and its
   selectors outrank the .v8 section overrides where both apply.
   ════════════════════════════════════════════════════════════════ */
.tc,.ab{
  --x-ink:#150F2B; --x-soft:#5C566B; --x-faint:#716A80;
  --x-brand:#3B1C78; --x-em:#5A26D6; --x-line:rgba(40,24,90,.12);
  --x-orb:radial-gradient(circle at 35% 30%,#FAF7FF 0%,#EEE6FD 55%,#E2D6FA 100%);
  --x-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --x-sans:var(--f-sans,var(--font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif));
  --x-script:'Caveat','Segoe Print','Bradley Hand',cursive;
  --x-ease:cubic-bezier(.22,.61,.36,1);
}
section.section.tc,section.section.ab{
  position:relative;overflow:hidden;isolation:isolate;color:var(--x-ink);font-family:var(--x-sans);
  background:
    radial-gradient(34% 44% at 0% 0%,rgba(212,196,248,.55),transparent 70%),
    radial-gradient(30% 40% at 100% 100%,rgba(212,196,248,.5),transparent 70%),
    linear-gradient(180deg,#F8F5FE 0%,#F1ECFB 100%);
}
.tc__eyebrow,.ab__eyebrow{
  margin:0 0 18px;font:500 .8rem/1.4 var(--x-sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--x-faint);
}
section.tc h2.tc__title,section.ab h2.ab__title{
  margin:0;font-family:var(--x-serif);font-weight:560;font-variation-settings:"opsz" 144;
  line-height:1.02;letter-spacing:-.03em;color:var(--x-ink);text-wrap:balance;
}
section.tc h2.tc__title em,section.ab h2.ab__title em{font-style:italic;color:var(--x-em)}
.tc__paw,.ab__paw{position:absolute;z-index:-1;width:clamp(56px,6vw,96px);fill:#DCD0F7;pointer-events:none}

/* ── trust & compliance ── */
.tc__paw{top:clamp(28px,4vw,60px);right:clamp(20px,5vw,90px);transform:rotate(14deg)}
.tc__head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
section.tc h2.tc__title{font-size:clamp(2.3rem,4.6vw,4rem)}
section.tc h2.tc__title em{display:block;font-weight:500}
.tc__lead{margin:20px auto 0;max-width:30em;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.55;color:var(--x-soft)}

.tc__pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin:0 auto;padding:0;list-style:none}
.tc__pillars>li{padding:4px clamp(20px,3.4vw,52px)}
.tc__pillars>li+li{border-left:1px solid var(--x-line)}
.tc__marks{display:flex;align-items:flex-start;gap:clamp(14px,2.6vw,40px);margin:0 0 22px -8px}
.tc__num{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#ECE4FC;font:600 .98rem/1 var(--x-sans);color:var(--x-brand);
}
.tc__icon{
  display:grid;place-items:center;width:clamp(72px,6.6vw,92px);aspect-ratio:1;margin-top:-4px;
  border-radius:50%;background:var(--x-orb);color:var(--x-brand);
  box-shadow:inset 0 1px 0 #fff,0 10px 22px -14px rgba(60,29,115,.35);
}
.tc__icon svg{width:46%;height:46%}
.tc__kicker{margin:0 0 8px;font:600 .74rem/1.4 var(--x-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--x-faint)}
section.tc h3.tc__h{
  margin:0 0 12px;font-family:var(--x-serif);font-weight:560;font-variation-settings:"opsz" 96;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;letter-spacing:-.025em;color:var(--x-ink);
}
.tc__text{margin:0;font-size:1rem;line-height:1.6;color:var(--x-soft)}
.tc__list{margin:0;padding:0;list-style:none;font-size:1rem;font-weight:400;line-height:1.65;color:var(--x-ink)}

.tc__rule{
  display:flex;align-items:center;gap:22px;margin:clamp(44px,5vw,68px) 0 22px;
  font:500 .74rem/1.4 var(--x-sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--x-faint);white-space:nowrap;
}
.tc__rule::before,.tc__rule::after{content:"";flex:1;height:1px;background:var(--x-line)}
.tc__logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin:0;padding:0;list-style:none}
.tc__logos li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:120px;padding:16px 10px 14px;border-radius:14px;background:#fff;text-align:center;
  box-shadow:0 1px 2px rgba(60,29,115,.05),0 10px 24px -14px rgba(60,29,115,.24);
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease);
}
.tc__logos li:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(60,29,115,.06),0 18px 32px -16px rgba(60,29,115,.32)}
.tc__logos img{height:50px;width:auto;max-width:100%;object-fit:contain}
.tc__logos span{font:600 .7rem/1.3 var(--x-sans);letter-spacing:.06em;text-transform:uppercase;color:#3A3350}
.tc__logos small{display:block;font-size:1em;font-weight:400;color:var(--x-faint)}

/* ── about mobilab ── */
.ab__paw{bottom:clamp(40px,5vw,80px);right:clamp(20px,5vw,90px);transform:rotate(-12deg)}
.ab__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:stretch}
section.ab h2.ab__title{font-size:clamp(2.4rem,4.8vw,4.4rem)}
section.ab h2.ab__title em{
  font-family:var(--x-sans);font-style:normal;font-weight:800;font-variation-settings:normal;
  font-size:.9em;text-transform:uppercase;letter-spacing:-.005em;
}
.ab__lead{margin:22px 0 0;max-width:30em;font-size:clamp(1.04rem,1.3vw,1.2rem);line-height:1.6;color:var(--x-soft)}

.ab__steps{margin:clamp(26px,3vw,40px) 0 0;padding:0;list-style:none}
.ab__steps li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,2vw,28px);padding-bottom:clamp(20px,2.4vw,30px)}
.ab__steps li:last-child{padding-bottom:0}
.ab__steps li:not(:last-child)::before{content:"";position:absolute;left:32px;top:76px;bottom:12px;width:1px;background:rgba(60,29,115,.2)}
.ab__icon{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--x-orb);color:var(--x-em);box-shadow:inset 0 1px 0 #fff;
}
.ab__icon svg{width:28px;height:28px}
section.ab .ab__steps h3{margin:6px 0;font:600 1.12rem/1.3 var(--x-sans);letter-spacing:-.01em;color:var(--x-brand)}
.ab__steps p{margin:0;font-size:.98rem;line-height:1.6;color:var(--x-soft)}

.ab__photo{
  position:relative;min-height:440px;margin:0;border-radius:22px;overflow:hidden;background:#2A2140;
  box-shadow:0 2px 4px rgba(20,12,48,.08),0 30px 60px -28px rgba(20,12,48,.45);
}
.ab__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--x-ease)}
.ab__photo:hover img{transform:scale(1.03)}
.ab__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,24,0) 50%,rgba(10,6,24,.8) 100%);pointer-events:none}
.ab__pin{
  position:absolute;z-index:2;top:18px;right:18px;display:flex;align-items:center;gap:10px;
  margin:0;padding:10px 20px 10px 14px;border-radius:999px;color:var(--x-em);
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 20px -10px rgba(20,12,48,.45);
}
.ab__pin svg{width:22px;height:22px;flex:none}
.ab__pin span{display:flex;flex-direction:column;font:400 .8rem/1.3 var(--x-sans);color:var(--x-soft)}
.ab__pin b{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--x-brand)}
.ab__photo figcaption{position:absolute;z-index:2;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(18px,2.2vw,28px);color:#fff}
.ab__photo figcaption strong{display:block;font-family:var(--x-serif);font-weight:560;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.15;letter-spacing:-.02em}
.ab__photo figcaption span{display:block;max-width:26em;margin-top:6px;font-size:.98rem;line-height:1.45;color:rgba(255,255,255,.88)}

.ab__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:clamp(24px,3vw,36px) 0 0;padding:0;list-style:none}
.ab__stats li{
  --c:var(--x-em);--t:rgba(90,38,214,.1);
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);padding:clamp(16px,1.8vw,22px) clamp(16px,2vw,28px);
  border-radius:16px;background:rgba(255,255,255,.62);
  border:1px solid rgba(60,29,115,.1);border:1px solid color-mix(in srgb,var(--c) 16%,transparent);
  box-shadow:0 1px 2px rgba(60,29,115,.04);
}
.ab__stats .is-green{--c:#17864A;--t:rgba(23,134,74,.1)}
.ab__stats .is-amber{--c:#B5780F;--t:rgba(181,120,15,.12)}
.ab__sicon{display:grid;place-items:center;flex:none;width:clamp(52px,4.6vw,64px);aspect-ratio:1;border-radius:50%;background:var(--t);color:var(--c)}
.ab__sicon svg{width:48%;height:48%}
.ab__stats p{margin:0;font-size:.98rem;line-height:1.3;color:var(--x-soft)}
.ab__stats strong{display:block;margin-bottom:3px;font:700 clamp(1.35rem,2vw,1.8rem)/1.1 var(--x-sans);letter-spacing:-.02em;text-transform:uppercase;color:var(--c)}

.ab__certs{
  display:flex;justify-content:center;flex-wrap:wrap;max-width:1080px;
  margin:clamp(22px,2.6vw,32px) auto 0;padding:clamp(18px,2.2vw,26px) 0 0;
  border-top:1px solid var(--x-line);list-style:none;
}
.ab__certs li{display:flex;align-items:center;gap:16px;padding:4px clamp(22px,3.4vw,52px);color:var(--x-brand)}
.ab__certs li+li{border-left:1px solid var(--x-line)}
.ab__certs svg{width:36px;height:36px;flex:none}
.ab__certs p{margin:0;font-size:.82rem;line-height:1.35;color:var(--x-faint)}
.ab__certs strong{display:block;font-size:.95rem;font-weight:600;color:var(--x-ink)}

.ab__cta{margin-top:clamp(24px,3vw,36px);text-align:center}
.ab__btn{
  display:inline-flex;align-items:center;gap:18px;padding:1.15em 2.8em;border-radius:999px;
  background:linear-gradient(180deg,#4A2A8F 0%,#3B1C78 60%,#321667 100%);color:#fff;
  font:600 .86rem/1 var(--x-sans);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 28px -12px rgba(59,28,120,.6);
  transition:transform .3s var(--x-ease),box-shadow .3s var(--x-ease);
}
.ab__btn:hover{color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 20px 34px -14px rgba(59,28,120,.7)}
.ab__btn svg{width:20px;height:20px;transition:transform .3s var(--x-ease)}
.ab__btn:hover svg{transform:translateX(4px)}
.ab__script{
  position:absolute;left:clamp(16px,3vw,56px);bottom:clamp(30px,4vw,60px);margin:0;
  font:500 clamp(1.3rem,1.8vw,1.75rem)/1.15 var(--x-script);color:var(--x-em);
  transform:rotate(-12deg);pointer-events:none;
}
.ab__script::after{
  content:"";display:block;width:72%;height:10px;margin:2px 0 0 14%;
  border-bottom:1.5px solid currentColor;border-radius:0 0 100% 60%/0 0 100% 60%;transform:rotate(-4deg);
}

@media (max-width:1180px){
  .tc__logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ab__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab__script{display:none}
}
@media (max-width:860px){
  .tc__pillars{grid-template-columns:minmax(0,1fr);gap:28px;max-width:520px}
  .tc__pillars>li{padding:0}
  .tc__pillars>li+li{border-left:0;border-top:1px solid var(--x-line);padding-top:28px}
  .tc__marks{margin-left:0}
  .ab__grid{grid-template-columns:minmax(0,1fr)}
  .ab__photo{min-height:0;aspect-ratio:4/3}
  .ab__certs{flex-direction:column;align-items:flex-start;gap:14px;max-width:none}
  .ab__certs li{padding:0}
  .ab__certs li+li{border-left:0}
}
@media (max-width:560px){
  .tc__logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc__rule{gap:12px;letter-spacing:.16em;white-space:normal;text-align:center}
  .ab__stats{grid-template-columns:minmax(0,1fr)}
  .ab__pin{top:12px;right:12px;padding:8px 14px 8px 10px}
}
@media (prefers-reduced-motion:reduce){
  .tc__logos li,.ab__photo img,.ab__btn,.ab__btn svg{transition:none}
}

/* ── THE PETLAB DIFFERENCE, the ecosystem render ──
   The render carries its own lavender ground and floor reflection, so it
   sits unframed: edges feathered into the section, no float, no drop shadow. */
.diff__device img{
  border-radius:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect;
}
@media (min-width:1081px){
  .diff__stage{grid-template-columns:minmax(220px,.85fr) minmax(0,2.4fr) minmax(220px,.85fr)}
}
.diff__float{animation:none}
.diff__glow,.diff__floor{display:none}
.diff{padding-bottom:var(--sec)}
.diff__script{position:relative;right:auto;bottom:auto;width:max-content;margin:clamp(4px,1vw,14px) clamp(0px,2vw,36px) 0 auto}

/* ════════════════════════════════════════════════════════════════
   Device page hero (.dh), rebuilt to the Sep 2026 mockup. The render
   carries the case and phone on the right; the copy sits in the empty
   left of the same picture. Self-contained tokens, and selectors that
   outrank the base .hero rules it still carries.
   ════════════════════════════════════════════════════════════════ */
.dh{
  --x-ink:#150F2B; --x-soft:#5C566B; --x-faint:#716A80;
  --x-brand:#3B1C78; --x-em:#5A26D6; --x-line:rgba(40,24,90,.14);
  --x-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --x-sans:var(--f-sans,var(--font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif));
  --x-script:'Caveat','Segoe Print','Bradley Hand',cursive;
  --x-ease:cubic-bezier(.22,.61,.36,1);
}
section.hero.dh{
  display:block;position:relative;overflow:hidden;isolation:isolate;padding:0;
  min-height:calc(100vw * 941 / 1672 + 60px);
  background:linear-gradient(180deg,#F8F5FE 0%,#F1EBFC 100%);
  color:var(--x-ink);font-family:var(--x-sans);
}
.dh__bg{
  position:absolute;right:0;bottom:0;z-index:-1;width:100%;height:auto;max-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%);
}
.dh__inner{position:relative;padding-top:clamp(104px,8.4vw,132px);padding-bottom:clamp(28px,3vw,48px)}
.dh__copy{max-width:calc(41.5vw - max(var(--pad), (100vw - var(--wrap)) / 2))}

.dh .crumb{margin:0 0 14px;font-size:.74rem;letter-spacing:.16em;color:var(--x-faint)}
.dh__pill{
  display:inline-block;margin:0 0 clamp(14px,1.4vw,22px);padding:.42em 1.1em;border-radius:999px;
  background:var(--x-brand);color:#fff;font:600 .74rem/1 var(--x-sans);letter-spacing:.14em;
}
h1.dh__title{
  margin:0;font-family:var(--x-serif);font-weight:560;font-variation-settings:"opsz" 144;
  font-size:clamp(2.2rem,3.55vw,3rem);line-height:1.04;letter-spacing:-.03em;color:var(--x-ink);text-wrap:balance;
}
h1.dh__title em{display:block;font-style:italic;font-weight:520;color:var(--x-em)}
.dh__lead{margin:clamp(14px,1.4vw,22px) 0 0;max-width:34em;font-size:clamp(.98rem,1.12vw,1.14rem);line-height:1.55;color:var(--x-soft)}

.dh__feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(18px,2vw,30px) 0 0;padding:0;list-style:none}
.dh__feats li{display:flex;flex-direction:column;align-items:center;padding:0 clamp(8px,1vw,16px);text-align:center}
.dh__feats li+li{border-left:1px solid var(--x-line)}
.dh__ico{
  display:grid;place-items:center;width:clamp(46px,3.8vw,62px);aspect-ratio:1;margin-bottom:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FAF7FF 0%,#EDE4FD 55%,#E1D4FA 100%);color:var(--x-em);
  box-shadow:inset 0 1px 0 #fff;
}
.dh__ico svg{width:52%;height:52%}
.dh__feats strong{font-size:clamp(.95rem,1.1vw,1.1rem);font-weight:600;line-height:1.25;color:var(--x-ink)}
.dh__feats li>span:last-child{margin-top:2px;font-size:clamp(.8rem,.92vw,.94rem);line-height:1.35;color:var(--x-soft)}

.dh__actions{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,18px);margin-top:clamp(18px,2vw,30px)}
.dh__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:clamp(170px,14vw,220px);
  padding:1.05em 2em;border-radius:999px;border:1.5px solid transparent;
  background:linear-gradient(180deg,#4A2A8F 0%,#3B1C78 60%,#321667 100%);color:#fff;
  font:600 .8rem/1 var(--x-sans);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 28px -14px rgba(59,28,120,.6);
  transition:transform .3s var(--x-ease),box-shadow .3s var(--x-ease),background .3s var(--x-ease);
}
.dh__btn:hover{color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 20px 34px -14px rgba(59,28,120,.7)}
.dh__btn svg{width:18px;height:18px;transition:transform .3s var(--x-ease)}
.dh__btn:hover svg{transform:translateX(4px)}
.dh__btn--line{background:rgba(255,255,255,.55);border-color:rgba(59,28,120,.55);color:var(--x-brand);box-shadow:none}
.dh__btn--line:hover{background:var(--x-brand);border-color:var(--x-brand);color:#fff;box-shadow:none}

.dh__stats{display:flex;align-items:center;margin:clamp(18px,2vw,30px) 0 0 clamp(0px,3vw,48px);padding:0;list-style:none}
.dh__stats li{display:flex;align-items:flex-start;gap:10px;padding:0 clamp(12px,1.6vw,26px)}
.dh__stats li:first-child{padding-left:0}
.dh__stats li+li{border-left:1px solid var(--x-line)}
.dh__stats b{font-family:var(--x-serif);font-weight:560;font-size:clamp(1.7rem,2.3vw,2.4rem);line-height:1;letter-spacing:-.03em;color:var(--x-ink)}
.dh__stats small{font-size:.55em;vertical-align:.35em}
.dh__stats span{padding-top:.2em;font-size:clamp(.74rem,.86vw,.86rem);line-height:1.3;color:var(--x-soft)}

.dh__sig,.dh__tagline{margin:0;font-family:var(--x-script);font-weight:500;line-height:1.1;color:var(--x-brand);pointer-events:none}
.dh__sig{margin:14px 0 0 clamp(0px,1.4vw,24px);font-size:clamp(1.05rem,1.35vw,1.4rem);transform:rotate(-8deg);transform-origin:left;width:max-content}
.dh__tagline{
  position:absolute;top:clamp(84px,6.6vw,104px);right:clamp(16px,2.4vw,44px);
  font-size:clamp(1.2rem,1.7vw,1.8rem);color:var(--x-em);transform:rotate(-8deg);
}
.dh__sig::after,.dh__tagline::after{
  content:"";display:block;width:70%;height:8px;margin:2px 0 0 18%;
  border-bottom:1.5px solid currentColor;border-radius:0 0 100% 60%/0 0 100% 60%;transform:rotate(-3deg);
}

.dh__badges{
  position:absolute;right:max(var(--pad), (100vw - var(--wrap)) / 2);bottom:clamp(14px,1.8vw,28px);
  display:flex;gap:clamp(14px,1.8vw,28px);margin:0;padding:0;list-style:none;
}
.dh__badges li{display:flex;align-items:center;gap:10px;font-size:clamp(.74rem,.86vw,.86rem);line-height:1.2;color:var(--x-soft)}
.dh__bico{
  display:grid;place-items:center;flex:none;width:clamp(34px,2.7vw,42px);aspect-ratio:1;border-radius:50%;
  background:#fff;color:var(--x-brand);box-shadow:0 6px 16px -8px rgba(60,29,115,.35);
}
.dh__bico svg{width:52%;height:52%}

@media (max-width:1180px){
  section.hero.dh{display:flex;flex-direction:column;min-height:0}
  .dh__inner{padding-bottom:0}
  .dh__copy{max-width:660px}
  h1.dh__title{font-size:clamp(2.1rem,6vw,3.3rem)}
  .dh__lead{font-size:1.04rem}
  .dh__bg{
    position:relative;order:1;z-index:0;width:100%;height:auto;max-height:640px;margin-top:8px;
    aspect-ratio:980/941;object-fit:cover;object-position:100% 50%;align-self:center;max-width:860px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%);
  }
  .dh__tagline{display:none}
  .dh__badges{position:static;order:2;flex-wrap:wrap;justify-content:center;padding:4px var(--pad) 36px}
}
@media (max-width:560px){
  .dh__feats li{padding:0 6px}
  .dh__feats strong{font-size:.9rem}
  .dh__feats li>span:last-child{font-size:.76rem}
  .dh__actions .dh__btn{flex:1 1 100%}
  .dh__stats{margin-left:0}
  .dh__stats li{gap:7px;padding:0 10px}
  .dh__sig{display:none}
  .dh__bg{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){ .dh__btn,.dh__btn svg{transition:none} }

/* ── handwritten accents, lifted off the page ──
   A stacked, offset shadow in the brand violet gives the script lines a
   pressed-out, slightly 3D edge without touching the letterforms. */
.dh__tagline,.dh__sig,.ab__script,.diff__script,.script{
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(40,20,90,.18);
}
.dh__tagline::after,.dh__sig::after,.ab__script::after{
  filter:drop-shadow(0 1px 1px rgba(40,20,90,.18));
}

/* ════════════════════════════════════════════════════════════════
   Steps (.st), test menu (.tm), software (.sw) and platform (.pf),
   rebuilt to the Sep 2026 design doc. Shared parts use .x-* names.
   Self-contained tokens; selectors outrank the older section rules
   and the .v8 overrides on the homepage.
   ════════════════════════════════════════════════════════════════ */
.st,.tm,.sw,.pf{
  --x-ink:#150F2B; --x-soft:#5C566B; --x-faint:#716A80;
  --x-brand:#3B1C78; --x-em:#5A26D6; --x-line:rgba(40,24,90,.13);
  --x-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --x-sans:var(--f-sans,var(--font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif));
  --x-script:'Caveat','Segoe Print','Bradley Hand',cursive;
  --x-ease:cubic-bezier(.22,.61,.36,1);
}
section.section.st,section.section.tm,section.section.sw,section.section.pf{
  position:relative;overflow:hidden;isolation:isolate;color:var(--x-ink);font-family:var(--x-sans);
  padding-block:clamp(64px,7vw,110px);
  background:
    radial-gradient(40% 50% at 100% 0%,rgba(214,198,250,.45),transparent 70%),
    radial-gradient(36% 46% at 0% 100%,rgba(214,198,250,.4),transparent 70%),
    linear-gradient(180deg,#F8F5FE 0%,#F2EDFC 100%);
}
.x-head{max-width:880px;margin:0 auto clamp(28px,3.4vw,48px);text-align:center}
.x-head--left{margin-left:0;text-align:left}
.x-eyebrow{margin:0 0 14px;font:500 .8rem/1.4 var(--x-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--x-faint)}
section h2.x-title{
  margin:0;font-family:var(--x-serif);font-weight:560;font-variation-settings:"opsz" 144;
  font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.04;letter-spacing:-.03em;color:var(--x-ink);text-wrap:balance;
}
section h2.x-title em{font-style:italic;color:var(--x-em)}
section h2.x-title .x-plain{color:var(--x-em)}
.x-lead{margin:16px auto 0;max-width:42em;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.55;color:var(--x-soft)}
.x-head--left .x-lead{margin-left:0}
.x-card{
  background:#FDFCFF;border:1px solid rgba(60,29,115,.06);border-radius:22px;
  box-shadow:0 1px 2px rgba(60,29,115,.04),0 18px 40px -28px rgba(60,29,115,.3);
}
.x-ico{
  display:grid;place-items:center;flex:none;width:clamp(48px,4vw,60px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FAF7FF 0%,#EDE4FD 55%,#E3D7FB 100%);color:var(--x-em);
}
.x-ico svg{width:50%;height:50%}
.x-paw{position:absolute;z-index:-1;width:clamp(70px,8vw,130px);fill:#DDD1F8;pointer-events:none}
.x-script{
  position:absolute;margin:0;font:500 clamp(1.15rem,1.6vw,1.7rem)/1.12 var(--x-script);color:var(--x-em);
  transform:rotate(-9deg);pointer-events:none;width:max-content;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(40,20,90,.18);
}

/* ── four simple steps ── */
section.section.st{padding-bottom:0}
.st__script--l{top:clamp(40px,4vw,70px);left:clamp(20px,3vw,60px)}
.st__script--r{top:clamp(50px,5vw,84px);right:clamp(20px,3vw,60px)}
.st__paw{top:clamp(50px,5vw,80px);right:clamp(150px,17vw,300px);transform:rotate(18deg)}
.st__grid{--g:clamp(22px,2.6vw,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.st__grid>li{position:relative;padding:clamp(16px,1.6vw,24px) clamp(18px,2vw,30px) clamp(22px,2.2vw,32px)}
.st__grid>li:not(:last-child)::after{
  content:"";position:absolute;top:38%;right:calc(var(--g) / -2 - 13px);width:26px;height:14px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cg fill='%235A26D6'%3E%3Ccircle cx='2' cy='7' r='1.5'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3Ccircle cx='12' cy='7' r='1.5'/%3E%3Ccircle cx='17' cy='7' r='1.5'/%3E%3C/g%3E%3Cpath d='M19 2l5 5-5 5' fill='none' stroke='%235A26D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.st__n{
  position:absolute;top:clamp(14px,1.4vw,20px);left:clamp(14px,1.4vw,20px);z-index:1;display:grid;place-items:center;
  width:clamp(40px,3.4vw,50px);aspect-ratio:1;border-radius:50%;background:var(--x-brand);color:#fff;font:600 .95rem/1 var(--x-sans);
}
.st__art{display:block;width:100%;height:clamp(150px,13vw,210px);object-fit:contain;mix-blend-mode:multiply;margin:0 0 16px}
section.st .st__grid h3{margin:0 0 8px;font:600 clamp(1.1rem,1.4vw,1.4rem)/1.25 var(--x-sans);letter-spacing:-.01em;color:var(--x-ink)}
.st__grid p{margin:0;font-size:clamp(.94rem,1.05vw,1.05rem);line-height:1.5;color:var(--x-soft)}
.st__perks{
  display:flex;justify-content:center;flex-wrap:wrap;margin:clamp(34px,4vw,60px) 0 0;
  padding:clamp(30px,3.4vw,48px) var(--pad) clamp(28px,3vw,44px);list-style:none;
  background:linear-gradient(180deg,#EDE4FC 0%,#E7DCFA 100%);border-radius:50% 50% 0 0/clamp(18px,2.4vw,40px) clamp(18px,2.4vw,40px) 0 0;
}
.st__perks li{display:flex;align-items:center;gap:16px;padding:6px clamp(20px,3.2vw,56px);font-size:clamp(.98rem,1.2vw,1.2rem);color:var(--x-ink)}
.st__perks li+li{border-left:1px solid rgba(60,29,115,.22)}
.st__perks svg{width:clamp(30px,2.8vw,42px);height:clamp(30px,2.8vw,42px);color:var(--x-em)}

/* ── test menu ── */
.tm__script--l{top:clamp(40px,4vw,70px);left:clamp(20px,3vw,60px)}
.tm__script--r{top:clamp(46px,4.6vw,80px);right:clamp(20px,3vw,60px)}
.tm__paw{top:clamp(40px,4vw,70px);right:clamp(190px,21vw,360px);transform:rotate(14deg)}
.tm__bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.1vw,18px);margin-bottom:clamp(14px,1.6vw,22px)}
.tm__bar button{
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,1vw,14px);min-height:clamp(54px,4.6vw,70px);padding:0 12px;
  border:0;border-radius:999px;background:#fff;color:var(--x-brand);font:600 clamp(.92rem,1.2vw,1.2rem)/1 var(--x-sans);cursor:pointer;
  box-shadow:0 1px 2px rgba(60,29,115,.05),0 12px 26px -18px rgba(60,29,115,.35);
  transition:background .3s var(--x-ease),color .3s var(--x-ease),box-shadow .3s var(--x-ease),transform .3s var(--x-ease);
}
.tm__bar button:hover{transform:translateY(-2px)}
.tm__bar button svg{width:clamp(24px,2.3vw,34px);height:clamp(24px,2.3vw,34px);flex:none;color:var(--pc)}
.tm__bar button[aria-selected="true"]{
  background:var(--pc);background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 82%,#fff) 0%,var(--pc) 100%);color:#fff;
  box-shadow:0 16px 28px -14px var(--pc);
}
.tm__bar button[aria-selected="true"] svg{color:#fff}
.tm__card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,22vw,340px);align-items:center;
  min-height:clamp(250px,20vw,310px);padding:clamp(22px,2.4vw,36px) 0 0 clamp(22px,2.4vw,36px);
}
.tm__pane{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,3vw,48px);align-items:center;padding-bottom:clamp(22px,2.4vw,36px);animation:paneIn .35s var(--x-ease)}
.tm__pane[hidden]{display:none}
.tm__intro{display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start;padding-right:clamp(18px,2.6vw,40px);border-right:1px solid rgba(60,29,115,.14)}
.tm__big{display:grid;place-items:center;flex:none;width:clamp(80px,7.6vw,124px);aspect-ratio:1;border-radius:50%;background:var(--pt);color:var(--pc)}
.tm__big svg{width:52%;height:52%}
section.tm .tm__intro h3{margin:6px 0 4px;font:700 clamp(1.35rem,2vw,1.9rem)/1.15 var(--x-sans);letter-spacing:-.025em;color:var(--x-ink)}
.tm__count{margin:0;font-size:clamp(1rem,1.2vw,1.18rem);font-weight:500;color:var(--pc)}
.tm__count::after{content:"";display:block;width:52px;height:2px;margin:14px 0;border-radius:2px;background:var(--pc)}
.tm__desc{margin:0;font-size:clamp(.94rem,1.05vw,1.04rem);line-height:1.55;color:var(--x-soft)}
.tm__params{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:0;padding:0;list-style:none}
.tm__params--one{grid-template-columns:minmax(0,1fr);max-width:420px}
.tm__params li{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:var(--pt);font-size:clamp(.92rem,1.05vw,1.04rem);font-weight:500;color:var(--x-ink)}
.tm__params li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--pc)}
.tm__pets{align-self:end;margin:0}
.tm__pets img{display:block;width:100%;height:auto;mix-blend-mode:multiply;border-radius:0 0 22px 0}
.tm__love{top:34%;right:calc(var(--pad) * -1 + 6px);font-size:clamp(1rem,1.25vw,1.35rem)}
.tm__stats{display:flex;justify-content:center;flex-wrap:wrap;margin:clamp(26px,3vw,42px) 0 0;padding:0;list-style:none}
.tm__stats li{display:flex;align-items:center;gap:16px;padding:4px clamp(20px,3vw,52px);font-size:clamp(.94rem,1.1vw,1.08rem);line-height:1.3;color:var(--x-ink)}
.tm__stats li+li{border-left:1px solid var(--x-line)}
.tm__stats .x-ico{width:clamp(54px,4.6vw,72px)}
.tm__foot{max-width:56em;margin:clamp(18px,2vw,28px) auto 0;text-align:center;font-size:.86rem;line-height:1.6;color:var(--x-faint)}

/* ── the software ── */
.sw__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:clamp(24px,3vw,56px);align-items:center}
.sw__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.sw__cards li{padding:clamp(16px,1.6vw,24px)}
section.sw .sw__cards h3{margin:14px 0 6px;font:600 clamp(1rem,1.3vw,1.24rem)/1.25 var(--x-sans);letter-spacing:-.01em;color:var(--x-ink)}
.sw__cards p{margin:0;font-size:clamp(.88rem,1vw,1rem);line-height:1.45;color:var(--x-soft)}
.sw__art{position:relative;margin:0;padding-top:clamp(40px,5vw,80px)}
.sw__art img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 70%,transparent 100%)}
.sw__script--t{top:0;left:8%}
.sw__script--b{right:calc(var(--pad) * -1 + 6px);bottom:16%;font-size:clamp(1rem,1.3vw,1.4rem)}
.sw__cloud{
  position:absolute;top:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;
  padding:16px 26px;border-radius:40px;background:rgba(229,219,250,.8);text-align:center;
  font-size:clamp(.86rem,1vw,1rem);line-height:1.25;color:var(--x-em);
}
.sw__cloud svg{width:34px;height:34px}

/* ── the platform ── */
.pf__paw{top:clamp(40px,4vw,70px);left:clamp(24px,3vw,60px);transform:rotate(-14deg)}
.pf__script{top:clamp(44px,4.4vw,76px);right:clamp(20px,3vw,60px)}
.pf__flow{--g:clamp(16px,2vw,30px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.pf__flow>li{position:relative;display:flex;flex-direction:column;padding:clamp(14px,1.4vw,20px)}
.pf__flow>li:not(:last-child)::after{
  content:"";position:absolute;top:48%;right:calc(var(--g) / -2 - 6px);width:12px;height:12px;
  border-top:2px solid var(--x-brand);border-right:2px solid var(--x-brand);transform:rotate(45deg);
}
.pf__top{display:flex;gap:12px;align-items:flex-start}
.pf__n{display:grid;place-items:center;flex:none;width:clamp(40px,3.4vw,50px);aspect-ratio:1;border-radius:50%;background:#ECE3FC;color:var(--x-brand);font:600 1rem/1 var(--x-sans)}
section.pf .pf__top h3{margin:8px 0 6px;font:600 clamp(1rem,1.2vw,1.18rem)/1.25 var(--x-sans);color:var(--x-ink)}
.pf__top p{margin:0;font-size:clamp(.84rem,.95vw,.95rem);line-height:1.45;color:var(--x-soft)}
.pf__art{display:block;width:100%;height:clamp(120px,11vw,176px);margin-top:auto;padding-top:14px;object-fit:contain;mix-blend-mode:multiply}
.pf__panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(18px,2.2vw,30px)}
.pf__panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);overflow:hidden}
.pf__panel--connect{background:linear-gradient(135deg,#F1EAFD 0%,#FBF9FF 100%)}
.pf__panel--dash{background:linear-gradient(135deg,#FCFAF6 0%,#F8F4FC 100%)}
.pf__ptext{padding:clamp(22px,2.4vw,36px) 0 clamp(16px,1.8vw,24px) clamp(22px,2.4vw,36px)}
section.pf h3.pf__ptitle{margin:0;font-family:var(--x-serif);font-weight:560;font-variation-settings:"opsz" 120;font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.05;letter-spacing:-.025em;color:var(--x-ink)}
.pf__psub{margin:10px 0 0;font-size:clamp(1.02rem,1.3vw,1.25rem);color:var(--x-ink)}
.pf__panel--dash .pf__psub{color:var(--x-soft)}
.pf__pdesc{margin:12px 0 0;font-size:clamp(.9rem,1vw,1rem);line-height:1.55;color:var(--x-soft)}
.pf__pimg{align-self:end;justify-self:end;display:block;width:100%;height:auto;max-height:280px;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 55% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 70% 72% at 55% 50%,#000 70%,transparent 100%)}
.pf__feats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:clamp(14px,1.6vw,22px) 10px;list-style:none;background:rgba(255,255,255,.72)}
.pf__feats li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px;text-align:center;font-size:clamp(.8rem,.92vw,.92rem);line-height:1.3;color:var(--x-ink)}
.pf__feats li+li{border-left:1px solid var(--x-line)}

@media (max-width:1180px){
  .st__script,.tm__script,.tm__love,.sw__script,.pf__script{display:none}
  .st__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st__grid>li:not(:last-child)::after{display:none}
  .tm__card{grid-template-columns:minmax(0,1fr);padding-right:clamp(22px,2.4vw,36px)}
  .tm__pets{justify-self:center;width:min(300px,70%)}
  .tm__pets img{border-radius:0}
  .sw__grid{grid-template-columns:minmax(0,1fr)}
  .sw__art{max-width:760px;margin-inline:auto}
  .pf__flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf__flow>li:not(:last-child)::after{display:none}
  .pf__panels{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .tm__bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tm__pane{grid-template-columns:minmax(0,1fr)}
  .tm__intro{padding-right:0;border-right:0}
  .tm__stats li{padding:10px 16px}
  .tm__stats li+li{border-left:0}
  .sw__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf__flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st__perks li+li{border-left:0}
}
@media (max-width:560px){
  .st__grid,.pf__flow{grid-template-columns:minmax(0,1fr)}
  .tm__bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm__bar button:last-child{grid-column:1/-1}
  .tm__params{grid-template-columns:minmax(0,1fr)}
  .tm__intro{flex-direction:column;gap:12px}
  .tm__stats{justify-content:flex-start}
  .sw__cards{grid-template-columns:minmax(0,1fr)}
  .sw__cloud{display:none}
  .pf__panel{grid-template-columns:minmax(0,1fr)}
  .pf__ptext{padding-right:clamp(22px,2.4vw,36px)}
  .pf__pimg{justify-self:center;max-height:220px}
  .pf__feats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .pf__feats li:nth-child(3){border-left:0}
  .st__perks{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){ .tm__bar button,.tm__pane{transition:none;animation:none} }

/* ── PETLAB inside a display heading: the wordmark's bold, upright capitals ── */
h2 em.x-brandword,h1 em.x-brandword{
  font-family:var(--f-sans,var(--font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif));
  font-style:normal;font-weight:800;font-variation-settings:normal;font-size:.9em;
  text-transform:uppercase;letter-spacing:-.005em;color:#5A26D6;
}

/* ── fixes after the first render ── */
section.section h2.x-title{letter-spacing:-.03em;line-height:1.04;font-weight:560}
section.section h2.x-title em{font-style:italic;color:var(--x-em)}
section.section h2.x-title em.x-brandword{font-style:normal}
.st__art,.pf__art,.tm__pets img{
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 64%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 64%,transparent 100%);
}
.tm__pets img{border-radius:0}
.pf__ptext{grid-column:1;grid-row:1}
.pf__panel picture,.pf__pimg{grid-column:2;grid-row:1}
.pf__feats{grid-row:2}
@media (max-width:560px){
  .pf__panel picture,.pf__pimg{grid-column:1;grid-row:2}
  .pf__feats{grid-row:3}
}

@media (max-width:860px){ .x-paw{display:none} }
@media (max-width:560px){
  .sw__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw__cards li{padding:14px}
  section.sw .sw__cards h3{font-size:.98rem}
}

/* ── handwritten lines, refined: one crisp highlight and a soft lift, no stacked
   offsets. On the hero photo the line gets a deeper violet and a light halo so it
   reads against the blurred clinic behind it. ── */
.hero__script{
  color:#3E1F8A;
  text-shadow:0 0 16px rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(40,20,90,.22);
}

/* ── homepage hero, to the Sep 14 mockup ──────────────────────────────────
   Wide screens: the clinic photograph fills the hero edge to edge at its own
   proportions, and the copy is laid over its soft left third, sized in vw so
   it keeps the mockup's composition and never reaches the laptop or case.
   861–1279px: the copy stacks above the full photograph. Phones unchanged. */
@media (min-width:1280px){
  .hero--scene{min-height:calc(100vw * 879 / 1789)}
  .hero__bg{inset:0}
  .hero__layer,.hero__layer[style]{inset:0;width:100%;transform:none!important}
  .hero__layer img{
    width:100%;height:100%;object-fit:cover;object-position:100% 100%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__wash{
    display:block;
    background:
      linear-gradient(90deg,rgba(247,243,254,.95) 0%,rgba(247,243,254,.88) 24%,rgba(247,243,254,.45) 36%,rgba(247,243,254,0) 46%),
      linear-gradient(0deg,rgba(247,243,254,.6) 0%,rgba(247,243,254,0) 10%);
  }
  .hero__chip{display:none}
  .hero--scene .hero__inner{max-width:none;padding:10vw 4.9vw 3vw}
  .hero--scene .hero__copy{max-width:44vw}
  .hero--scene .eyebrow{margin-bottom:2.2vw;font-size:.95vw;line-height:1.7;letter-spacing:.12em}
  .hero--scene h1{font-size:3.75vw;line-height:1.1}
  .hero--scene .hero__lead{margin-top:1.4vw;max-width:37vw;font-size:1.26vw;line-height:1.45}
  .hero--scene .hero__actions{margin-top:1.7vw;gap:1.8vw}
  .hero--scene .hero__actions .btn--lg{padding:1.15vw 2.4vw;font-size:1.02vw;letter-spacing:.1em}
  .hero--scene .hero__call{font-size:.82vw}
  .hero__usps{margin-top:2.1vw}
  .hero__usps li{gap:.8vw;padding:0 1.8vw;font-size:.86vw;letter-spacing:.06em}
  .hero__usps li:first-child{padding-left:.8vw}
  .hero__usps li+li{border-left-color:rgba(60,29,115,.18)}
  .hero__usps .orb{width:auto;height:auto;background:none;box-shadow:none;color:#5B34A0}
  .hero__usps .orb svg{width:2.7vw;height:2.7vw;stroke-width:1.5}
  .hero__tag{margin-top:2.6vw;max-width:40vw;gap:.9vw;font-size:.7vw}
  .hero__tag svg{width:1.3vw;height:1.3vw}
  .hero__script{
    top:6.4vw;left:81.5vw;right:auto;font-size:1.45vw;line-height:1.2;
    color:#7B6F9C;text-shadow:none;transform:rotate(-8deg);
  }
  .hero__script::after{
    content:"";display:block;width:62%;height:.6vw;margin-top:.2vw;opacity:.7;
    border-bottom:1.5px solid currentColor;border-radius:0 0 100% 60%/0 0 100% 60%;
  }
}
@media (min-width:861px) and (max-width:1279px){
  .hero--scene{min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .hero__bg{position:relative;inset:auto;order:2;z-index:0;width:100%;aspect-ratio:1789/879;margin-top:-10px}
  .hero__layer,.hero__layer[style]{position:absolute;inset:0;width:auto;transform:none!important}
  .hero__layer img{
    width:100%;height:100%;object-fit:cover;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .hero__wash,.hero__chip,.hero__script{display:none}
  .hero--scene .hero__inner{order:1;padding-top:128px;padding-bottom:10px}
  .hero--scene .hero__copy{max-width:760px}
}

/* hero, finishing: thin script stroke like the mockup, and on wide screens the
   nav lines up with the copy instead of the centred wrap */
@media (min-width:1280px){
  .hero__script::after{
    width:58%;height:0;margin:.5vw 0 0 .4vw;background:none;border-radius:0;
    border-bottom:1.5px solid currentColor;transform:rotate(-3deg);opacity:.6;
  }
  body:has(.hero--scene) .nav__inner{width:100%;max-width:none;margin-inline:0;padding-inline:4.9vw}
  .hero__script{color:#56477F;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.8)}
}

/* ── hero, less rendered: the photograph is quietened towards a real camera
   (lower saturation, a touch of warmth, fine grain, soft vignette) and the UI
   around it loses its gloss (flat button, calmer violet, neutral wash) ── */
.hero--scene .hero__layer img{filter:saturate(.78) contrast(.95) brightness(1.02) sepia(.07)}
.hero--scene .hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 90% at 60% 45%,transparent 60%,rgba(40,30,50,.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:auto,220px 220px;opacity:.55;mix-blend-mode:soft-light;
}
.hero--scene h1 em{color:#56408F}
.hero--scene .btn--3d{
  background:#3A2470;border-color:#3A2470;box-shadow:none;transition:background .25s var(--ease);
}
.hero--scene .btn--3d:hover{background:#2C1A57;border-color:#2C1A57;transform:none;box-shadow:none}
.hero--scene .btn--3d:active{box-shadow:none}
@media (min-width:1280px){
  .hero__wash{
    background:
      linear-gradient(90deg,rgba(248,247,250,.95) 0%,rgba(248,247,250,.88) 24%,rgba(248,247,250,.45) 36%,rgba(248,247,250,0) 46%),
      linear-gradient(0deg,rgba(248,247,250,.6) 0%,rgba(248,247,250,0) 10%);
  }
  .hero__usps .orb{color:#4A3585}
}

/* ── "For every patient. Every time." moved from the hero photo to lead the
   gallery, set as one handwritten line with a hand-drawn underline ── */
.gallery .gallery__script{
  display:inline-block;margin:0 0 clamp(18px,2vw,28px);
  font-family:'Caveat','Segoe Print','Bradley Hand',cursive;font-weight:600;
  font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.05;letter-spacing:.005em;color:#4A3585;
  transform:rotate(-2deg);transform-origin:left center;
}
.gallery__script span{color:#7A5CC4}
.gallery__script::after{
  content:"";display:block;width:58%;height:10px;margin:2px 0 0 38%;
  border-bottom:2px solid rgba(122,92,196,.55);border-radius:0 0 100% 60%/0 0 100% 60%;
}

/* PETLAB as the wordmark at the start of a dark heading: keep the heading's ink */
section.section h2.x-title em.x-brandword--ink{color:inherit}