/* ============================================================
   Préime — Homepage  (recreated from Figma)
   Tokens, fonts and layout mirror the design file.
   ============================================================ */

:root{
  /* Colors */
  --primary-900:#251935;
  --primary-800:#302045;
  --primary-500:#573B7E;
  --primary-400:#796298;
  --primary-50:#EEEBF2;
  --secondary-100:#E3DAEF;
  --secondary-50:#F6F3FA;
  --tertiary-50:#FBF7F5;
  --lilac:#9387bf;
  --black-500:#1B1622;
  --black-400:#49454E;
  --neutral-03:#454140;
  --neutral-02:#F8F4F1;
  --light-grey:#F6F5F7;
  --white:#ffffff;

  /* Fonts */
  --font-head:'Satoshi', 'Segoe UI', sans-serif;
  --font-serif:'Castoro', Georgia, serif;
  --font-body:'Nunito', 'Segoe UI', sans-serif;

  --maxw:1280px;
  --radius:20px;
  --radius-sm:12px;
  --pill:999px;
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--black-500);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html{overflow-x:clip}
body{overflow-x:clip}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,5.5vw,80px)}
.section{padding:84px 0}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:30px;width:auto;display:block}
.logo-light img{filter:none;opacity:.95}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:var(--pill);
  transition:.25s ease;white-space:nowrap;
}
.arrow{font-size:1.05em;line-height:1}
.btn-primary{background:var(--primary-500);color:#fff}
.btn-primary:hover{background:var(--primary-800)}
.btn-outline{border:1.5px solid var(--primary-500);color:var(--primary-500);background:transparent}
.btn-outline:hover{background:var(--primary-500);color:#fff}
.btn-light{background:#fff;color:var(--primary-500)}
.btn-light:hover{background:var(--primary-50)}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:83px;gap:24px}
.nav-desktop{display:flex;align-items:center;gap:30px}
.nav-link{
  font-size:15px;font-weight:500;color:var(--black-500);
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:6px 0;transition:color .2s;
}
.nav-link:hover{color:var(--primary-500)}
.nav-link.active{color:var(--primary-500);font-weight:700}
.nav-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--primary-500);border-radius:2px;
}

/* dropdown */
.nav-dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:130%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(40,20,70,.16);
  padding:10px;min-width:210px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:.22s ease;z-index:80;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown-menu a{padding:11px 14px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--neutral-03)}
.dropdown-menu a:hover{background:var(--secondary-50);color:var(--primary-500)}

.hamburger{display:none;flex-direction:column;gap:5px;padding:6px}
.hamburger span{width:24px;height:2px;background:var(--black-500);border-radius:2px;transition:.3s}

/* ============ MOBILE MENU ============ */
.mobile-menu{
  position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);
  background:#fff;z-index:120;padding:22px 22px 30px;
  display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-12px 0 40px rgba(0,0,0,.12);overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.menu-close{padding:4px}
.mobile-nav{display:flex;flex-direction:column}
.m-link,.m-acc-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px;font-size:17px;font-weight:500;color:var(--black-500);
  border-bottom:1px solid #ececec;width:100%;text-align:left;
}
.m-accordion .m-acc-toggle{color:var(--primary-500);font-weight:700;border-bottom:none}
.m-acc-toggle svg{transition:transform .25s}
.m-accordion.open .m-acc-toggle svg{transform:rotate(180deg)}
.m-acc-panel{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  background:var(--secondary-50);border-radius:12px;
}
.m-accordion.open .m-acc-panel{max-height:340px}
.m-acc-panel a{display:block;padding:14px 18px;font-size:15px;font-weight:500;color:var(--neutral-03);border-bottom:1px solid #e7e0f1}
.m-acc-panel a:last-child{border-bottom:none}
.m-provider{margin-top:auto;justify-content:center;
  background:linear-gradient(90deg,var(--primary-800),var(--primary-400));}
.menu-overlay{
  position:fixed;inset:0;background:rgba(20,10,35,.45);z-index:110;
  opacity:0;visibility:hidden;transition:.3s;
}
.menu-overlay.show{opacity:1;visibility:visible}

/* ============ HERO ============ */
.hero{display:grid;grid-template-columns:42% 58%;min-height:620px}
.hero-media img{width:100%;height:100%;object-fit:cover;min-height:620px}
.hero-content{
  display:flex;align-items:center;position:relative;overflow:hidden;
  background:
    linear-gradient(110deg,#efe7f8 0%, rgba(236,224,247,.86) 36%, rgba(228,212,243,.42) 70%, rgba(221,201,239,.18) 100%),
    url('../assets/helix-b.jpg') no-repeat center right/cover;
}
.hero-content::after{ content:none; }
.hero-text{padding:0 56px;max-width:700px;position:relative;z-index:2}
.hero-text h1{
  font-family:var(--font-head);font-weight:700;color:var(--primary-500);
  font-size:clamp(32px,3.7vw,52px);line-height:1.18;letter-spacing:-.5px;margin-bottom:22px;
}
.hero-text p{font-size:18px;color:var(--neutral-03);max-width:480px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ============ SECTION HEADINGS ============ */
.section-title{
  font-family:var(--font-head);font-weight:600;color:var(--primary-500);
  font-size:clamp(30px,3.6vw,52px);line-height:1.2;letter-spacing:-.4px;text-align:center;
}
.section-sub{max-width:760px;margin:18px auto 0;text-align:center;color:var(--neutral-03);font-size:16px}
.section-title.center,.section-sub.center{text-align:center}
.eyebrow{text-align:center;color:var(--primary-400);font-weight:600;letter-spacing:.5px;font-size:13px;margin-bottom:8px}

/* ============ PORTFOLIO ============ */
.portfolio{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.55) 0%, rgba(231,219,247,.30) 36%, rgba(206,185,234,.50) 51%, rgba(206,185,234,0) 55%), /* big glass orb */
    radial-gradient(26% 30% at 88% 64%, rgba(202,181,230,.45) 0%, transparent 62%), /* right bokeh */
    radial-gradient(22% 26% at 9% 80%, rgba(202,181,230,.40) 0%, transparent 62%),  /* left bokeh */
    linear-gradient(180deg,#fff 0%, #f4edfb 52%, #ece1f7 100%);
}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.product-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(244,226,245,.55) 100%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;padding:24px 24px 44px;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 12px 40px rgba(87,59,126,.07);
  transition:transform .25s, box-shadow .25s;
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(87,59,126,.14)}
.pc-logo-img{height:46px;width:auto;object-fit:contain;margin-bottom:4px}
.pc-desc{font-family:'Poppins',var(--font-body);color:var(--lilac);font-size:15px;text-align:center;line-height:1.5;margin:10px 0 20px}
.pc-media{
  position:relative;width:100%;
  background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));
  border-radius:16px;aspect-ratio:376/326;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pc-media::after{ /* soft radial highlight like Figma */
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.pc-media img{max-height:90%;width:auto;object-fit:contain;position:relative;z-index:1}
.pc-link{
  position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  display:inline-flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.92);border:2px solid rgba(255,255,255,.6);
  border-radius:var(--pill);box-shadow:0 8px 22px rgba(87,59,126,.14);
  padding:12px 24px;font-weight:600;color:var(--black-500);font-size:15px;transition:.2s;white-space:nowrap;
}
.pc-link:hover{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}

/* ============ TAILORED ============ */
.tailored{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 84% 42%, rgba(255,255,255,.45) 0%, rgba(214,196,236,.30) 30%, rgba(199,176,228,.45) 44%, rgba(199,176,228,0) 48%), /* big orb right */
    radial-gradient(24% 30% at 10% 24%, rgba(202,181,230,.40) 0%, transparent 62%), /* top-left bokeh */
    radial-gradient(rgba(140,110,190,.10) 1.4px, transparent 1.5px) 0 0/22px 22px,  /* dot texture */
    linear-gradient(180deg,#f0e8f9 0%, #e9def5 100%);
}
.tailored-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-top:48px;position:relative}
.tailored-media{border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(87,59,126,.16);position:relative;z-index:1}
.tailored-media::before{ /* soft purple blob behind image */
  content:"";position:absolute;inset:-12% -12% -12% -12%;z-index:-1;
  background:radial-gradient(circle at 40% 40%, var(--primary-400) 0%, rgba(121,98,152,.25) 45%, transparent 70%);
  filter:blur(8px);border-radius:50%;
}
.tailored-media{border-radius:32px}
.tailored-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:554/543;border-radius:32px}
.toggle{display:inline-flex;gap:24px;background:transparent;padding:0;margin-bottom:0}
.toggle-btn{padding:14px 20px;border-radius:var(--pill);font-weight:600;font-size:16px;color:var(--primary-500);border:1.5px solid var(--primary-500);transition:.2s;font-family:var(--font-body)}
.toggle-btn.active{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}
.tailored-body{display:flex;flex-direction:column;gap:22px}
.tailored-head{font-family:var(--font-head);font-weight:500;font-size:clamp(24px,2.5vw,34px);color:var(--primary-500);line-height:1.4;letter-spacing:-.17px;margin:0;max-width:520px}
.tailored-body p{color:var(--black-400);font-size:18px;line-height:1.5;margin:0}
.tailored-body .btn{margin-top:0;align-self:flex-start;
  background:linear-gradient(30deg,var(--primary-500) 0%, #9d6be4 100%);color:#fbf9f5;font-weight:700}
.tailored-body .btn:hover{filter:brightness(1.06)}

/* ============ SCIENCE ============ */
.science{
  /* Figma 8334:16673 — flat left-to-right lavender wash, no dot pattern. */
  background:linear-gradient(90deg,#efe2fc 0%, #f4ebfc 50%, #f6f1fc 100%);
  position:relative;
}
.science-tag{text-align:center;font-weight:600;color:var(--primary-500);margin-top:14px}
.science-actions{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:54px}
.feature-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:300px;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;grid-column:span 2;            /* top row: three cards (2+2+2) */
}
.feature-card.wide{grid-column:span 3}      /* bottom row: two cards (3+3) */
.feature-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(87,59,126,.1) 47.139%, rgba(87,59,126,1) 100%);
}
/* Figma tunes the scrim per card to suit each photo's brightness. */
.science .feature-card:nth-child(4)::before{
  background:linear-gradient(180deg,rgba(87,59,126,.09) 47.139%, rgba(87,59,126,.9) 100%);
}
.science .feature-card:nth-child(5)::before{
  background:linear-gradient(180deg,rgba(87,59,126,.36) 47.139%, rgba(87,59,126,.81) 100%);
}
/* Figma 8334:16687 — the badge sits in the bottom content stack, directly
   above the title (8px gap), not pinned to the card's top-left corner. */
.fc-num{
  flex:0 0 auto;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:500;font-size:15px;
  background:#f6f3fa;color:#796298;margin-bottom:8px;
}
/* card 5 inverts: solid purple circle, white digit */
.fc-num-solid{background:#796298;color:#fff}
.fc-text{position:relative;z-index:2;padding:24px}
.fc-text h4{font-family:var(--font-head);font-weight:600;font-size:21px;margin-bottom:8px}
.fc-text p{font-size:14px;color:rgba(255,255,255,.88);line-height:1.5}

/* ============ TRANSFORMS / BEFORE-AFTER ============ */
.transforms{background:#fff}
.transforms-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}
.transforms-head .section-title{text-align:left}
.transforms-head .eyebrow{text-align:left}
.ba-tabs{display:flex;gap:12px;justify-content:flex-start;margin-bottom:26px;flex-wrap:wrap}
.ba-tab{padding:10px 22px;border-radius:var(--pill);border:1px solid var(--secondary-100);font-weight:600;font-size:14px;color:var(--primary-500);transition:.2s}
.ba-tab.active{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}

.ba-slider{
  position:relative;width:100%;margin:0 auto;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1240/470;user-select:none;box-shadow:0 18px 50px rgba(87,59,126,.16);
}
.ba-slider > .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.ba-before{position:absolute;inset:0;width:50%;overflow:hidden}
.ba-before img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;object-fit:cover;filter:sepia(.35) contrast(.92) brightness(.96)}
.ba-label{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-family:var(--font-serif);font-size:26px;text-shadow:0 2px 12px rgba(0,0,0,.5);z-index:3}
.ba-label-before{left:40px}
.ba-label-after{right:40px}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:4;
  transform:translateX(-50%);cursor:ew-resize;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--primary-500);
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.ba-handle svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}
.ba-caption{max-width:740px;margin:26px auto 0;text-align:center;color:var(--neutral-03);font-size:14.5px}
.ba-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.ba-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--secondary-100)}
.ba-dots .dot.active{background:var(--primary-500);width:26px;border-radius:5px}

/* ============ PROVIDER CTA ============ */
.provider-cta{
  position:relative;overflow:hidden;color:#fff;text-align:center;padding:96px 0;
  background:
    radial-gradient(75% 130% at 88% 0%, rgba(196,92,214,.60) 0%, transparent 55%),
    linear-gradient(110deg,#2f1d4d 0%,#5b2d8e 42%,#8e3fb5 76%,#bd57cf 100%);
}
.provider-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../assets/sphere-b.jpg') right center/55% no-repeat;
  opacity:.40;mix-blend-mode:screen;
}
.provider-panel{
  position:relative;z-index:1;background:none;border-radius:0;padding:0;text-align:center;color:#fff;
}
.provider-panel h2{font-family:var(--font-head);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.2;margin-bottom:18px}
.provider-panel p{max-width:640px;margin:0 auto 26px;color:rgba(255,255,255,.85);font-size:16px}
.provider-foot{margin-top:24px;font-size:14px;color:rgba(255,255,255,.8)}
.provider-foot a{text-decoration:underline}

/* ============ BLOG ============ */
.blog{background:linear-gradient(180deg,#fff,var(--secondary-50))}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--secondary-100);transition:.25s}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(87,59,126,.12)}
.blog-media{aspect-ratio:16/10;overflow:hidden}
.blog-media img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:.4s}
.blog-card:hover .blog-media img{transform:scale(1.05)}
.blog-card h3{font-family:var(--font-head);font-weight:600;font-size:19px;color:var(--primary-500);margin:20px 22px 8px}
.blog-card p{margin:0 22px 24px;color:var(--neutral-03);font-size:14.5px}

/* ============ FOOTER ============ */
.site-footer{background:var(--primary-900);color:#cfc6dd}
.footer-inner{display:grid;grid-template-columns:1.4fr 2fr;gap:48px;padding-top:70px;padding-bottom:50px}
.footer-by{margin:14px 0 14px;color:#fff;font-weight:600}
.footer-desc{font-size:14px;line-height:1.7;color:#b3a8c6;max-width:430px}
.footer-contact{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:#b3a8c6}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer-col h4{font-family:var(--font-head);font-weight:600;color:#fff;font-size:17px;margin-bottom:18px}
.footer-col a{display:block;padding:7px 0;font-size:14.5px;color:#b3a8c6;transition:.2s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;padding:22px 40px;font-size:13px;color:#9a8fb0}
.socials{display:flex;gap:14px}
.socials a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#cfc6dd;transition:.2s}
.socials a:hover{background:#fff;color:var(--primary-900)}

/* ============================================================
   RESPONSIVE  —  TABLET
   ============================================================ */
@media (max-width:1024px){
  .container{padding:0 28px}
  .nav-desktop{gap:20px}
  .nav-link{font-size:14px}
  .portfolio-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid .feature-card,
  .feature-grid .feature-card.wide{grid-column:auto}
  .hero{grid-template-columns:40% 60%}
  .hero-text{padding:0 40px}
}

/* ============================================================
   RESPONSIVE  —  MOBILE
   ============================================================ */
@media (max-width:760px){
  .section{padding:56px 0}
  .container{padding:0 20px}

  /* nav */
  .nav-desktop,.btn-provider-desktop{display:none}
  .hamburger{display:flex}
  .header-inner{height:64px}
  .logo{font-size:26px}

  /* hero -> stacked */
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-media img{min-height:auto;height:auto;aspect-ratio:1/1}
  .hero-content{padding:0}
  .hero-content::after{width:90%;height:50%;opacity:.4;bottom:0}
  .hero-text{padding:38px 22px 46px}
  .hero-text h1{font-size:34px}
  .hero-text p{font-size:16px}
  .hero-actions .btn{flex:1;justify-content:center}

  /* portfolio / blog -> single column */
  .portfolio-grid,.blog-grid,.feature-grid{grid-template-columns:1fr;gap:18px}
  .feature-grid .feature-card,.feature-grid .feature-card.wide{grid-column:auto}
  .portfolio-grid,.blog-grid{margin-top:34px}

  /* tailored -> stacked */
  .tailored-grid{grid-template-columns:1fr;gap:28px;margin-top:30px}
  .tailored-media{order:2}

  /* science */
  .science-actions{flex-direction:column}
  .science-actions .btn{justify-content:center}
  .feature-card{min-height:240px}

  /* transforms */
  .transforms-head{flex-direction:column;align-items:flex-start;gap:18px}
  .transforms-head .section-title{font-size:30px}
  .discover-btn{align-self:stretch;justify-content:center}
  .ba-slider{aspect-ratio:1/1}
  .ba-before img{width:100vw}
  .ba-label{font-size:20px}
  .ba-label-before{left:20px}.ba-label-after{right:20px}

  /* provider */
  .provider-panel{padding:46px 22px;border-radius:22px}

  /* footer */
  .footer-inner{grid-template-columns:1fr;gap:34px;padding-top:50px}
  .footer-cols{grid-template-columns:1fr 1fr;gap:22px}
  .footer-bottom-inner{flex-direction:column;gap:14px;padding:20px;text-align:center}
}

@media (max-width:420px){
  .footer-cols{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
}

/* ============================================================
   ABOUT US PAGE
   ============================================================ */
.grad{
  background:linear-gradient(10deg,var(--primary-500) 0%, #9d6be4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- About hero ---- */
.about-hero{
  position:relative;text-align:center;padding:70px 0 0;min-height:1209px;
  background:
    url('../assets/about-hero-bg-figma.png') center top/100% auto no-repeat,
    radial-gradient(120% 95% at 50% 0%, var(--secondary-100) 0%, var(--secondary-50) 50%, #faf7fd 100%);
  border-bottom-left-radius:50px;border-bottom-right-radius:50px;overflow:hidden;
}
.about-hero .container{position:relative;z-index:1}
.about-hero h1{
  font-family:var(--font-head);font-weight:500;color:var(--primary-500);
  font-size:clamp(34px,4.6vw,58px);line-height:1.2;letter-spacing:-.58px;margin:0 auto;max-width:990px;
}
.about-hero h1 .hi{font-style:italic}
.about-hero-sub{
  max-width:670px;margin:14px auto 0;color:#453a55;font-size:18px;font-weight:500;line-height:1.55;
}
.about-hero-faces{display:none;margin-top:28px;justify-content:center;align-items:flex-end}
.about-hero-faces img{
  width:min(1180px,96vw);max-width:none;max-height:none;height:auto;display:block;object-fit:contain;
}

/* ---- Origin ---- */
.origin{background:#fff}
.origin .origin-grid{
  background:linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,246,255,.24) 100%);
  border-radius:24px;padding:50px 30px;
  display:grid;grid-template-columns:488px 1fr;gap:56px;align-items:center;
}
.origin-media{border-radius:24px;overflow:hidden;box-shadow:0 22px 60px rgba(87,59,126,.16)}
.origin-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:488/657}
.origin-body{display:flex;flex-direction:column;gap:24px;max-width:680px}
.origin-pill{
  align-self:flex-start;background:var(--primary-50);color:var(--primary-500);
  font-weight:600;font-size:14px;padding:4px 12px;border-radius:var(--pill);
}
.origin-title{
  font-family:var(--font-head);font-weight:500;color:var(--primary-500);
  font-size:clamp(34px,4vw,58px);line-height:1.4;letter-spacing:-.29px;margin:0;
}
.origin-body p{color:var(--black-400);font-size:18px;line-height:1.45;margin:0}
.origin-btn{
  align-self:flex-start;margin-top:6px;
  background:linear-gradient(28deg,var(--primary-500) 0%, #7f63a6 100%);color:#fbf9f5;font-weight:700;
}
.origin-btn .heart{font-size:.95em;line-height:1}
.origin-btn:hover{filter:brightness(1.07)}

/* ---- Innovation band ---- */
.innovation-band{background:#fff;padding-top:0}
.innovation-panel{
  position:relative;border-radius:24px;overflow:hidden;color:#fff;
  padding:50px;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(90deg, rgba(40,22,55,.30), rgba(60,35,92,.14)),
    url('../assets/innovation-bg.jpg') center/cover no-repeat;
}
.innovation-inner{
  width:100%;max-width:1230px;border:.8px solid rgba(255,255,255,.25);
  border-radius:50px;padding:54px 50px;text-align:center;
  background:linear-gradient(180deg, rgba(227,218,239,.08), rgba(194,176,220,.08));
  backdrop-filter:blur(2px);
}
.innovation-inner h2{
  font-family:var(--font-head);font-weight:700;font-size:clamp(34px,4vw,58px);
  letter-spacing:-.23px;margin-bottom:20px;line-height:1.2;
}
.innovation-inner p{
  max-width:888px;margin:0 auto;color:var(--secondary-100);font-size:18px;font-weight:500;line-height:1.55;
}

/* ---- About responsive ---- */
@media (max-width:1024px){
  .origin .origin-grid{grid-template-columns:380px 1fr;gap:36px}
}
@media (max-width:760px){
  .about-hero{padding-top:40px;min-height:clamp(620px,120vw,760px);background-size:auto 100%;background-position:center bottom;border-bottom-left-radius:28px;border-bottom-right-radius:28px}
  .about-hero-faces{margin-top:26px}
  .origin .origin-grid{grid-template-columns:1fr;gap:28px;padding:28px 20px}
  .origin-media{order:-1}
  .origin-media img{aspect-ratio:4/3}
  .innovation-panel{padding:24px}
  .innovation-inner{padding:40px 22px;border-radius:28px}
}

/* ============================================================
   PRÉIME DERMAFACIAL PAGE
   ============================================================ */
.df-btn-grad{background:linear-gradient(28deg,var(--primary-500) 0%, #7f63a6 100%);color:#fbf9f5;font-weight:700}
.df-btn-grad:hover{filter:brightness(1.07)}
.df-eyebrow{display:inline-block;background:var(--primary-50);color:var(--primary-500);font-weight:600;font-size:13px;padding:4px 12px;border-radius:var(--pill);margin-bottom:14px}

/* ---- DF hero ---- */
.df-hero{
  position:relative;overflow:hidden;
  background:url('../assets/dermafacial-hero-bg-figma.png') center center/cover no-repeat;
}
.df-hero-inner{display:flex;align-items:center;justify-content:flex-end;min-height:550px}
.df-hero .df-hero-media{display:none}
.df-hero-text{width:min(760px,58vw);margin-left:auto}
.df-hero-media{display:flex;justify-content:center;align-items:center;padding:40px 0}
.df-hero-media img{max-height:440px;width:auto;filter:drop-shadow(0 30px 60px rgba(40,20,70,.3))}
.df-hero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(38px,4vw,58px);line-height:1.15;letter-spacing:-.29px;margin-bottom:14px}
.df-hero-text p{font-family:var(--font-body);color:var(--primary-500);font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.4;margin-bottom:26px;max-width:760px}

/* ---- DF about ---- */
.df-about{background:radial-gradient(120% 80% at 0% 0%, var(--secondary-50), #fff 60%)}
.df-about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:54px;align-items:center}
.df-about h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(30px,3.6vw,52px);line-height:1.2;margin-bottom:18px}
.df-about-body p{color:var(--neutral-03);font-size:16px;line-height:1.6;margin-bottom:22px;max-width:560px}
.df-checklist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.df-checklist li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--black-500);font-weight:500}
.df-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--primary-400);color:var(--primary-500);display:flex;align-items:center;justify-content:center;font-size:13px}
.df-about-media{position:relative;display:flex;flex-direction:column;gap:18px}
.df-about-media img{width:100%;border-radius:18px;object-fit:cover;box-shadow:0 18px 44px rgba(87,59,126,.16)}
.df-about-media .img-device{aspect-ratio:1/1;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));object-fit:contain;padding:14px}
.df-about-media .img-treat{aspect-ratio:16/10}

/* ---- DF technologies ---- */
.df-tech{background:linear-gradient(180deg,#fff, #f3edfa)}
.df-tech h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,48px);text-align:center;margin-bottom:30px}
.df-tech-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.df-tab{padding:12px 26px;border-radius:var(--pill);border:1.5px solid var(--primary-500);color:var(--primary-500);font-weight:600;font-size:15px;transition:.2s;background:transparent}
.df-tab.active{background:var(--primary-500);color:#fff}
.df-tech-panel{display:none;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(120deg, rgba(255,255,255,.7), rgba(238,235,242,.5));
  border:1px solid var(--secondary-100);border-radius:24px;padding:44px}
.df-tech-panel.active{display:grid}
.df-tech-info .tech-name{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:24px;margin-bottom:6px}
.df-tech-info .tech-title{font-weight:700;color:var(--black-500);font-size:18px;margin-bottom:12px}
.df-tech-info p{color:var(--neutral-03);font-size:15.5px;line-height:1.55;margin-bottom:16px}
.df-tech-info .tech-benefit-label{font-weight:700;color:var(--primary-500);font-size:14px;margin-bottom:4px}
.df-tech-media{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));aspect-ratio:16/11;display:flex;align-items:center;justify-content:center}
.df-tech-media img{max-width:90%;max-height:80%;object-fit:contain}
.df-play{position:absolute;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(40,20,70,.25);cursor:pointer;transition:.2s}
.df-play:hover{transform:scale(1.08)}
.df-play::after{content:"";border-left:16px solid var(--primary-500);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}

/* ---- DF combination ---- */
.df-comb{position:relative;overflow:hidden;color:#fff;border-radius:0;
  background:linear-gradient(120deg, var(--primary-800), var(--primary-500))}
.df-comb-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center}
.df-comb-text h2{font-family:var(--font-head);font-weight:500;font-size:clamp(28px,3.6vw,48px);line-height:1.2;margin-bottom:18px}
.df-comb-text p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.6;max-width:520px}
.df-comb-media{border-radius:18px;overflow:hidden;align-self:stretch;min-height:340px}
.df-comb-media img{width:100%;height:100%;object-fit:cover}

/* ---- DF 5-step ---- */
.df-step{background:#fff}
.df-step-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:54px;align-items:start}
.df-step h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin-bottom:16px}
.df-step-intro p{color:var(--neutral-03);font-size:16px;line-height:1.6}
.acc{display:flex;flex-direction:column;gap:14px}
.acc-item{border:1px solid var(--secondary-100);border-radius:16px;overflow:hidden;background:#fff;transition:.2s}
.acc-item.open{box-shadow:0 12px 30px rgba(87,59,126,.1);border-color:var(--primary-400)}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-weight:600;font-size:16.5px;color:var(--black-500);text-align:left;background:none}
.acc-icon{flex:0 0 auto;width:22px;height:22px;position:relative}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--primary-500);border-radius:2px;transition:.25s}
.acc-icon::before{top:10px;left:0;width:22px;height:2px}
.acc-icon::after{top:0;left:10px;width:2px;height:22px}
.acc-item.open .acc-icon::after{transform:rotate(90deg);opacity:0}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-item.open .acc-panel{max-height:260px}
.acc-panel p{padding:0 24px 22px;color:var(--neutral-03);font-size:15.5px;line-height:1.6;margin:0}

/* ---- DF why clinics ---- */
.df-why{background:linear-gradient(180deg,#faf7fd,#fff)}
.df-why-head{text-align:center;max-width:760px;margin:0 auto 44px}
.df-why-head h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,48px);line-height:1.2;margin-bottom:16px}
.df-why-head p{color:var(--neutral-03);font-size:16px;margin-bottom:22px}
.df-why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.df-benefits h3{font-size:14px;font-weight:700;color:var(--primary-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px}
.df-benefits ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.df-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--black-500)}
.df-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.df-stat{background:#fff;border:1px solid var(--secondary-100);border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(87,59,126,.06)}
.df-stat .num{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:40px;line-height:1}
.df-stat p{color:var(--neutral-03);font-size:14px;margin-top:8px}
.df-stat.alt{background:linear-gradient(150deg,var(--primary-500),#9d6be4);border:none;color:#fff}
.df-stat.alt .num{color:#fff}
.df-stat.alt p{color:rgba(255,255,255,.85)}

/* ---- DF see difference ---- */
.df-diff{background:#fff}
.df-diff-head{margin-bottom:30px}
.df-diff-head h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,48px);line-height:1.2;margin-bottom:14px}
.df-diff-head p{color:var(--neutral-03);font-size:16px;max-width:560px;margin-bottom:20px}
.df-diff-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:30px;align-items:stretch}
.df-result-list{display:flex;flex-direction:column;gap:16px}
.df-result{background:linear-gradient(120deg,var(--secondary-50),#fff);border:1px solid var(--secondary-100);border-radius:16px;padding:22px 24px}
.df-result h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:19px;margin-bottom:8px}
.df-result .stat-line{font-weight:700;color:var(--black-500);font-size:15px}
.df-result p{color:var(--neutral-03);font-size:14px;margin-top:2px}
.df-disclaimer{color:#9a90a8;font-size:12.5px;margin-top:20px;max-width:780px}

@media (max-width:900px){
  .df-hero-inner,.df-about-grid,.df-tech-panel.active,.df-comb-grid,.df-step-grid,.df-why-grid,.df-diff-grid{grid-template-columns:1fr}
  .df-hero-media{order:-1}
  .df-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .df-hero-inner{min-height:auto;text-align:center}
  .df-hero-text p{margin-left:auto;margin-right:auto}
  .df-about-media{flex-direction:row}
  .df-result-list{gap:12px}
}

/* ============================================================
   SCOPED TABSETS (DermaCeuticals + Product Details)
   ============================================================ */
.tabset-nav{display:flex;gap:12px;flex-wrap:wrap}
.tabset-btn{padding:11px 22px;border-radius:var(--pill);border:1.5px solid var(--primary-500);color:var(--primary-500);font-weight:600;font-size:14px;background:transparent;transition:.2s}
.tabset-btn.active{background:var(--primary-500);color:#fff}
.tabset-panel{display:none}
.tabset-panel.active{display:block}

/* ============================================================
   DERMACEUTICALS LISTING PAGE
   ============================================================ */
.dc-hero{position:relative;overflow:hidden;min-height:550px;
  background:url('../assets/dermaceuticals-hero-bg-figma.png') center center/cover no-repeat}
.dc-hero-inner{position:relative;display:block;min-height:550px}
.dc-hero-text{position:absolute;left:clamp(540px,42.3vw,610px);top:150px;width:min(618px,calc(100vw - 80px));max-width:618px}
.dc-hero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(38px,4vw,58px);line-height:1.15;letter-spacing:0;margin-bottom:14px}
.dc-hero-text p{color:var(--neutral-03);font-size:18px;line-height:1.55;margin-bottom:26px;max-width:540px}

/* regenerative / pure technology */
.dc-regen{background:#fff}
.dc-regen-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.dc-regen h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(30px,3.6vw,52px);line-height:1.2;margin-bottom:24px;max-width:560px}
.dc-regen .tabset-nav{margin-bottom:22px}
.dc-regen-panel p{color:var(--neutral-03);font-size:16px;line-height:1.6;margin-bottom:22px;max-width:540px}
.dc-regen-media{display:flex;justify-content:center;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));border-radius:24px;padding:40px}
.dc-regen-media img{max-height:360px;width:auto}

/* bespoke cards */
.dc-bespoke{background:linear-gradient(180deg,#fff,#f3edfa)}
.dc-bespoke-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.dc-bcard{background:#fff;border:1px solid var(--secondary-100);border-radius:20px;overflow:hidden;transition:.25s}
.dc-bcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(87,59,126,.13)}
.dc-bcard .bmedia{aspect-ratio:16/11;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));display:flex;align-items:center;justify-content:center;overflow:hidden}
.dc-bcard .bmedia img{max-height:86%;width:auto;object-fit:contain}
.dc-bcard h3{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:22px;margin:22px 24px 8px}
.dc-bcard p{margin:0 24px 24px;color:var(--neutral-03);font-size:14.5px;line-height:1.55}

/* why clinics (with image) */
.dc-why{background:linear-gradient(180deg,#faf7fd,#fff)}
.dc-why-top{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;margin-bottom:46px}
.dc-why-img{border-radius:24px;overflow:hidden;box-shadow:0 20px 50px rgba(87,59,126,.16)}
.dc-why-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.dc-why-top h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,48px);line-height:1.2;margin-bottom:16px}
.dc-why-top p{color:var(--neutral-03);font-size:16px;line-height:1.6;margin-bottom:22px;max-width:520px}
.dc-why-actions{display:flex;gap:14px;flex-wrap:wrap}
.dc-why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.dc-stats5{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dc-stats5 .df-stat:first-child{grid-column:span 1}

/* proven results */
.dc-results{background:#fff}
.dc-results-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:stretch;margin-top:30px}
.dc-pure-card{background:linear-gradient(150deg,var(--primary-500),#9d6be4);color:#fff;border-radius:24px;padding:34px;display:flex;flex-direction:column;justify-content:space-between}
.dc-pure-card .tag{display:inline-block;background:rgba(255,255,255,.18);padding:3px 12px;border-radius:var(--pill);font-size:12px;font-weight:600;margin-bottom:16px;align-self:flex-start}
.dc-pure-card h3{font-family:var(--font-head);font-weight:600;font-size:26px;margin-bottom:10px}
.dc-pure-card p{color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.55;margin-bottom:20px}
/* Figma card body is a bullet list, with carousel arrows beside the CTA */
.dc-pure-points{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.dc-pure-points li{position:relative;padding-left:16px;color:rgba(255,255,255,.9);font-size:14.5px;line-height:1.5}
.dc-pure-points li::before{content:"•";position:absolute;left:2px;color:rgba(255,255,255,.9)}
.dc-pure-foot{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.dc-pure-arrows{display:flex;gap:12px}
.dc-pure-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.dc-pure-arrow.solid{background:#fff;border-color:#fff}
.dc-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.dc-prod{background:#fff;border:1px solid var(--secondary-100);border-radius:18px;padding:18px;transition:.2s}
.dc-prod:hover{box-shadow:0 16px 36px rgba(87,59,126,.12);transform:translateY(-4px)}
.dc-prod .pmedia{aspect-ratio:1/1;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}
.dc-prod .pmedia img{max-height:88%;width:auto;object-fit:contain}
.dc-prod .ptag{font-size:11px;font-weight:600;color:var(--primary-400);text-transform:uppercase;letter-spacing:.4px}
.dc-prod h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:17px;margin:4px 0 4px}
.dc-prod p{color:var(--neutral-03);font-size:13px;margin:0}
.dc-viewmore{display:flex;justify-content:center;margin-top:34px}

/* ============================================================
   PRODUCT DETAILS PAGE
   ============================================================ */
.pd-hero{background:#fff;padding-top:30px}
.pd-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.pd-hero-media{background:var(--light-grey);border-radius:24px;display:flex;align-items:center;justify-content:center;padding:40px;aspect-ratio:1/.86}
.pd-hero-media img{max-height:380px;width:auto;filter:drop-shadow(0 24px 44px rgba(87,59,126,.2))}
.pd-hero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(32px,3.8vw,52px);line-height:1.18;letter-spacing:-.3px;margin-bottom:18px}
.pd-hero-text p{color:var(--neutral-03);font-size:16.5px;line-height:1.6;margin-bottom:10px;max-width:520px}
.pd-hero-text .subline{color:var(--primary-400);font-weight:600;margin-bottom:24px}

.pd-whatis{background:linear-gradient(180deg,#fff,#f6f1fb)}
.pd-whatis-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.pd-whatis h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(30px,3.6vw,48px);margin-bottom:18px}
.pd-whatis p{color:var(--neutral-03);font-size:16.5px;line-height:1.6;margin-bottom:24px;max-width:540px}
.pd-whatis-actions{display:flex;gap:14px;flex-wrap:wrap}
.pd-whatis-media{border-radius:24px;overflow:hidden;aspect-ratio:4/3}
.pd-whatis-media img{width:100%;height:100%;object-fit:cover}

.pd-ingred{background:#fff}
.pd-ingred h2,.pd-results h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,48px);text-align:center;margin-bottom:28px}
.pd-ingred .tabset-nav,.pd-results .tabset-nav{justify-content:center;margin-bottom:30px}
.pd-ing-panel,.pd-res-panel{grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(120deg,rgba(255,255,255,.6),rgba(238,235,242,.5));border:1px solid var(--secondary-100);border-radius:24px;padding:44px}
.tabset-panel.active.pd-ing-panel,.tabset-panel.active.pd-res-panel{display:grid}
.pd-ing-panel h3{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:24px;margin-bottom:12px}
.pd-ing-panel p{color:var(--neutral-03);font-size:15.5px;line-height:1.6}
.pd-ing-media{border-radius:18px;overflow:hidden;aspect-ratio:16/11}
.pd-ing-media img{width:100%;height:100%;object-fit:cover}

.pd-results{background:linear-gradient(180deg,#faf7fd,#fff)}
.pd-res-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pd-rstat{background:#fff;border:1px solid var(--secondary-100);border-radius:16px;padding:22px}
.pd-rstat.big{grid-row:span 1;background:linear-gradient(150deg,var(--primary-500),#9d6be4);color:#fff;border:none}
.pd-rstat .num{font-family:var(--font-head);font-weight:600;font-size:34px;color:var(--primary-500);line-height:1}
.pd-rstat.big .num{color:#fff}
.pd-rstat p{font-size:13.5px;color:var(--neutral-03);margin-top:8px}
.pd-rstat.big p{color:rgba(255,255,255,.9)}
.pd-res-disc{color:#9a90a8;font-size:12px;margin-top:14px}

@media (max-width:900px){
  .dc-regen-grid,.dc-why-top,.dc-why-grid,.dc-results-grid,.pd-hero-grid,.pd-whatis-grid,.pd-ing-panel,.pd-res-panel{grid-template-columns:1fr}
  .dc-hero-media,.pd-hero-media{order:-1}
  .dc-bespoke-grid{grid-template-columns:1fr}
  .dc-prod-grid{grid-template-columns:1fr 1fr}
  .dc-stats5{grid-template-columns:1fr 1fr}
  .pd-res-panel .ba-slider{order:-1}
}
@media (max-width:760px){
  .dc-prod-grid{grid-template-columns:1fr 1fr}
  .pd-res-stats{grid-template-columns:1fr}
}

/* before/after (static) for product details */
.pd-ba{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/12}
.pd-ba img{width:100%;height:100%;object-fit:cover}
.pd-res-h{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:24px;margin-bottom:16px}

/* ============================================================
   DERMAPROFESSIONAL — key technologies grid
   ============================================================ */
.dp-tech{background:linear-gradient(180deg,#fff,#f3edfa)}
.dp-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.dp-tech-grid .feature-card{min-height:280px}
.dp-tech-grid .fc-text h4{font-size:20px}
@media (max-width:900px){.dp-tech-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.dp-tech-grid{grid-template-columns:1fr}}

/* ============================================================
   REGENERATIVE ACTIVES + ACTIVE SUB-PAGES
   ============================================================ */
.ra-hero{position:relative;overflow:hidden;background:url('../assets/regenerative-hero-bg-figma.png') center center/cover no-repeat}
.ra-hero-inner{display:flex;align-items:center;justify-content:flex-end;min-height:550px}
.ra-hero-media{display:none;border-radius:0 28px 28px 0;overflow:hidden;box-shadow:0 22px 60px rgba(87,59,126,.14);
  margin-left:calc(50% - 50vw);width:calc(100% + 50vw - 50%)}
.ra-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;min-height:520px}
.ra-hero-text{width:min(560px,48vw);margin-left:auto;margin-right:clamp(20px,8vw,120px)}
.ra-hero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(38px,4vw,56px);line-height:1.15;margin-bottom:18px}
.ra-hero-text p{color:var(--primary-500);font-size:clamp(20px,1.8vw,26px);line-height:1.35;max-width:560px}
.ra-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.ra-card{background:#fff;border:1px solid var(--secondary-100);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;transition:.25s}
.ra-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(87,59,126,.12)}
.ra-ico{width:54px;height:54px;border-radius:14px;background:var(--secondary-50);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px}
.ra-card h3{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:20px;margin-bottom:10px}
.ra-card p{color:var(--neutral-03);font-size:14.5px;line-height:1.55;margin-bottom:18px;flex:1}
.ra-card .pc-link{position:static;transform:none;align-self:flex-start;box-shadow:none}

.scopes{background:linear-gradient(135deg,var(--secondary-50),var(--primary-50));position:relative;overflow:hidden}
.scopes h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,46px);text-align:center;margin-bottom:14px}
.scopes-intro{text-align:center;max-width:760px;margin:0 auto 36px;color:var(--neutral-03);font-size:16px}
.scopes-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;z-index:1}
.scope{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:22px 24px}
.scope.hl{background:#fff;box-shadow:0 14px 34px rgba(87,59,126,.1)}
.scope h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:18px;margin-bottom:6px}
.scope p{color:var(--neutral-03);font-size:14.5px;margin:0}
.scopes-wm{text-align:center;font-family:var(--font-head);font-weight:700;letter-spacing:18px;color:rgba(87,59,126,.12);font-size:clamp(40px,8vw,110px);margin-top:10px}

.ra-redefine{background:#fff}
.ra-redefine-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.ra-redefine h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,46px);margin-bottom:16px}
.ra-redefine p{color:var(--neutral-03);font-size:16px;line-height:1.6;margin-bottom:22px;max-width:520px}
.ra-redefine-media{background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));border-radius:24px;padding:40px;display:flex;justify-content:center}
.ra-redefine-media img{max-height:320px;width:auto}

/* active sub-page dark hero */
.active-hero{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(120deg,var(--primary-900),var(--primary-500));padding:62px 0}
.active-hero::after{content:"";position:absolute;inset:0;background:url('../assets/sphere-b.jpg') right center/cover no-repeat;opacity:.25;pointer-events:none}
.active-hero .container{position:relative;z-index:1}
.active-hero .eyebrow{color:rgba(255,255,255,.7)}
.active-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(34px,4.4vw,60px);margin-bottom:10px}
.active-hero p{font-size:20px;color:rgba(255,255,255,.85)}
.active-scopes{padding:72px 0 64px}
.active-scopes-panel{max-width:1240px;margin:0 auto;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.55);border-radius:24px;padding:52px}
.active-scopes-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:34px}
.active-scope-icon{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary-500);background:rgba(255,255,255,.62);font-size:24px}
.active-scopes h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(30px,3.6vw,48px);line-height:1.12;margin-bottom:10px}
.active-scopes p{color:var(--neutral-03);font-size:15px;line-height:1.55;max-width:940px}
.active-scope-list{display:grid;gap:16px}
.active-scope-item{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.75);border-radius:10px;padding:26px 24px}
.active-scope-item h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:17px;margin-bottom:4px}
.active-scope-item p{font-size:13.5px;margin:0;max-width:none}
.active-adv{background:#fff}
.active-adv-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.active-adv-media{border-radius:24px;overflow:hidden;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50));display:flex;align-items:center;justify-content:center;padding:30px;aspect-ratio:1/1}
.active-adv-media img{max-height:90%;width:auto;object-fit:contain}
.active-adv h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(28px,3.4vw,44px);margin-bottom:16px}
.active-adv p{color:var(--neutral-03);font-size:16px;line-height:1.6;margin-bottom:18px;max-width:540px}

/* ============================================================
   DEVICE PAGES (Skin Analyzer / Nano Pen) helpers
   ============================================================ */
.dev-hero{background:radial-gradient(120% 90% at 100% 0%, var(--secondary-100), var(--secondary-50) 55%, #fff)}
.dev-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;min-height:480px}
.dev-hero-media{display:flex;justify-content:center}
.dev-hero-media img{max-height:400px;width:auto;filter:drop-shadow(0 24px 50px rgba(87,59,126,.22))}
.dev-hero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(32px,4vw,54px);line-height:1.2;margin-bottom:16px}
.dev-hero-text p{color:var(--neutral-03);font-size:17px;line-height:1.6;margin-bottom:24px;max-width:480px}
.device-fullhero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:550px;background:center center/cover no-repeat}
.device-fullhero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(247,242,252,.86) 0%, rgba(247,242,252,.58) 30%, rgba(247,242,252,.08) 58%, transparent 100%)}
.device-fullhero.align-right::after{background:linear-gradient(90deg, transparent 0%, rgba(247,242,252,.08) 42%, rgba(247,242,252,.58) 70%, rgba(247,242,252,.9) 100%)}
.skin-fullhero{background-image:url('../assets/skin-hero-bg-figma.png');background-position:center center}
.skin-fullhero::after{content:none}
.nano-fullhero{background-image:url('../assets/nano-hero.jpg');background-position:center center}
.device-fullhero-inner{position:relative;z-index:1;width:100%;display:flex}
.device-fullhero.align-right .device-fullhero-inner{justify-content:flex-end}
.device-fullhero-text{max-width:520px}
.skin-fullhero .device-fullhero-text{max-width:618px;margin-left:clamp(0px,1.4vw,20px)}
.skin-fullhero .device-fullhero-text p{max-width:584px;color:var(--primary-500);font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.35}
.device-fullhero-text .df-eyebrow{margin-bottom:14px}
.device-fullhero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(34px,4.2vw,56px);line-height:1.15;letter-spacing:0;margin-bottom:16px}
.device-fullhero-text p{color:var(--neutral-03);font-size:18px;line-height:1.6;margin-bottom:26px;max-width:500px}
.dev-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.dev-feat{background:#fff;border:1px solid var(--secondary-100);border-radius:18px;overflow:hidden;transition:.25s}
.dev-feat:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(87,59,126,.12)}
.dev-feat .fmedia{aspect-ratio:3/4;background:var(--light-grey);display:flex;align-items:center;justify-content:center;overflow:hidden}
.dev-feat .fmedia img{width:100%;height:100%;object-fit:cover}
.dev-feat h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:16px;margin:16px 18px 6px}
.dev-feat p{margin:0 18px 18px;color:var(--neutral-03);font-size:13px}
.dev-band{position:relative;overflow:hidden;color:#fff;border-radius:0;background:linear-gradient(120deg,var(--primary-800),var(--primary-500))}
.dev-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dev-band h2{font-family:var(--font-head);font-weight:500;font-size:clamp(26px,3.2vw,42px);margin-bottom:14px}
.dev-band p{color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.6;max-width:480px}
.dev-band-media{display:flex;justify-content:center}
.dev-band-media img{max-height:300px;width:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.3))}

/* ============================================================
   BECOME A PROVIDER (form)
   ============================================================ */
.bp-hero{position:relative;overflow:hidden;color:#fff;text-align:center;background:linear-gradient(120deg,var(--primary-900),var(--primary-500));padding:90px 0}
.bp-hero::after{content:"";position:absolute;inset:0;background:url('../assets/helix-b.jpg') right center/contain no-repeat;opacity:.3}
.bp-hero .container{position:relative;z-index:1}
.bp-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(34px,4.4vw,58px);margin-bottom:12px}
.bp-hero p{font-size:18px;color:rgba(255,255,255,.85);max-width:620px;margin:0 auto}
.bp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.bp-info h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(26px,3vw,40px);margin-bottom:10px}
.bp-info>p{color:var(--neutral-03);font-size:16px;margin-bottom:24px}
.bp-contact{display:flex;flex-direction:column;gap:18px}
.bp-contact li{list-style:none;display:flex;gap:14px;align-items:flex-start;color:var(--neutral-03);font-size:15px}
.bp-contact .ci{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--secondary-50);display:flex;align-items:center;justify-content:center;color:var(--primary-500)}
.bp-form{background:#fff;border:1px solid var(--secondary-100);border-radius:24px;padding:34px;box-shadow:0 18px 44px rgba(87,59,126,.08)}
.bp-form h3{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:20px;margin-bottom:20px}
.bp-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.bp-field label{font-size:13px;font-weight:600;color:var(--black-500)}
.bp-field input,.bp-field select,.bp-field textarea{border:1.5px solid var(--secondary-100);border-radius:10px;padding:12px 14px;font-family:var(--font-body);font-size:14.5px;color:var(--black-500);background:#fff}
.bp-field input:focus,.bp-field select:focus,.bp-field textarea:focus{outline:none;border-color:var(--primary-400)}
.bp-field textarea{resize:vertical;min-height:110px}
.bp-form .btn{width:100%;justify-content:center;margin-top:6px}
.bp-help{margin-top:46px}
.bp-help-panel{position:relative;overflow:hidden;border-radius:28px;color:#fff;padding:48px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:linear-gradient(120deg,var(--primary-800),var(--primary-500))}
.bp-help-panel h2{font-family:var(--font-head);font-weight:600;font-size:clamp(24px,3vw,40px);margin-bottom:10px}
.bp-help-panel p{color:rgba(255,255,255,.85);font-size:15px}
.bp-help-img{max-width:280px;border-radius:18px;overflow:hidden}
.bp-help-img img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   BLOGS
   ============================================================ */
.bl-hero{position:relative;overflow:hidden;color:#fff;text-align:center;background:linear-gradient(118deg, rgba(48,24,88,.88) 0%, rgba(98,48,154,.72) 52%, rgba(126,70,180,.48) 100%), url('../assets/helix-b.jpg') center/cover no-repeat;padding:96px 0}
.bl-hero::after{content:none}
.bl-hero .container{position:relative;z-index:1}
.bl-kicker{font-weight:600;font-size:15px;margin-bottom:20px;color:rgba(255,255,255,.92)}
.bl-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(34px,4.4vw,58px);margin-bottom:12px}
.bl-hero p{font-size:18px;color:rgba(255,255,255,.86);max-width:820px;margin:0 auto}
.bl-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bl-cat{min-height:192px;background:#fff;border:1px solid var(--secondary-100);border-radius:10px;padding:34px 28px;text-align:center;transition:.2s;display:flex;flex-direction:column;justify-content:center}
.bl-cat:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(87,59,126,.1)}
.bl-cat h3{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:20px;margin-bottom:8px}
.bl-cat p{color:var(--neutral-03);font-size:14px}
.bl-latest-head{display:grid;grid-template-columns:minmax(220px,1fr) minmax(560px,820px);gap:28px;align-items:center;margin-bottom:30px}
.bl-latest-head h2{font-family:var(--font-head);font-weight:500;color:var(--black-500);font-size:clamp(30px,3.4vw,44px);line-height:1.15}
.bl-latest-head .bl-filterbar{max-width:none;margin:0}
.bl-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.bl-news{margin-top:20px}
.bl-hero + .section,.blog.section,.bl-news{background:linear-gradient(180deg,#fbf7ff 0%,#f0e6fb 100%)}
.bl-news-panel{position:relative;overflow:hidden;min-height:300px;border-radius:28px;color:#fff;padding:64px 70px 56px 470px;text-align:left;background:linear-gradient(120deg,var(--primary-800),#8d55d7)}
.bl-news-panel::before{content:"";position:absolute;left:34px;bottom:-52px;width:420px;height:330px;background:url('../assets/about-hero-bg-figma.png') left bottom/430px auto no-repeat;pointer-events:none}
.bl-news-panel h2{font-family:var(--font-head);font-weight:600;font-size:clamp(26px,3.2vw,44px);margin-bottom:12px}
.bl-news-panel p{color:rgba(255,255,255,.85);max-width:560px;margin:0 0 24px}
.bl-news-form{display:flex;gap:12px;max-width:520px;margin:0}
.bl-news-form input{flex:1;border:none;border-radius:var(--pill);padding:14px 20px;font-family:var(--font-body);font-size:15px}
.bl-news-form input:focus{outline:none}

@media (max-width:900px){
  .ra-hero-inner,.ra-redefine-grid,.active-adv-grid,.dev-hero-inner,.dev-band-grid,.bp-grid,.bp-help-panel{grid-template-columns:1fr}
  .scopes-grid{grid-template-columns:1fr}
  .ra-cards,.bl-cats,.bl-posts{grid-template-columns:1fr}
  .dev-feat-grid{grid-template-columns:1fr 1fr}
  .ra-hero-media,.dev-hero-media{order:-1}
  .bp-help-img{max-width:100%}
}
@media (max-width:820px){
  .device-fullhero{min-height:auto;background-position:center top;background-size:140% auto;padding-top:48vw;align-items:flex-end}
  .skin-fullhero{background-position:58% top}
  .nano-fullhero{background-position:42% top}
  .device-fullhero::after,.device-fullhero.align-right::after{background:linear-gradient(180deg, transparent 0%, rgba(247,242,252,.18) 44%, rgba(247,242,252,.92) 76%, rgba(247,242,252,.98) 100%)}
  .device-fullhero-inner{display:block}
  .device-fullhero-text{max-width:100%;background:rgba(247,242,252,.92);border-radius:18px;padding:24px;backdrop-filter:blur(2px)}
}
@media (max-width:560px){
  .dev-feat-grid{grid-template-columns:1fr 1fr}
  .bp-form .row{grid-template-columns:1fr}
  .bl-news-form{flex-direction:column}
  .bl-news-panel{padding:260px 24px 34px;text-align:center}
  .bl-news-panel::before{left:50%;transform:translateX(-50%);bottom:auto;top:8px;width:360px;height:250px;background-size:360px auto;background-position:center bottom}
  .bl-news-panel p,.bl-news-form{margin-left:auto;margin-right:auto}
}

/* ============================================================
   AUDIT FIXES — comparison, blog chips, polish
   ============================================================ */
.np-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;margin:0 auto}
.np-col{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:28px}
.np-col.hl{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.np-col h4{font-family:var(--font-head);font-weight:600;font-size:19px;margin-bottom:14px;color:#fff}
.np-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.np-col li{color:rgba(255,255,255,.9);font-size:14.5px}

.bl-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:24px 0 6px}
.bl-chip{padding:9px 20px;border-radius:var(--pill);border:1.5px solid var(--secondary-100);background:#fff;color:var(--primary-500);font-weight:600;font-size:14px;transition:.2s}
.bl-chip.active,.bl-chip:hover{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}

@media (max-width:560px){.np-compare{grid-template-columns:1fr}}

/* ============================================================
   REACT APP — scroll reveal, transitions, legal pages
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.reveal-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

.legal{max-width:820px}
.legal h2{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:24px;margin:30px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--neutral-03);font-size:16px;line-height:1.7;margin-bottom:8px}

.btn{will-change:transform}
.btn:active{transform:translateY(1px)}
/* smoother elevation on interactive cards */
.product-card,.dc-bcard,.blog-card,.ra-card,.dev-feat,.dc-prod,.bl-cat,.feature-card{will-change:transform}

/* ============================================================
   PRODUCT PAGES (data-driven)
   ============================================================ */
.btn-outline-light{background:transparent;border:1.6px solid var(--primary-500);color:var(--primary-500)}
.btn-outline-light:hover{background:var(--primary-500);border-color:var(--primary-500);color:#fff}

.pp-hero{position:relative;overflow:hidden;color:var(--black-500);background:#fff}
.pp-hero::after{content:none}
.pp-breadcrumb{display:flex;align-items:center;gap:8px;padding-top:18px;color:var(--primary-400);font-size:12px;font-weight:600}
.pp-breadcrumb a{color:var(--primary-400)}
.pp-breadcrumb a:hover{color:var(--primary-500)}
.pp-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(520px,560px) minmax(0,1fr);gap:70px;align-items:center;min-height:430px;padding-top:36px;padding-bottom:64px}
.pp-eyebrow{display:inline-block;font-size:12px;font-weight:600;color:var(--primary-400);margin-bottom:14px;border-bottom:1px solid var(--secondary-100);padding-bottom:3px}
.pp-eyebrow:hover{color:var(--primary-500)}
.pp-hero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(32px,3.5vw,46px);line-height:1.18;letter-spacing:0;margin-bottom:14px;max-width:620px}
.pp-tag{font-size:15px;line-height:1.55;color:var(--neutral-03);max-width:560px;margin-bottom:22px}
.pp-cta{display:flex;gap:14px;flex-wrap:wrap}
.pp-hero-media{display:flex;justify-content:center;align-items:center;background:var(--light-grey);border-radius:14px;aspect-ratio:1.04/1;padding:18px}
.pp-hero-media img{max-height:430px;width:auto;filter:drop-shadow(0 24px 42px rgba(87,59,126,.18))}

.pp-section{padding:74px 0}
.pp-section:nth-of-type(even){background:#fff}
.pp-overview{max-width:none}
.pp-overview,.pp-ing-section,.pp-clinical-section{background:linear-gradient(180deg,#fbf7ff 0%,#f3eafb 100%)}
.pp-split{display:grid;grid-template-columns:1fr .82fr;gap:44px;align-items:center;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.82);border-radius:20px;padding:44px}
.pp-overview h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(30px,3.4vw,46px);margin-bottom:18px}
.pp-overview p{color:var(--neutral-03);font-size:16px;line-height:1.65;max-width:560px}
.pp-overview-media{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.pp-overview-media img{width:100%;height:100%;object-fit:cover}

.pp-ing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
.pp-ing{display:flex;gap:16px;background:#fff;border:1px solid var(--secondary-100);border-radius:16px;padding:22px 24px;align-items:flex-start}
.pp-ing-ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--primary-500),var(--primary-300))}
.pp-ing h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:17px;margin-bottom:4px}
.pp-ing p{color:var(--neutral-03);font-size:14.5px;line-height:1.55;margin:0}
.pp-tab-pills{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 28px}
.pp-tab-pills-center{margin-top:22px}
.pp-tab-pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--primary-500);color:var(--primary-500);background:#fff;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:700;line-height:1}
.pp-tab-pill.active{background:var(--primary-500);color:#fff}
.pp-ing-feature{display:grid;grid-template-columns:1fr .88fr;gap:44px;align-items:center;max-width:1120px;margin:0 auto;background:rgba(255,255,255,.72);border-radius:20px;padding:42px}
.pp-ing-feature h3{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:22px;margin-bottom:12px}
.pp-ing-feature p{color:var(--neutral-03);font-size:15px;line-height:1.6;max-width:460px}

.pp-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pp-chip{background:#fff;border:1.5px solid var(--secondary-100);border-radius:var(--pill);padding:12px 22px;color:var(--black-500);font-size:15px;font-weight:500;box-shadow:0 6px 18px rgba(87,59,126,.06)}

.pp-clinical-section .section-title{line-height:1.18}
.pp-clinical-panel{display:grid;grid-template-columns:1fr .78fr;gap:36px;align-items:center;max-width:1120px;margin:0 auto;background:rgba(255,255,255,.62);border-radius:24px;padding:42px}
.pp-clinical-panel h3{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:30px;margin-bottom:22px}
.pp-results{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:0}
.pp-result{background:rgba(255,255,255,.88);border:1px solid var(--secondary-100);border-radius:12px;padding:20px 18px;min-height:110px}
.pp-metric{display:block;font-family:var(--font-head);font-weight:700;color:var(--primary-500);font-size:30px;line-height:1;margin-bottom:8px}
.pp-result p{color:var(--neutral-03);font-size:13.5px;line-height:1.45;margin:0}

.pp-proto{margin-top:30px;display:grid;gap:24px}
.pp-proto-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(87,59,126,.08)}
.pp-proto-table th{background:var(--primary-500);color:#fff;text-align:left;padding:16px 24px;font-family:var(--font-head);font-weight:600;font-size:15px}
.pp-proto-table td{padding:15px 24px;border-bottom:1px solid var(--secondary-50);color:var(--black-500);font-size:15px}
.pp-proto-table td:first-child{font-weight:700;color:var(--primary-500);width:120px}
.pp-proto-notes{list-style:none;display:grid;gap:10px}
.pp-proto-notes li{color:var(--neutral-03);font-size:15px;display:flex;gap:10px}

.pp-who{max-width:760px;margin-top:24px}
.pp-steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:30px;max-width:760px}
.pp-step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--secondary-100);border-radius:14px;padding:18px 22px}
.pp-step-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--primary-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.pp-step p{margin:0;color:var(--neutral-03);font-size:15.5px;line-height:1.5}

.pp-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.pp-rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--secondary-100);border-radius:18px;overflow:hidden;padding-bottom:20px;transition:.25s;height:100%}
.pp-rel-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(87,59,126,.14)}
.pp-rel-media{aspect-ratio:1/1;background:linear-gradient(150deg,var(--primary-900),var(--primary-500));display:flex;align-items:center;justify-content:center;padding:18px;margin-bottom:16px}
.pp-rel-media img{max-height:170px;width:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.pp-rel-card h4{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:16px;margin:0 20px 6px}
.pp-rel-card p{color:var(--neutral-03);font-size:13px;margin:0 20px 12px;flex:1}
.pp-rel-card .pc-link{position:static;transform:none;box-shadow:none;margin:0 20px}

@media (max-width:900px){
  .pp-hero-inner{grid-template-columns:1fr;text-align:center}
  .pp-hero-media{order:-1}
  .pp-cta{justify-content:center}
  .pp-ing-grid{grid-template-columns:1fr}
  .pp-results{grid-template-columns:1fr 1fr}
  .pp-rel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.pp-results,.pp-rel-grid{grid-template-columns:1fr}}

/* ============================================================
   BACKGROUND POLISH — match Figma's brighter, textured dark sections
   ============================================================ */
.bp-hero, .bl-hero, .dev-band{
  background:
    radial-gradient(72% 125% at 86% 0%, rgba(196,92,214,.45) 0%, transparent 55%),
    linear-gradient(110deg,#2f1d4d 0%,#5b2d8e 52%,#8e3fb5 100%) !important;
}
/* let the decorative overlays read a touch stronger */
.bp-hero::after{opacity:.4}
.bl-hero::after{opacity:.28}

/* ===== Regen family — match reference (light lilac pages, helix hero, full-bleed image) ===== */
.page-regen{background:linear-gradient(180deg,#f4edfb 0%,#ece1f7 50%,#f3ecfb 100%)}
.active-hero{
  background:
    linear-gradient(118deg, rgba(48,24,88,.88) 0%, rgba(98,48,154,.72) 52%, rgba(126,70,180,.48) 100%),
    url('../assets/helix-b.jpg') center/cover no-repeat !important;
}
.active-hero::after{content:none}
/* let lilac page wash show through the content sections */
.page-regen .active-adv,
.page-regen .ra-redefine,
.page-regen .df-step,
.page-regen .section{background:transparent !important}
.page-regen .active-adv-media,
.page-regen .ra-redefine-media{background:linear-gradient(160deg,#fff,var(--secondary-50))!important}
.page-regen .active-adv-grid,
.page-regen .ra-redefine-grid{background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.58);border-radius:24px;padding:44px}
.page-regen .ra-redefine-grid{align-items:center}
/* product detail pages intentionally stay white to match the Figma detail template */
.pp-hero{background:#fff}

/* ============================================================
   COOKIE BAR / FORM SUCCESS / 404
   ============================================================ */
/* NOTE: centered via auto margins (NOT transform) — Framer Motion animates transform,
   which would otherwise clobber translateX(-50%) and push the bar off-screen. */
.cookie-bar{position:fixed;left:0;right:0;bottom:18px;margin-inline:auto;z-index:200;
  width:min(960px,calc(100% - 28px));display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--secondary-100);border-radius:18px;padding:18px 52px 18px 24px;
  box-shadow:0 18px 50px rgba(40,22,55,.22)}
.cookie-bar p{margin:0;color:var(--neutral-03);font-size:14.5px;flex:1;min-width:220px}
.cookie-bar a{color:var(--primary-500);font-weight:600;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-actions .btn{padding:10px 22px}
.cookie-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;border:none;
  background:var(--light-grey);color:var(--primary-500);font-size:17px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.2s}
.cookie-close:hover{background:var(--secondary-100)}

.form-success{background:#fff;border:1px solid var(--secondary-100);border-radius:18px;padding:40px 30px;text-align:center;
  min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:0 14px 36px rgba(87,59,126,.08)}
.form-success-ico{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary-500),var(--primary-300));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
.form-success p{margin:0;color:var(--black-500);font-size:16px;max-width:380px}
.form-note{margin:14px 0 0;color:var(--primary-500);font-weight:600;font-size:14.5px;text-align:center}

.notfound{min-height:62vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, var(--secondary-100), #fff 70%)}
.notfound-inner{text-align:center;max-width:600px;padding:80px 20px}
.nf-code{font-family:var(--font-head);font-weight:700;font-size:clamp(72px,12vw,140px);line-height:1;
  background:linear-gradient(120deg,var(--primary-500),#b154c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(26px,3.4vw,40px);margin:10px 0 12px}
.notfound p{color:var(--neutral-03);font-size:17px;margin-bottom:26px}
.nf-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch}.cookie-actions .btn{flex:1;justify-content:center}}

/* ============================================================
   BLOG — filter chips, cards, article pages
   ============================================================ */
.blog-card{display:flex;flex-direction:column;text-decoration:none}
.blog-media{position:relative}
.blog-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--primary-500);
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:var(--pill);backdrop-filter:blur(4px)}
.blog-card .blog-meta{margin:auto 22px 20px;color:var(--neutral-03);font-size:12.5px;font-weight:600;letter-spacing:.02em;padding-top:4px}
.blog-card p{margin:0 22px 14px}

button.bl-cat{width:100%;font-family:inherit;cursor:pointer;display:block}
.bl-empty{text-align:center;color:var(--neutral-03);font-size:16px;padding:40px 0}
.bl-filterbar{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:14px;max-width:830px;margin:28px 0 34px auto}
.bl-filterbar input,.bl-filterbar select{
  height:48px;border:1px solid var(--secondary-100);border-radius:8px;background:#fff;color:var(--neutral-03);
  font-family:var(--font-body);font-size:14px;padding:0 16px;box-shadow:0 8px 22px rgba(87,59,126,.04)
}
.bl-filterbar input:focus,.bl-filterbar select:focus{outline:none;border-color:var(--primary-400)}

/* article page */
.article-hero{position:relative;overflow:hidden;color:#fff;padding:84px 0 70px;
  background:radial-gradient(72% 125% at 86% 0%, rgba(196,92,214,.45) 0%, transparent 55%),
    linear-gradient(110deg,#2f1d4d 0%,#5b2d8e 52%,#8e3fb5 100%)}
.article-hero-inner{max-width:820px}
.article-back{display:inline-block;color:rgba(255,255,255,.8);font-size:14px;font-weight:600;margin-bottom:22px}
.article-back:hover{color:#fff}
.article-cat{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:var(--pill);margin-bottom:16px}
.article-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(30px,4vw,50px);line-height:1.15;margin-bottom:14px}
.article-meta{color:rgba(255,255,255,.82);font-size:15px}
.article-figure{margin:-44px auto 0;max-width:900px}
.article-figure img{width:100%;border-radius:20px;box-shadow:0 24px 60px rgba(40,22,55,.22);aspect-ratio:16/10;object-fit:cover;object-position:center 22%;display:block}
@media (max-width:560px){.article-figure img{aspect-ratio:4/3}}
.article-body{max-width:760px;padding:46px 20px 20px}
.article-lead{font-size:20px;line-height:1.6;color:var(--black-500);font-weight:500;margin-bottom:26px}
.article-body h2{font-family:var(--font-head);font-weight:600;color:var(--primary-500);font-size:26px;margin:34px 0 12px}
.article-body p{color:var(--neutral-03);font-size:17px;line-height:1.75;margin-bottom:18px}
.article-cta{margin-top:40px;padding:34px;border-radius:20px;text-align:center;background:linear-gradient(160deg,var(--secondary-50),var(--primary-50))}
.article-cta p{font-family:var(--font-head);color:var(--primary-500);font-size:20px;margin-bottom:16px}
.bl-related{background:linear-gradient(180deg,#faf7fd,#fff)}
.bl-related .bl-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
@media (max-width:900px){.bl-related .bl-posts{grid-template-columns:1fr}.article-figure{margin-top:-30px}}

/* DermaProfessional hero — honeycomb pattern (matches PDF) */
.dp-hexhero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('../assets/hex-pattern.png') left top/auto 100% repeat-x;opacity:.7;
  -webkit-mask:linear-gradient(105deg,#000 0%,#000 38%,transparent 62%);
  mask:linear-gradient(105deg,#000 0%,#000 38%,transparent 62%)}
.dp-hexhero .container{position:relative;z-index:1}

/* DermaProfessional — full-bleed composed hero (matches Figma 8334-7623) */
.dp-fullhero{position:relative;overflow:hidden;display:block;min-height:550px;
  background:url('../assets/dermaprofessional-hero-bg-figma.png') center center/cover no-repeat}
.dp-fullhero::after{content:none}
.dp-fullhero .container{position:relative;z-index:1;width:100%;min-height:550px}
.dp-fullhero-text{position:absolute;left:clamp(540px,42.3vw,610px);top:154px;width:min(760px,calc(100vw - 80px));max-width:760px;margin-left:0}
.dp-fullhero-text .df-eyebrow{margin-bottom:14px}
.dp-fullhero-text h1{font-family:var(--font-head);font-weight:500;color:var(--primary-500);
  font-size:clamp(38px,3.8vw,56px);line-height:1.15;letter-spacing:0;margin-bottom:16px;white-space:nowrap}
.dp-fullhero-text p{color:var(--neutral-03);font-size:18px;line-height:1.6;margin-bottom:26px;max-width:620px}
.dp-fullhero-text .btn{display:none}
@media (max-width:820px){
  .dc-hero,.dp-fullhero{min-height:auto;background-position:center top;background-size:140% auto;
    padding-top:46vw;align-items:flex-end}
  .dc-hero-inner,.dp-fullhero .container{min-height:auto}
  .dc-hero-text,.dp-fullhero-text{position:relative;left:auto;top:auto;width:auto;margin:0;max-width:100%;background:rgba(247,242,252,.92);
    border-radius:18px;padding:24px;backdrop-filter:blur(2px)}
  .dp-fullhero-text h1{white-space:normal}
}

/* ============================================================
   FIGMA PAGE PASS — shared section shells and hero proportions
   ============================================================ */
.df-about,
.dc-regen,
.df-tech,
.dp-tech,
.pd-whatis,
.pp-overview,
.pp-ing-section,
.pp-clinical-section,
.scopes,
.bl-hero + .section,
.blog.section,
.bl-news{
  background:
    radial-gradient(circle at 24px 24px, rgba(126,92,171,.08) 0 8px, transparent 9px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf7ff 0%,#f2e8fb 100%) !important;
}

.df-about{padding:56px 0 96px}
.df-about-grid{
  max-width:1280px;
  min-height:620px;
  grid-template-columns:1fr .96fr;
  gap:64px;
  background:linear-gradient(110deg,rgba(255,255,255,.78),rgba(250,244,255,.64));
  border:1px solid rgba(255,255,255,.82);
  border-radius:28px;
  padding:58px 58px;
  box-shadow:0 18px 48px rgba(87,59,126,.07);
}
.df-about-media .img-device{display:none}
.df-about-media{gap:0}
.df-about-media img{box-shadow:none;border-radius:16px}
.df-about-media .img-treat{aspect-ratio:1/1;object-fit:cover}

.dc-regen{padding-top:88px;padding-bottom:88px}
.dc-regen-media{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.72);border-radius:20px}
.df-tech,.dp-tech{padding-top:86px;padding-bottom:96px}

.nano-fullhero .device-fullhero-text{
  max-width:610px;
  margin-left:clamp(520px,43vw,620px);
}
.nano-fullhero .device-fullhero-text p{
  color:var(--primary-500);
  font-size:clamp(20px,1.8vw,26px);
  line-height:1.35;
  max-width:610px;
}

.bp-hero,
.bl-hero,
.active-hero{
  min-height:430px;
  display:flex;
  align-items:center;
  padding:0;
  background:
    linear-gradient(118deg,rgba(38,20,66,.92) 0%,rgba(86,42,137,.78) 54%,rgba(151,75,185,.58) 100%),
    url('../assets/helix-b.jpg') center/cover no-repeat !important;
}
.bp-hero::after,
.bl-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:radial-gradient(30% 50% at 90% 55%, rgba(255,255,255,.28), transparent 70%);
}
.active-hero::after{content:none}
.bp-hero .container,
.bl-hero .container,
.active-hero .container{position:relative;z-index:1}
.active-hero p{font-size:17px;line-height:1.55;max-width:940px;margin:0 auto;color:rgba(255,255,255,.88)}

.ra-hero + .section{padding-top:88px;padding-bottom:36px}
.ra-hero + .section .section-title{text-align:left;margin-left:0}
.ra-cards{gap:24px}
.ra-card{
  min-height:340px;
  border-radius:18px;
  padding:36px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(250,242,255,.64));
  border-color:rgba(255,255,255,.78);
  box-shadow:0 16px 42px rgba(87,59,126,.07);
}
.ra-ico{width:86px;height:86px;background:transparent;color:var(--primary-500);font-size:44px;margin-bottom:18px}
.ra-ico svg{width:76px;height:76px;stroke-width:1.45}
.ra-card h3{font-size:24px}
.ra-card p{font-size:16px;line-height:1.55}
.ra-card .pc-link{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--pill);
  padding:12px 24px;
  color:var(--black-500);
}

.scopes .container{
  max-width:1280px;
  background:linear-gradient(110deg,rgba(255,255,255,.66),rgba(250,244,255,.52));
  border:1px solid rgba(255,255,255,.82);
  border-radius:34px;
  padding:58px 64px;
}
.scopes{padding-top:46px}
.scopes h2{text-align:left;max-width:850px}
.scopes-intro{text-align:left;margin-left:0}

.active-scopes{padding:82px 0 86px}
.active-scopes-panel{max-width:1280px;border-radius:30px;padding:58px}
.active-scope-icon{width:76px;height:76px;font-size:48px;background:transparent}
.active-scope-list{gap:18px}
.active-scope-item{border-radius:12px}

.pp-hero-inner{
  grid-template-columns:minmax(560px,600px) minmax(0,1fr);
  gap:86px;
  min-height:670px;
  padding-top:58px;
  padding-bottom:80px;
}
.pp-hero-media{border-radius:14px;padding:22px;overflow:hidden}
.pp-hero-media img{max-height:570px}
.pp-hero-dc .pp-hero-media img{transform:scale(1.14)}
.pp-split{border-radius:28px;padding:58px;background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.82)}

.bp-hero + .section{
  background:
    radial-gradient(circle at 24px 24px, rgba(126,92,171,.08) 0 8px, transparent 9px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf7ff 0%,#f4ebfb 100%) !important;
}
.origin,
.innovation-band{
  background:
    radial-gradient(circle at 24px 24px, rgba(126,92,171,.08) 0 8px, transparent 9px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf7ff 0%,#f3eafb 100%) !important;
}
.origin .origin-grid{
  background:linear-gradient(110deg,rgba(255,255,255,.80),rgba(250,244,255,.58));
  border:1px solid rgba(255,255,255,.82);
}

@media (max-width:900px){
  .df-about-grid{min-height:auto;padding:34px 24px}
  .nano-fullhero .device-fullhero-text{margin-left:0}
  .bp-hero,.bl-hero,.active-hero{min-height:320px;padding:64px 0}
  .ra-hero + .section .section-title{text-align:center}
  .bl-latest-head{grid-template-columns:1fr}
  .bl-filterbar{grid-template-columns:1fr;margin-left:0;max-width:none}
}

/* ============================================================
   FIGMA FEEDBACK ROUND (Jul 07) — nav dot, portfolio, science,
   transforms, CTA glass, blog, origin, innovation, DF sections
   ============================================================ */

/* --- nav active: dot instead of dash --- */
.nav-link.active::after{
  left:50%;right:auto;bottom:-4px;width:5px;height:5px;border-radius:50%;
  transform:translateX(-50%);background:var(--primary-500);
}

/* --- shared eyebrow chip --- */
.eyebrow-chip{
  display:inline-block;background:#fff;border:1px solid var(--secondary-100);
  color:var(--primary-500);font-weight:600;font-size:13px;letter-spacing:.02em;
  padding:7px 16px;border-radius:var(--pill);box-shadow:0 4px 14px rgba(87,59,126,.08);
  margin-bottom:14px;
}

/* --- Our Portfolio: glassy cards, big logos, blended product media --- */
.portfolio .product-card{
  background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(247,240,251,.55) 100%);
  border:1px solid rgba(255,255,255,.85);border-radius:26px;
  padding:34px 24px 56px;box-shadow:0 18px 44px rgba(87,59,126,.10);
  backdrop-filter:blur(6px);
}
.pc-logo-img{height:64px;margin-bottom:10px}
.pc-desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15.5px;color:#9b7fc0;margin:6px 0 18px;
}
.pc-media{background:none !important;border-radius:0;aspect-ratio:auto;overflow:visible}
.pc-media::after{content:none}
.pc-media img{width:100%;max-height:none;height:auto;object-fit:contain;position:relative;z-index:1;border-radius:12px}

/* --- Science: white pill sub-headline (dotted bg already present) --- */
.science-pill{
  display:table;margin:16px auto 0;background:#fff;color:var(--primary-500);
  font-weight:700;font-size:16px;padding:9px 22px;border-radius:var(--pill);
  box-shadow:0 6px 20px rgba(87,59,126,.10);text-align:center;
}
.science .section-sub{max-width:1100px}

/* --- Transforms: white rounded card container on light bg --- */
.transforms{background:linear-gradient(180deg,#f6f0fb 0%,#efe7f8 100%);padding:56px 0}
.transforms > .container{
  background:#fff;border-radius:30px;padding:52px 48px 40px;
  box-shadow:0 20px 55px rgba(87,59,126,.10);
}
.transforms .section-title{font-weight:500}
.transforms .ba-slider{border-radius:22px;overflow:hidden}
@media (max-width:700px){.transforms > .container{padding:30px 18px 26px;border-radius:20px}}

/* --- Provider CTA: purple bokeh section + big glass rounded panel --- */
.provider-cta{
  padding:110px 0;text-align:center;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(42% 60% at 82% 22%, rgba(196,120,230,.35) 0%, transparent 65%),
    radial-gradient(38% 52% at 12% 82%, rgba(120,70,190,.5) 0%, transparent 65%),
    linear-gradient(118deg,#5b2fa0 0%,#6e3ab4 48%,#7d43c4 100%);
}
.provider-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../assets/innovation-bg.jpg') center/cover no-repeat;
  opacity:.16;mix-blend-mode:screen;
}
.provider-panel{
  position:relative;z-index:1;max-width:1050px;margin:0 auto;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:46px;padding:78px 60px 60px;backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(30,10,60,.25);
}
.provider-panel h2{font-weight:700;font-size:clamp(30px,3.8vw,54px)}
.provider-panel p{max-width:820px;font-size:17px;color:rgba(255,255,255,.88)}
.provider-panel .btn-light{background:#fff;color:var(--primary-500);font-weight:700;padding:15px 30px}
/* Skin Analyzer's Figma CTA shows two white pills side by side */
.provider-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.provider-cta-actions .btn-cta-ghost{background:#fff;color:var(--primary-500);font-weight:700;padding:15px 30px;border-radius:var(--pill)}
.provider-foot{font-size:15px;color:rgba(255,255,255,.9)}
.provider-foot a{
  text-decoration:none;background:rgba(255,255,255,.16);border-radius:var(--pill);
  padding:6px 14px;margin-left:6px;color:#fff;font-weight:600;
}
@media (max-width:700px){.provider-panel{padding:44px 22px;border-radius:28px}}

/* --- Blog: light section, borderless cards, Read More --- */
.blog{background:linear-gradient(180deg,#faf6fd 0%,#f2eafa 100%)}
.blog-card{background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none}
.blog-card:hover{transform:translateY(-4px);box-shadow:none}
.blog-media{border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(87,59,126,.12)}
.blog-card h3{margin:20px 4px 8px;font-size:20px}
.blog-card p{margin:0 4px 12px}
.blog-card .blog-meta{margin:0 4px 6px;display:block}
.blog-read{
  display:inline-block;margin:2px 4px 0;color:var(--primary-500);font-weight:700;font-size:14px;
}
.blog-read .arrow{transition:transform .2s;display:inline-block}
.blog-card:hover .blog-read .arrow{transform:translateX(4px)}

/* --- About: Origin white rounded card + light half dots --- */
.origin{
  background:
    radial-gradient(circle at 24px 24px, rgba(126,92,171,.05) 0 7px, transparent 8px) 0 0/52px 52px,
    linear-gradient(180deg,#fbf7ff 0%,#f3eafb 100%) !important;
}
.origin .origin-grid{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.9);
  border-radius:34px;padding:46px;box-shadow:0 22px 60px rgba(87,59,126,.10);
}
.origin-btn{background:linear-gradient(120deg,var(--primary-500),#8a55c8);color:#fff}
@media (max-width:700px){.origin .origin-grid{padding:24px;border-radius:22px}}

/* --- About: Innovation taller + harder blur panel --- */
.innovation-panel{min-height:430px;padding:60px 50px}
.innovation-inner{
  background:rgba(24,12,40,.38);backdrop-filter:blur(14px);
  border-radius:40px;padding:70px 54px;border:1px solid rgba(255,255,255,.30);
}
@media (max-width:700px){.innovation-panel{min-height:340px;padding:26px}.innovation-inner{padding:40px 22px;border-radius:24px}}

/* --- DermaFacial: 5-Tech plain colored bg (no dots) --- */
.df-tech{background:linear-gradient(180deg,#f7f2fc 0%,#efe7f8 100%) !important}

/* --- DermaFacial: Combination Therapy → light rounded card --- */
.df-comb{background:linear-gradient(180deg,#efe7f8,#f6f0fb) !important;color:inherit !important;padding:56px 0}
.df-comb::before,.df-comb::after{content:none !important}
.df-comb .df-comb-grid{
  background:#fff;border-radius:30px;padding:50px;box-shadow:0 20px 55px rgba(87,59,126,.10);
  grid-template-columns:1.05fr .95fr;
}
.df-comb .df-comb-text h2{color:var(--primary-500) !important;font-weight:500}
.df-comb .df-comb-text p{color:var(--neutral-03) !important}
.df-comb .df-comb-media{border-radius:20px;overflow:hidden}
.df-comb .df-comb-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.df-comb .df-comb-grid{padding:24px;border-radius:20px}}

/* --- DermaFacial: Why Clinics → white card, photo left, stat colors --- */
.df-why{background:linear-gradient(180deg,#f6f0fb,#efe7f8) !important;padding:56px 0}
.df-why > .container{
  background:#fff;border-radius:30px;padding:50px 48px;box-shadow:0 20px 55px rgba(87,59,126,.10);
}
.df-why-head{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  text-align:left;max-width:none;margin:0 0 36px;
}
.df-why-media{border-radius:22px;overflow:hidden}
.df-why-media img{width:100%;height:100%;object-fit:cover;display:block}
.df-why-copy h2{text-align:left}
.df-benefits{background:#fdfbff;border:1px solid var(--secondary-50);border-radius:20px;padding:28px}
.df-mini-disclaimer{margin-top:16px;font-size:13px;color:var(--neutral-03)}
.df-mini-disclaimer strong{color:var(--primary-500)}
.df-stats .df-stat{background:#f7f3fc;border:none;box-shadow:none}
.df-stats .df-stat .num{color:var(--primary-500)}
.df-stats .df-stat p{color:var(--neutral-03)}
.df-stats .df-stat:first-child{background:linear-gradient(140deg,#8a4fd0,#6b34ab);color:#fff}
.df-stats .df-stat:first-child .num{color:#fff}
.df-stats .df-stat:first-child p{color:rgba(255,255,255,.9)}
@media (max-width:900px){.df-why-head{grid-template-columns:1fr}.df-why > .container{padding:26px 18px;border-radius:20px}}

/* --- DermaFacial: See the Difference → light card + chip + hovers --- */
.df-diff{background:linear-gradient(180deg,#efe7f8,#f3ecfa) !important;padding:56px 0}
.df-diff > .container{
  background:linear-gradient(180deg,#ffffff, #faf6fe);border-radius:30px;padding:50px 48px;
  box-shadow:0 20px 55px rgba(87,59,126,.10);
}
.df-diff .ba-slider{border-radius:20px;overflow:hidden}
.df-result{transition:.22s}
.df-result:hover{background:linear-gradient(140deg,#8a4fd0,#6b34ab);color:#fff;transform:translateY(-2px)}
.df-result:hover h4,.df-result:hover p,.df-result:hover .stat-line{color:#fff !important}
.df-disclaimer{color:var(--neutral-03)}
.df-disclaimer strong{color:var(--primary-500)}
@media (max-width:700px){.df-diff > .container{padding:26px 18px;border-radius:20px}}

/* --- feedback round 2 polish --- */
.blog-grid .blog-tag{display:none}                    /* Figma section cards have no category chip */
.science{
  background:linear-gradient(90deg,#efe2fc 0%, #f4ebfc 50%, #f6f1fc 100%) !important;
}
.df-comb .df-comb-media{min-height:420px}
.df-comb .df-comb-media img{min-height:420px}
.df-stats .df-stat:first-child{background:linear-gradient(140deg,#8a4fd0,#6b34ab) !important}
.df-stats .df-stat:first-child .num{color:#fff !important}
.df-stats .df-stat:first-child p{color:rgba(255,255,255,.92) !important}
.df-why-media img{aspect-ratio:550/440}
.pc-logo-img{height:78px}
@media (max-width:900px){.pc-logo-img{height:60px}}

/* --- Home hero: proportional Figma frame + real clickable buttons overlaid ---
   Desktop only. The frame (1440x840) has the heading and paragraph baked in, so
   the box must keep the image's exact ratio for the overlaid buttons to land on
   it — hence aspect-ratio and background-size:100% 100% (no distortion, since
   box ratio == image ratio). Never give .hero a fixed height here: with
   aspect-ratio set, a definite height makes width resolve backwards and leaves
   a white gutter beside the frame.
   Below 901px the baked desktop text would be illegible, so the original
   stacked hero (real <h1>/<p>) takes over. */
@media (min-width:901px){
  .hero{
    display:block;position:relative;isolation:isolate;min-height:0;
    aspect-ratio:1440/840;
    background:url('../assets/home-hero-frame-figma.png') center/100% 100% no-repeat;
  }
  .hero .hero-media{
    display:block;position:absolute;inset:0 auto 0 0;z-index:1;
    width:38%;overflow:hidden;pointer-events:none;
  }
  .hero .hero-media img{
    width:100%;height:100%;min-height:0;max-width:none;
    object-fit:cover;object-position:center top;
    mix-blend-mode:multiply;
  }
  .hero .hero-content{
    display:block;position:absolute;inset:0;z-index:2;background:none;overflow:visible;
  }
  .hero .hero-content .hero-text{position:static;max-width:none;padding:0}
  .hero .hero-content h1,
  .hero .hero-content p{display:none}       /* text is part of the frame */
  .hero .hero-actions{
    position:absolute;left:39.6%;top:47.5%;gap:1vw;
  }
  .hero .hero-actions .btn{
    font-size:clamp(10px,1.11vw,16px);
    padding:.9vw 1.8vw;border-radius:999px;
  }
}

/* Keep the selected navigation marker as a dot at every viewport. */
.nav-link.active::after{
  left:50% !important;right:auto !important;bottom:-4px !important;
  width:5px !important;height:5px !important;border-radius:50% !important;
  transform:translateX(-50%) !important;
}

/* ============================================================
   CLIENT FIGMA REFINEMENT — Home, About, DermaFacial, Footer
   ============================================================ */

/* Portfolio: restore the soft glass-orb field and the exact Figma card proportions. */
.portfolio{
  isolation:isolate;
  background:
    radial-gradient(ellipse 620px 620px at 64% 1%, rgba(255,255,255,.92) 0 38%, rgba(230,217,247,.42) 62%, transparent 76%),
    radial-gradient(32% 42% at 6% 86%, rgba(205,185,233,.34) 0%, transparent 70%),
    radial-gradient(30% 42% at 96% 78%, rgba(205,185,233,.42) 0%, transparent 72%),
    linear-gradient(180deg,#faf7fc 0%,#f3ebfa 54%,#ece1f7 100%);
}
.portfolio::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:610px;height:610px;left:calc(64% - 305px);top:-92px;
  border:1px solid rgba(255,255,255,.82);border-radius:50%;
  box-shadow:0 0 0 1px rgba(151,119,193,.08) inset,0 24px 70px rgba(118,81,170,.08);
}
.portfolio > .container{position:relative;z-index:1;max-width:1440px;padding-left:60px;padding-right:60px}
.portfolio .section-title{font-size:58px;font-weight:500;letter-spacing:-.232px}
.portfolio .section-sub{width:928px;max-width:100%;font-size:16px;line-height:1.55;margin-top:12px}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:50px}
.portfolio .product-card{
  width:100%;min-width:0;height:auto;padding:24px;
  gap:10px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(244,226,245,.50));
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.60);backdrop-filter:none;
}
.portfolio .pc-logo-img{
  width:300px;height:136px;max-width:100%;object-fit:contain;
  margin:0 0 -10px;
}
.portfolio .pc-desc{
  display:block;width:364px;max-width:100%;height:49px;overflow:hidden;
  font-family:'Poppins',var(--font-body);font-size:16px;line-height:24px;
  color:#9387bf;margin:0;text-align:center;
}
.portfolio .pc-media{
  width:100%;height:326px;aspect-ratio:auto;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 50%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(160deg,var(--secondary-50),var(--primary-50));
}
.portfolio .pc-media::after{content:none}
.portfolio .pc-media img{
  width:100%;height:100%;max-height:none;object-fit:cover;
  mix-blend-mode:screen;opacity:.96;border-radius:16px;
}
.portfolio .pc-link{
  bottom:40px;z-index:2;padding:12px 24px;border:2px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.80);box-shadow:none;font-size:16px;
}
@media (max-width:900px){
  .portfolio > .container{padding-left:28px;padding-right:28px}
  .portfolio .section-title{font-size:46px}
  .portfolio .pc-logo-img{width:220px;height:100px}
  .portfolio .pc-media{height:280px}
  .portfolio .pc-link{bottom:32px}
}
@media (max-width:560px){
  .portfolio::before{left:50%;width:480px;height:480px;transform:translateX(-50%);top:-70px}
  .portfolio > .container{padding-left:20px;padding-right:20px}
  .portfolio .section-title{font-size:38px}
  .portfolio-grid{gap:18px}
  .portfolio .product-card{padding:20px}
  .portfolio .pc-logo-img{width:240px;height:109px}
  .portfolio .pc-media{height:270px}
}

/* Figma footer uses short link columns, a single address line, and unboxed socials. */
.footer-inner{
  grid-template-columns:390px 1fr;
  gap:90px;
  padding:70px 120px 46px;
}
.footer-by{margin:12px 0;color:#fff;font-size:14px;font-weight:500}
.footer-desc{max-width:370px;font-size:13px;line-height:1.55}
.footer-contact{margin-top:16px;font-size:12.5px;line-height:1.5}
.footer-cols{gap:70px}
.footer-col h4{font-size:15px;margin-bottom:12px}
.footer-col a{padding:4px 0;font-size:13px}
.footer-bottom-inner{padding:20px 120px;font-size:12px}
.socials{gap:12px}
.socials a{width:auto;height:auto;border:0;border-radius:0;font-size:13px}

/* Figma blog cards are compact image-led cards with no tags, metadata, or CTA rows. */
.blog.section{padding:82px 0 88px}
.blog .section-sub{margin-top:8px;font-size:13px}
.blog-grid{gap:28px;margin-top:36px}
.blog-media{border-radius:12px;box-shadow:none}
.blog-card h3{margin:14px 0 6px;font-size:16px;line-height:1.3}
.blog-card p{margin:0;font-size:13px;line-height:1.45}

/* About: keep the pale dot field only in the upper half behind the origin card. */
.origin{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fbf8ff 0%,#f4eafb 100%) !important;
}
.origin::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:48%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(160,123,204,.10) 0 7px,transparent 8px) 0 0/52px 52px;
}
.origin .container{position:relative;z-index:1;max-width:1440px;padding:0}
.origin .origin-grid{
  width:calc(100% - 120px);
  max-width:1320px;
  min-height:807px;
  margin:0 auto;
  grid-template-columns:488px 680px;
  gap:30px;
  padding:50px 61px;
  border-radius:24px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 18px 46px rgba(87,59,126,.06);
}
.origin-media{border-radius:18px;box-shadow:none}
.origin-media img{aspect-ratio:488/657}
.origin-body{min-height:707px;justify-content:space-between;gap:18px;max-width:680px}
.origin-pill{font-size:12px;padding:4px 12px}
.origin-title{font-size:clamp(38px,3.7vw,54px);line-height:1.12}
.origin-body p{font-size:16px;line-height:1.46}
.innovation-band{background:linear-gradient(180deg,#f4eafb,#f2e8fb) !important;padding:0 0 82px}
.innovation-band .container{max-width:1440px;padding:0}
.innovation-panel{
  width:calc(100% - 120px);
  max-width:1320px;
  min-height:524px;
  margin:0 auto;
  padding:42px 36px;
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(31,14,48,.22),rgba(80,36,97,.06)),
    url('../assets/innovation-bg.jpg') center/cover no-repeat;
}
.innovation-inner{
  min-height:344px;
  display:grid;
  align-content:center;
  padding:58px 56px;
  border-radius:42px;
  background:rgba(43,21,58,.54);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(16px);
}
.innovation-inner h2{font-size:clamp(38px,3.7vw,54px);margin-bottom:16px}
.innovation-inner p{font-size:16px;line-height:1.55}

/* DermaFacial technology block: large pale panel, compact tabs, and an unframed handpiece. */
.df-tech{
  padding:78px 0 48px;
  background:linear-gradient(180deg,#fbf7ff 0%,#f1e7fa 100%) !important;
}
.df-tech .container{max-width:1440px;padding:0 52px}
.df-tech h2{font-size:clamp(38px,3.8vw,56px);line-height:1.16;margin-bottom:24px}
.df-tech-tabs{gap:14px;margin-bottom:26px}
.df-tab{padding:10px 22px;border-width:1.5px;font-size:15px}
.df-tech-panel.active{
  grid-template-columns:1.02fr .98fr;
  min-height:500px;
  gap:46px;
  padding:66px 44px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.86);
  background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(249,241,254,.52));
}
.df-tech-info .tech-name{font-size:25px;margin-bottom:10px}
.df-tech-info .tech-title{font-size:16px;margin-bottom:14px}
.df-tech-info p{font-size:15px;line-height:1.38;margin-bottom:16px}
.df-tech-media{min-height:0;aspect-ratio:auto;border-radius:0;background:transparent;overflow:visible}
.df-tech-media img{width:100%;max-width:100%;max-height:170px;object-fit:contain}
.df-play{width:70px;height:70px;background:rgba(255,255,255,.92);box-shadow:0 0 0 20px rgba(87,59,126,.10)}

/* Combination Therapy is one image-led card in the Figma file, not a split white card. */
.df-comb{
  padding:34px 0 74px;
  background:linear-gradient(180deg,#f1e7fa 0%,#f4ecfb 100%) !important;
}
.df-comb .container{max-width:1440px;padding:0 52px}
.df-comb .df-comb-grid{
  display:block;
  min-height:590px;
  padding:126px 48px;
  border-radius:22px;
  background:url('../assets/df-combination.jpg') center/cover no-repeat;
  box-shadow:none;
}
.df-comb .df-comb-media{display:none !important}
.df-comb .df-comb-text{max-width:560px}
.df-comb .df-comb-text h2{font-size:clamp(38px,3.7vw,54px);line-height:1.15;margin-bottom:18px}
.df-comb .df-comb-text p{font-size:16px;line-height:1.48;max-width:550px}

/* The treatment accordion lives on the same pale field as the technology cards. */
.df-step:not(.df-faq){
  padding:78px 0 92px;
  background:linear-gradient(180deg,#f4ecfb 0%,#f1e7fa 100%);
}
.df-step:not(.df-faq) .container{max-width:1440px;padding:0 112px}
.df-step:not(.df-faq) .df-step-grid{grid-template-columns:.87fr 1fr;gap:92px;align-items:center}
.df-step:not(.df-faq) h2{font-size:clamp(40px,4vw,60px);line-height:1.12}
.df-step:not(.df-faq) .df-step-intro p{font-size:16px;max-width:410px}
.df-step:not(.df-faq) .acc{gap:10px}
.df-step:not(.df-faq) .acc-item{
  border:1px solid rgba(255,255,255,.74);
  border-radius:12px;
  background:rgba(255,255,255,.38);
}
.df-step:not(.df-faq) .acc-item.open{background:#fff;border-color:#fff;box-shadow:0 12px 30px rgba(87,59,126,.08)}
.df-step:not(.df-faq) .acc-head{padding:18px 20px;font-size:16px}
.df-step:not(.df-faq) .acc-panel p{padding:0 20px 18px;font-size:14px;line-height:1.45}

/* Why Clinics: image, content, benefits, and stats share a single rounded surface. */
.df-why{padding:82px 0;background:linear-gradient(180deg,#f1e7fa,#efe5f8) !important}
.df-why > .container{
  max-width:1440px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:440px auto;
  gap:0 34px;
  padding:50px 52px 42px;
  border-radius:48px;
  overflow:hidden;
  background:linear-gradient(145deg,#fff,#f8f1fe);
  box-shadow:none;
}
.df-why-head,.df-why-grid{display:contents}
.df-why-media{grid-column:1;grid-row:1 / span 2;margin:0;border-radius:24px;overflow:hidden}
.df-why-media img{height:100%;min-height:590px;aspect-ratio:auto;object-fit:cover}
.df-why-copy{grid-column:2;grid-row:1;padding:48px 34px 0 0;align-self:start}
.df-why-copy h2{font-size:clamp(38px,3.6vw,54px);line-height:1.14;margin-bottom:18px}
.df-why-copy p{font-size:16px;line-height:1.45;max-width:520px}
.df-why-copy .btn{margin-top:4px}
.df-benefits{
  grid-column:1;
  grid-row:2;
  position:relative;
  z-index:1;
  margin:-104px 0 0 54px;
  padding:28px 30px 20px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.94);
  box-shadow:none;
}
.df-benefits h3{font-size:17px;letter-spacing:0;text-transform:none;margin-bottom:14px}
.df-benefits ul{gap:10px}
.df-benefits li{font-size:14px}
.df-benefits .df-check{width:18px;height:18px;font-size:10px}
.df-mini-disclaimer{font-size:12px;margin-top:12px}
.df-stats{
  grid-column:2;
  grid-row:2;
  align-self:end;
  gap:14px;
  margin:-8px 0 0;
}
.df-stat{min-height:146px;padding:22px;border-radius:16px;background:#f4ebfa !important}
.df-stat .num{font-size:42px}
.df-stat p{font-size:14px;line-height:1.35}
.df-stats .df-stat:first-child{background:linear-gradient(135deg,#7242b4,#985ddb) !important}

/* See the Difference: Figma uses a near-square before/after and a persistent purple first result. */
.df-diff{position:relative;padding:82px 0;background:linear-gradient(180deg,#efe5f8,#f3ebfb) !important}
.df-diff > .container{
  position:relative;
  max-width:1440px;
  padding:50px 48px 42px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(115deg,#fff 0%,#f9f1fe 100%);
  box-shadow:none;
}
.df-diff > .container::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-170px;
  width:420px;
  aspect-ratio:1;
  border:44px solid rgba(128,88,183,.11);
  border-radius:50%;
  pointer-events:none;
}
.df-diff-head,.df-diff-grid,.df-disclaimer{position:relative;z-index:1}
.df-diff-head h2{font-size:clamp(38px,3.7vw,56px);line-height:1.13}
.df-diff-head p{font-size:15px;max-width:760px}
.df-diff-grid{grid-template-columns:1.18fr .82fr;gap:24px}
.df-diff .ba-slider{aspect-ratio:720/500;border-radius:18px;box-shadow:none}
.df-diff .ba-label{font-size:38px}
.df-diff .ba-handle::after{width:50px;height:50px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.76);box-shadow:none}
.df-result-list{gap:12px}
.df-result{flex:1;padding:18px 18px;border:0;border-radius:15px;background:#fff;box-shadow:none}
.df-result h4{font-size:20px;line-height:1.15;margin-bottom:8px}
.df-result .stat-line{font-size:13px}
.df-result p{font-size:12px;line-height:1.35}
.df-result:first-child{background:linear-gradient(135deg,#7242b4,#985ddb);color:#fff}
.df-result:first-child h4,.df-result:first-child .stat-line,.df-result:first-child p{color:#fff}
.df-result:hover{transform:none}
.df-disclaimer{max-width:820px;font-size:12px;line-height:1.45}

/* FAQ has its own large rounded two-column panel. */
.df-faq{padding:86px 0;background:linear-gradient(180deg,#f3ebfb,#f6effc)}
.df-faq .df-step-grid{
  max-width:1280px;
  min-height:804px;
  grid-template-columns:.87fr 1.13fr;
  align-items:center;
  gap:74px;
  padding:48px;
  border-radius:48px;
  background:linear-gradient(115deg,rgba(238,226,249,.9),rgba(248,243,253,.72));
  border:1px solid rgba(255,255,255,.74);
}
.df-faq h2{font-size:clamp(42px,4vw,60px);line-height:1.12}
.df-faq .df-step-intro p{font-size:16px;max-width:410px}
.df-faq .acc{gap:14px}
.df-faq .acc-item{border-color:rgba(255,255,255,.74);border-radius:12px;background:rgba(255,255,255,.46)}
.df-faq .acc-item.open{background:#fff;border-color:#fff;box-shadow:none}
.df-faq .acc-head{padding:19px 22px;font-size:16px}
.df-faq .acc-panel p{padding:0 22px 20px;font-size:14px;line-height:1.45}

/* Provider CTA uses the rounded glass panel and soft molecules from the source frame. */
.provider-cta{
  min-height:724px;
  display:flex;
  align-items:center;
  padding:82px 0;
  background:
    linear-gradient(112deg,rgba(52,26,91,.94),rgba(93,42,165,.94) 55%,rgba(109,45,194,.9)),
    url('../assets/pd-bubble.jpg') center/cover no-repeat;
}
.provider-cta::before{background:url('../assets/helix-a.jpg') 28% 0/48% auto no-repeat;opacity:.20;mix-blend-mode:screen}
.provider-panel{max-width:1070px;padding:58px 66px 50px;border-radius:46px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);box-shadow:none}
.provider-panel h2{font-size:clamp(38px,4vw,60px);line-height:1.13;margin-bottom:22px}
.provider-panel p{font-size:16px;line-height:1.45}
.provider-panel .btn-light{padding:15px 28px}
.provider-foot{margin-top:24px}

@media (max-width:900px){
  .footer-inner,.footer-bottom-inner{padding-left:32px;padding-right:32px}
  .footer-inner{grid-template-columns:1fr;gap:36px}
  .footer-cols{gap:28px}
  .df-tech .container,.df-comb .container{padding-left:28px;padding-right:28px}
  .origin .origin-grid{width:auto;min-height:0;margin:0 28px;grid-template-columns:1fr;padding:34px;gap:28px}
  .innovation-panel{width:auto;min-height:0;margin:0 28px}
  .origin-media img{aspect-ratio:4/3}
  .df-tech-panel.active,.df-step:not(.df-faq) .df-step-grid,.df-faq .df-step-grid{grid-template-columns:1fr;gap:30px}
  .df-tech-panel.active{padding:38px 28px;min-height:0}
  .df-comb .df-comb-grid{min-height:0;padding:56px 32px;background-position:60% center}
  .df-why > .container{display:block;padding:28px;border-radius:28px}
  .df-why-media img{min-height:0;height:auto;aspect-ratio:4/3}
  .df-why-copy{padding:28px 0 18px}
  .df-benefits,.df-stats{margin:0}
  .df-benefits{margin-top:12px}
  .df-diff-grid{grid-template-columns:1fr}
  .df-faq .df-step-grid{min-height:0;padding:30px;border-radius:28px}
  .provider-cta{min-height:0;padding:70px 0}
}

@media (max-width:560px){
  .footer-inner,.footer-bottom-inner{padding-left:20px;padding-right:20px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .df-tech .container,.df-comb .container{padding-left:20px;padding-right:20px}
  .origin .origin-grid{margin:0 20px;padding:22px}
  .innovation-panel{margin:0 20px;padding:18px;min-height:340px}
  .innovation-inner{min-height:280px;padding:36px 22px;border-radius:26px}
  .df-tech h2,.df-comb .df-comb-text h2,.df-step:not(.df-faq) h2,.df-faq h2,.df-why-copy h2,.df-diff-head h2{font-size:34px}
  .df-tech-tabs{gap:8px}
  .df-tab{padding:8px 12px;font-size:13px}
  .df-comb .df-comb-grid{padding:36px 22px}
  .df-diff > .container{padding:28px 20px;border-radius:20px}
  .df-diff .ba-label{font-size:26px}
  .provider-panel{padding:42px 22px;border-radius:26px}
  .provider-panel h2{font-size:34px}
}

/* DermaFacial client pass: keep the page close to the Figma frame at desktop widths. */
.page-dermafacial .df-btn-grad{
  background:linear-gradient(135deg,#5c319d 0%,#7a45c6 100%);
  color:#fff;
}
.page-dermafacial .df-hero{background-size:100% 100%}
.page-dermafacial .df-about{
  background:
    radial-gradient(circle at 24px 24px,rgba(126,92,171,.045) 0 5px,transparent 6px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf8ff 0%,#f4ebfb 100%) !important;
}
.page-dermafacial .df-about-grid,
.page-dermafacial .df-tech-panel.active,
.page-dermafacial .df-comb .df-comb-grid,
.page-dermafacial .df-why > .container,
.page-dermafacial .df-diff > .container{
  width:calc(100% - 120px);
}
.page-dermafacial .df-tech-panel.active,
.page-dermafacial .df-comb .df-comb-grid{
  margin-left:auto;
  margin-right:auto;
}
.page-dermafacial .df-about-grid{
  max-width:1320px;
  min-height:560px;
  padding:50px 56px;
}
.page-dermafacial .df-about-media .img-treat{
  image-rendering:auto;
  filter:saturate(.98) contrast(1.02);
}
.page-dermafacial .df-tech .container,
.page-dermafacial .df-comb .container{
  padding-left:0;
  padding-right:0;
}
.page-dermafacial .df-tech-panel.active{
  max-width:1320px;
  min-height:599px;
}
.page-dermafacial .df-tech{
  padding-top:50px;
  padding-bottom:50px;
}
.page-dermafacial .df-tech-media img[src*="device-facial"],
.page-dermafacial .df-tech-media img[src*="df-device"]{
  max-height:240px;
}
.page-dermafacial .df-tech-media img[src*="nano-pen-device"],
.page-dermafacial .df-tech-media img[src*="skin-hand"]{
  max-height:210px;
}
.page-dermafacial .df-comb .df-comb-grid{
  max-width:1320px;
  min-height:560px;
  padding:104px 48px;
  background-position:center;
}
.page-dermafacial .df-step:not(.df-faq) .container{
  max-width:1320px;
  padding-left:52px;
  padding-right:52px;
}
.page-dermafacial .df-why > .container{
  max-width:1320px;
}
.page-dermafacial .df-diff > .container{
  max-width:1320px;
}
.page-dermafacial .df-faq .df-step-grid{
  width:calc(100% - 120px);
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
}
.page-dermafacial .df-faq{padding-top:81px;padding-bottom:81px}
.page-dermafacial .df-diff-head h2{
  max-width:1080px;
  font-size:clamp(38px,3.25vw,50px);
}
.page-dermafacial .df-diff > .container::after{
  right:-84px;
  bottom:-144px;
  width:460px;
  border-width:0;
  opacity:.32;
  background:url('../assets/pd-bubble.jpg') center/cover no-repeat;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle at center,black 0 48%,transparent 70%);
  mask-image:radial-gradient(circle at center,black 0 48%,transparent 70%);
}
.page-dermafacial .df-diff .ba-before img{visibility:hidden}
.page-dermafacial .blog{
  min-height:710px;
  box-sizing:border-box;
  padding-top:18px;
  padding-bottom:0;
  background:linear-gradient(180deg,#fbf8ff 0%,#f2eafa 100%) !important;
}
.page-dermafacial .blog .section-sub{margin-top:22px;font-size:16px}
.page-dermafacial .blog-grid{margin-top:46px}
.page-dermafacial .blog-media{aspect-ratio:4/3}
.page-dermafacial .blog-media img{object-position:center center}
.page-dermafacial .blog-card h3{margin:14px 0 8px;font-size:20px;line-height:1.3}
.page-dermafacial .blog-card p{margin:0;font-size:16px;line-height:1.45}
.route-dermafacial .site-footer{
  min-height:522px;
  box-sizing:border-box;
  background:#241734;
}
.route-dermafacial .footer-inner{padding-top:96px;padding-bottom:54px}
.route-dermafacial .footer-by{display:none}
.route-dermafacial .footer-desc{margin-top:33px}
.route-dermafacial .footer-contact{margin-top:16px}
.route-dermafacial .footer-bottom-inner{padding-top:29px;padding-bottom:96px}

/* Portfolio overview frames show four featured products; the catalogue remains available via View More. */
.page-dermaceuticals .df-about{padding:16px 0}
.page-dermaprofessional .df-about{padding:26px 0 40px}
.page-dermaceuticals .pp-rel-card:nth-child(n+5),
.page-dermaprofessional .pp-rel-card:nth-child(n+5){display:none}
.page-dermaceuticals .dc-results .pp-rel-grid,
.page-dermaprofessional .dc-results .pp-rel-grid{margin-top:30px}

/* These overview frames use a compact single-row product band instead of an expanded catalogue grid. */
.page-dermaceuticals .dc-results .pp-rel-media,
.page-dermaprofessional .dc-results .pp-rel-media{aspect-ratio:1.22/1;padding:14px}
.page-dermaceuticals .dc-results .pp-rel-card,
.page-dermaprofessional .dc-results .pp-rel-card{padding-bottom:16px}
.page-dermaceuticals .dc-results .pp-rel-card h4,
.page-dermaprofessional .dc-results .pp-rel-card h4{font-size:16px;margin:0 16px 5px}
.page-dermaceuticals .dc-results .pp-rel-card p,
.page-dermaprofessional .dc-results .pp-rel-card p{font-size:12px;margin:0 16px 12px}
.page-dermaceuticals .dc-results .pc-link,
.page-dermaprofessional .dc-results .pc-link{margin:0 16px;font-size:12px}

/* DermaCeuticals: preserve the three Figma feature-card bands and undo the DermaFacial-only overlap inherited by its benefits list. */
.page-dermaceuticals .dc-bespoke{padding:78px 0}
.page-dermaceuticals .dc-why{padding:94px 0 95px}
.page-dermaceuticals .dc-why .df-benefits{
  grid-column:auto;
  grid-row:auto;
  position:static;
  margin:0;
}
.page-dermaceuticals .dc-results{min-height:1501px;box-sizing:border-box}
.page-dermaceuticals .dc-results-grid{min-height:542px}
.page-dermaceuticals .dc-results .pp-rel-grid{min-height:468px}

/* DermaProfessional: Figma places the technology cards in one row and balances the product/benefit composition below. */
.page-dermaprofessional .dp-tech{
  padding:140px 0 139px;
}
.page-dermaprofessional .dp-tech-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-dermaprofessional .dp-tech-grid .feature-card{grid-column:auto}
.page-dermaprofessional .dc-results{min-height:872px;box-sizing:border-box}
.page-dermaprofessional .dc-regen{height:604px;box-sizing:border-box}

/* Both overview frames use the larger FAQ and news bands, followed by the 522px Figma footer. */
.page-dermaceuticals .df-step,
.page-dermaprofessional .df-step{min-height:878px;box-sizing:border-box}
.page-dermaceuticals .blog,
.page-dermaprofessional .blog{min-height:710px;box-sizing:border-box}
.route-dc-dermaceuticals .site-footer,
.route-dp-dermaprofessional .site-footer{
  min-height:522px;
  box-sizing:border-box;
  background:#241734;
}
.route-dc-dermaceuticals .footer-inner,
.route-dp-dermaprofessional .footer-inner{padding-top:96px;padding-bottom:54px}
.route-dc-dermaceuticals .footer-by,
.route-dp-dermaprofessional .footer-by{display:none}
.route-dc-dermaceuticals .footer-desc,
.route-dp-dermaprofessional .footer-desc{margin-top:33px}
.route-dc-dermaceuticals .footer-bottom-inner,
.route-dp-dermaprofessional .footer-bottom-inner{padding-top:29px;padding-bottom:96px}

/* Skin AI Analyzer uses the compact device-page panels from its Figma frame. */
.page-skin-analyzer .df-about{padding:27px 0}
.page-skin-analyzer > .dc-regen:nth-of-type(3){min-height:692px;box-sizing:border-box}
.page-skin-analyzer > .dc-regen:nth-of-type(4){min-height:600px;box-sizing:border-box}
.page-skin-analyzer .dp-tech{min-height:977px;box-sizing:border-box}
.page-skin-analyzer .dev-band{height:808px;box-sizing:border-box}
.route-skin-analyzer .site-footer{min-height:522px;box-sizing:border-box;background:#241734}
.route-skin-analyzer .footer-inner{padding-top:96px;padding-bottom:54px}
.route-skin-analyzer .footer-by{display:none}
.route-skin-analyzer .footer-desc{margin-top:33px}
.route-skin-analyzer .footer-bottom-inner{padding-top:29px;padding-bottom:96px}

/* NanoTap has a dedicated Key Features card and ends after the clinical application panel. */
.page-nano-pen .df-about{padding:32px 0 72px}
.page-nano-pen .dp-tech{min-height:764px;box-sizing:border-box}
.page-nano-pen > .dc-regen:nth-of-type(4){min-height:532px;box-sizing:border-box}
.page-nano-pen > .dc-regen:nth-of-type(7){min-height:684px;box-sizing:border-box}
.nano-features{height:694px;box-sizing:border-box;padding:35px 0;background:linear-gradient(180deg,#f4ebfb,#f8f4fd)}
.nano-features-card{height:624px;box-sizing:border-box;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:60px;padding:40px 52px;border-radius:22px;background:linear-gradient(115deg,#fff,#f4eafb);overflow:hidden}
.nano-features-copy h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(32px,3.5vw,48px);margin-bottom:22px}
.nano-features-media{height:100%;min-height:0;overflow:hidden;border-radius:16px;background:#ede1f8}
.nano-features-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.page-nano-pen .dev-band{height:440px;box-sizing:border-box}
.page-nano-pen > .dc-regen:nth-of-type(7){padding:80px 0;overflow:hidden}
.page-nano-pen > .dc-regen:nth-of-type(7) .dc-regen-grid,
.page-nano-pen > .dc-regen:nth-of-type(7) .dc-regen-media{height:524px}
.route-nano-pen .site-footer{min-height:522px;box-sizing:border-box;background:#241734}
.route-nano-pen .footer-inner{padding-top:96px;padding-bottom:54px}
.route-nano-pen .footer-by{display:none}
.route-nano-pen .footer-desc{margin-top:33px}
.route-nano-pen .footer-bottom-inner{padding-top:29px;padding-bottom:96px}

/* Home frame band heights. */
.page-index .tailored{height:901px;box-sizing:border-box}
.page-index .science{min-height:1214px;box-sizing:border-box}
.page-index .transforms{height:965px;box-sizing:border-box}
.page-index .blog{min-height:790px;box-sizing:border-box}
.route-index .site-footer{min-height:466px;box-sizing:border-box;background:#241734}
.route-index .footer-inner{padding-top:74px;padding-bottom:38px}
.route-index .footer-by{display:none}
.route-index .footer-desc{margin-top:24px}
.route-index .footer-bottom-inner{padding-top:22px;padding-bottom:58px}

/* About uses the Figma 790px news band and 522px footer after its compact innovation band. */
.page-about .innovation-band{height:542px;box-sizing:border-box}
.page-about .blog{min-height:790px;box-sizing:border-box}
.route-about .site-footer{min-height:522px;box-sizing:border-box;background:#241734}
.route-about .footer-inner{padding-top:96px;padding-bottom:54px}
.route-about .footer-by{display:none}
.route-about .footer-desc{margin-top:33px}
.route-about .footer-bottom-inner{padding-top:29px;padding-bottom:96px}

/* Regenerative Actives and its three detail pages follow compact, frame-specific content bands. */
.page-regenerative-actives > .section:nth-of-type(2){height:611px;box-sizing:border-box}
.page-regenerative-actives .scopes{height:900px;box-sizing:border-box}
.page-regenerative-actives .ra-redefine{height:614px;box-sizing:border-box}
.page-active-human-exosomes .active-hero,
.page-active-pdrn .active-hero,
.page-active-plant-exosomes .active-hero{height:514px;box-sizing:border-box}
.page-active-human-exosomes .active-scopes,
.page-active-pdrn .active-scopes{height:1226px;box-sizing:border-box}
.page-active-plant-exosomes .active-scopes{height:1252px;box-sizing:border-box}
.page-active-human-exosomes .active-adv,
.page-active-pdrn .active-adv,
.page-active-plant-exosomes .active-adv{height:690px;box-sizing:border-box}
.page-active-human-exosomes .ra-redefine{height:684px;box-sizing:border-box}
.page-active-pdrn .ra-redefine,
.page-active-plant-exosomes .ra-redefine{height:690px;box-sizing:border-box}
.route-regenerative-actives .site-footer,
.route-active-human-exosomes .site-footer,
.route-active-pdrn .site-footer,
.route-active-plant-exosomes .site-footer{min-height:522px;box-sizing:border-box;background:#241734}
.route-regenerative-actives .footer-inner,
.route-active-human-exosomes .footer-inner,
.route-active-pdrn .footer-inner,
.route-active-plant-exosomes .footer-inner{padding-top:96px;padding-bottom:54px}
.route-regenerative-actives .footer-by,
.route-active-human-exosomes .footer-by,
.route-active-pdrn .footer-by,
.route-active-plant-exosomes .footer-by{display:none}
.route-regenerative-actives .footer-desc,
.route-active-human-exosomes .footer-desc,
.route-active-pdrn .footer-desc,
.route-active-plant-exosomes .footer-desc{margin-top:33px}
.route-regenerative-actives .footer-bottom-inner,
.route-active-human-exosomes .footer-bottom-inner,
.route-active-pdrn .footer-bottom-inner,
.route-active-plant-exosomes .footer-bottom-inner{padding-top:29px;padding-bottom:96px}

/* The current Figma blog page uses a taller post field, a full newsletter block, and a 594px footer. */
.page-blogs .blog{height:1420px;box-sizing:border-box}
.page-blogs .bl-news{height:auto;box-sizing:border-box;margin-top:0;padding-top:26px;padding-bottom:96px}
.route-blogs .site-footer{min-height:594px;box-sizing:border-box;background:#241734}
.route-blogs .footer-inner{padding-top:108px;padding-bottom:60px}
.route-blogs .footer-by{display:none}
.route-blogs .footer-desc{margin-top:33px}
.route-blogs .footer-bottom-inner{padding-top:29px;padding-bottom:112px}

@media (max-width:900px){
  .page-dermafacial .df-about-grid,
  .page-dermafacial .df-tech-panel.active,
  .page-dermafacial .df-comb .df-comb-grid,
  .page-dermafacial .df-why > .container,
  .page-dermafacial .df-diff > .container,
  .page-dermafacial .df-faq .df-step-grid{width:auto}
  .page-dermafacial .df-about-grid{min-height:0;padding:34px}
  .page-dermafacial .df-tech{padding-top:78px;padding-bottom:48px}
  .page-dermafacial .df-tech-panel.active{min-height:0}
  .page-dermafacial .df-tech .container,
  .page-dermafacial .df-comb .container{padding-left:28px;padding-right:28px}
  .page-dermafacial .df-step:not(.df-faq) .container{padding-left:28px;padding-right:28px}
  .page-dermafacial .blog{min-height:0;padding-top:64px;padding-bottom:70px}
  .page-dermafacial .blog .section-sub{font-size:13px;margin-top:8px}
  .page-dermafacial .blog-grid{margin-top:36px}
  .page-dermafacial .blog-media{aspect-ratio:16/10}
  .page-dermafacial .blog-card h3{font-size:16px}
  .page-dermafacial .blog-card p{font-size:13px}
  .route-dermafacial .site-footer{min-height:0}
  .route-dermafacial .footer-inner{padding-top:70px;padding-bottom:46px}
  .route-dermafacial .footer-desc{margin-top:0}
  .route-dermafacial .footer-bottom-inner{padding-top:20px;padding-bottom:20px}
  .page-dermaceuticals .df-about{padding:56px 0 96px}
  .page-dermaprofessional .df-about{padding:56px 0 96px}
  .page-dermaceuticals .dc-results,
  .page-dermaprofessional .dc-results,
  .page-dermaprofessional .dc-regen,
  .page-dermaceuticals .df-step,
  .page-dermaprofessional .df-step,
  .page-dermaceuticals .blog,
  .page-dermaprofessional .blog{min-height:0;height:auto}
  .page-dermaprofessional .dp-tech{padding:86px 0 96px}
  .page-dermaprofessional .dp-tech-grid{grid-template-columns:1fr 1fr}
  .page-skin-analyzer .df-about{padding:56px 0 96px}
  .page-skin-analyzer > .dc-regen:nth-of-type(3),
  .page-skin-analyzer > .dc-regen:nth-of-type(4),
  .page-skin-analyzer .dp-tech,
  .page-skin-analyzer .dev-band,
  .page-nano-pen .dp-tech,
  .page-nano-pen > .dc-regen:nth-of-type(4),
  .page-nano-pen > .dc-regen:nth-of-type(7),
  .page-nano-pen .dev-band{min-height:0}
  .page-index .tailored,
  .page-index .transforms,
  .page-index .science,
  .page-index .blog,
  .page-regenerative-actives > .section:nth-of-type(2),
  .page-regenerative-actives .scopes,
  .page-regenerative-actives .ra-redefine,
  .page-active-human-exosomes .active-hero,
  .page-active-pdrn .active-hero,
  .page-active-plant-exosomes .active-hero,
  .page-active-human-exosomes .active-scopes,
  .page-active-pdrn .active-scopes,
  .page-active-plant-exosomes .active-scopes,
  .page-active-human-exosomes .active-adv,
  .page-active-pdrn .active-adv,
  .page-active-plant-exosomes .active-adv,
  .page-active-human-exosomes .ra-redefine,
  .page-active-pdrn .ra-redefine,
  .page-active-plant-exosomes .ra-redefine,
  .page-blogs .blog,
  .page-blogs .bl-news{height:auto;min-height:0}
  .page-about .innovation-band,
  .page-about .blog{height:auto;min-height:0}
  .nano-features{height:auto;padding:48px 0}
  .nano-features-card{height:auto;min-height:0;grid-template-columns:1fr;padding:32px;gap:28px}
  .nano-features-media{min-height:280px}
  .route-dc-dermaceuticals .site-footer,
  .route-dp-dermaprofessional .site-footer,
  .route-skin-analyzer .site-footer,
  .route-nano-pen .site-footer,
  .route-index .site-footer,
  .route-about .site-footer,
  .route-regenerative-actives .site-footer,
  .route-active-human-exosomes .site-footer,
  .route-active-pdrn .site-footer,
  .route-active-plant-exosomes .site-footer,
  .route-blogs .site-footer{min-height:0}
  .route-dc-dermaceuticals .footer-inner,
  .route-dp-dermaprofessional .footer-inner,
  .route-skin-analyzer .footer-inner,
  .route-nano-pen .footer-inner,
  .route-about .footer-inner,
  .route-regenerative-actives .footer-inner,
  .route-active-human-exosomes .footer-inner,
  .route-active-pdrn .footer-inner,
  .route-active-plant-exosomes .footer-inner,
  .route-blogs .footer-inner{padding-top:70px;padding-bottom:46px}
  .route-dc-dermaceuticals .footer-desc,
  .route-dp-dermaprofessional .footer-desc,
  .route-skin-analyzer .footer-desc,
  .route-nano-pen .footer-desc,
  .route-about .footer-desc,
  .route-regenerative-actives .footer-desc,
  .route-active-human-exosomes .footer-desc,
  .route-active-pdrn .footer-desc,
  .route-active-plant-exosomes .footer-desc,
  .route-blogs .footer-desc{margin-top:0}
  .route-dc-dermaceuticals .footer-bottom-inner,
  .route-dp-dermaprofessional .footer-bottom-inner,
  .route-skin-analyzer .footer-bottom-inner,
  .route-nano-pen .footer-bottom-inner,
  .route-about .footer-bottom-inner,
  .route-regenerative-actives .footer-bottom-inner,
  .route-active-human-exosomes .footer-bottom-inner,
  .route-active-pdrn .footer-bottom-inner,
  .route-active-plant-exosomes .footer-bottom-inner,
  .route-blogs .footer-bottom-inner{padding-top:20px;padding-bottom:20px}
}

/* Reassert the desktop DermaFacial news band after the responsive rules above. */
@media (min-width:901px){
  .page-df-dermafacial .blog{
    min-height:710px;
    box-sizing:border-box;
    padding-top:18px;
    padding-bottom:0;
  }
}

/* ============================================================
   UTILITY ROUTES — derived from the finished Préime Figma system
   ============================================================ */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.page-utility{background:#fff}
.utility-hero{
  position:relative;isolation:isolate;overflow:hidden;min-height:430px;color:#fff;
  display:flex;align-items:center;
  background:
    linear-gradient(112deg,rgba(39,23,56,.96) 0%,rgba(86,56,124,.9) 52%,rgba(133,95,166,.76) 100%),
    url('../assets/helix-b.jpg') center/cover no-repeat;
}
.utility-hero::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 36%,rgba(255,255,255,.16),transparent 25%),
    linear-gradient(90deg,transparent 0 64%,rgba(255,255,255,.04) 64% 100%);
}
.utility-hero-inner{display:flex;align-items:center;min-height:430px}
.utility-hero-copy{width:min(820px,72%);margin:0 auto;text-align:center;padding:72px 0}
.utility-hero h1{
  max-width:900px;margin:0 auto 18px;font-family:var(--font-head);font-size:58px;font-weight:500;line-height:1.08;letter-spacing:0;
}
.utility-hero p{max-width:760px;margin:0 auto;color:rgba(255,255,255,.84);font-size:18px;line-height:1.65}
.utility-eyebrow,.utility-kicker{
  display:inline-flex;align-items:center;margin-bottom:14px;color:var(--primary-400);
  font-size:12px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;
}
.utility-eyebrow{color:rgba(255,255,255,.78)}
.utility-hero-split .utility-hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.8fr);gap:42px}
.utility-hero-split .utility-hero-copy{width:auto;margin:0;text-align:left;padding:74px 0}
.utility-hero-split .utility-hero h1,.utility-hero-split .utility-hero p{margin-left:0}
.utility-hero-image{align-self:stretch;min-height:430px;position:relative}
.utility-hero-image::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#4f3673 0%,transparent 38%)}
.utility-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.82}

.utility-section{padding:92px 0}
.utility-dot-band{
  background:
    radial-gradient(circle at 24px 24px,rgba(126,92,171,.08) 0 7px,transparent 8px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf8fe 0%,#f2eafa 100%);
}
.utility-heading{max-width:880px;margin:0 auto 46px;text-align:center}
.utility-heading-left{text-align:left;margin-left:0}
.utility-heading h2,.utility-image-split h2,.utility-contact-copy h2,.portal-intro h2{
  font-family:var(--font-head);font-size:44px;font-weight:500;line-height:1.14;letter-spacing:0;color:var(--primary-500);
}
.utility-heading p{max-width:760px;margin:14px auto 0;color:var(--neutral-03);font-size:16px;line-height:1.65}
.utility-heading-left p{margin-left:0}

.utility-card-grid{display:grid;gap:24px}
.utility-card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.utility-card-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.utility-icon-card{
  display:flex;flex-direction:column;min-height:300px;padding:34px 30px;border:1px solid rgba(87,59,126,.14);
  border-radius:8px;background:rgba(255,255,255,.86);box-shadow:0 18px 44px rgba(66,44,92,.06);
}
.utility-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:24px;border-radius:50%;background:var(--secondary-50);color:var(--primary-500)}
.utility-icon svg{width:34px;height:34px;stroke-width:1.55}
.utility-icon-card h3{font-family:var(--font-head);font-size:23px;font-weight:600;line-height:1.25;color:var(--primary-500)}
.utility-icon-card p{margin:12px 0 22px;color:var(--neutral-03);font-size:15px;line-height:1.62;flex:1}
.utility-text-link{
  display:inline-flex;align-items:center;gap:7px;width:max-content;color:var(--primary-500);font-size:14px;font-weight:800;
}
.utility-text-link svg,.utility-range-card>a svg,.provider-card>a svg,.legal-aside>a svg{width:16px;height:16px}

.utility-form-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1fr);gap:76px;align-items:start}
.utility-contact-copy{padding-top:28px}
.utility-contact-copy h2{max-width:520px;margin-bottom:18px}
.utility-contact-copy>p{max-width:540px;color:var(--neutral-03);font-size:16px;line-height:1.68}
.utility-contact-list{display:grid;gap:0;margin-top:32px;border-top:1px solid rgba(87,59,126,.14)}
.utility-contact-list>a,.utility-contact-list>div{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(87,59,126,.14)}
.utility-contact-list>a>span,.utility-contact-list>div>span{display:inline-flex;color:var(--primary-500);padding-top:2px}
.utility-contact-list svg{width:21px;height:21px;stroke-width:1.7}
.utility-contact-list strong,.utility-contact-list small{display:block}
.utility-contact-list strong{font-size:14px;color:var(--black-500)}
.utility-contact-list small{margin-top:3px;max-width:430px;color:var(--neutral-03);font-size:13.5px;line-height:1.5}
.utility-checks{list-style:none;display:grid;gap:14px;margin:30px 0}
.utility-checks li{display:flex;gap:12px;align-items:flex-start;color:var(--black-500);font-size:15px;line-height:1.5}
.utility-checks li>span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--primary-500);color:#fff}
.utility-checks svg{width:14px;height:14px;stroke-width:2.5}

.utility-form{
  display:grid;grid-template-columns:1fr;gap:16px;padding:40px;border:1px solid rgba(87,59,126,.16);
  border-radius:8px;background:#fff;box-shadow:0 26px 70px rgba(69,43,101,.11);
}
.utility-form-head{margin-bottom:4px}
.utility-form-head>span{display:block;margin-bottom:7px;color:var(--primary-400);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.utility-form-head h2{font-family:var(--font-head);font-size:28px;font-weight:600;line-height:1.2;color:var(--primary-500)}
.utility-form-head p{margin-top:8px;color:var(--neutral-03);font-size:14px;line-height:1.55}
.utility-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.utility-form label{display:grid;gap:7px;color:var(--black-500);font-size:13px;font-weight:700}
.utility-form input,.utility-form select,.utility-form textarea{
  width:100%;min-width:0;border:1px solid #d8cce6;border-radius:6px;background:#fff;padding:13px 14px;
  color:var(--black-500);font:500 14px/1.35 var(--font-body);
}
.utility-form textarea{min-height:116px;resize:vertical}
.utility-form input:focus,.utility-form select:focus,.utility-form textarea:focus{outline:2px solid rgba(121,98,152,.22);border-color:var(--primary-400)}
.utility-form .btn{justify-content:center;width:100%;margin-top:2px}
.utility-form .btn svg{width:17px;height:17px}
.utility-form-note{color:#6d6870;font-size:12px;line-height:1.45;text-align:center}

.utility-image-band{background:#fbf8f5}
.utility-image-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.utility-image-frame{overflow:hidden;min-height:480px;border-radius:8px;background:var(--secondary-50)}
.utility-image-frame img{width:100%;height:100%;min-height:480px;object-fit:cover}
.utility-image-frame-tall,.utility-image-frame-tall img{min-height:620px}
.utility-image-split>div>p{margin:18px 0 28px;color:var(--neutral-03);font-size:16px;line-height:1.72}
.utility-image-split .utility-checks{margin-bottom:30px}

.utility-provider-cta{position:relative;overflow:hidden;padding:94px 0;background:#3a2551;color:#fff}
.utility-provider-cta::before{content:"";position:absolute;inset:0;background:url('../assets/molecules.png') center/cover no-repeat;opacity:.24}
.utility-provider-panel{
  position:relative;max-width:1120px;margin:0 auto;padding:60px 70px;border:1px solid rgba(255,255,255,.24);
  border-radius:24px;background:rgba(104,68,147,.6);text-align:center;backdrop-filter:blur(8px);
}
.utility-provider-panel h2{max-width:800px;margin:0 auto;font-family:var(--font-head);font-size:42px;font-weight:600;line-height:1.13;letter-spacing:0}
.utility-provider-panel p{max-width:760px;margin:16px auto 26px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.65}
.utility-provider-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.utility-provider-actions .btn svg{width:17px;height:17px}
.utility-inline-light{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.5)}
.utility-inline-light svg{width:16px;height:16px}

.utility-contact-options{background:#fbf8f5}
.utility-faq-panel{
  display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:70px;align-items:start;
  padding:58px;border:1px solid rgba(255,255,255,.84);border-radius:24px;background:rgba(255,255,255,.64);
}
.utility-faq-intro{position:sticky;top:120px}
.utility-faq-intro h2{font-family:var(--font-head);font-size:42px;font-weight:500;line-height:1.14;color:var(--primary-500)}
.utility-faq-intro p{margin:16px 0 24px;color:var(--neutral-03);font-size:15px;line-height:1.65}
.utility-accordion{border-top:1px solid rgba(87,59,126,.18)}
.utility-accordion-item{border-bottom:1px solid rgba(87,59,126,.18)}
.utility-accordion-item>button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:22px 0;color:var(--black-500);font-size:16px;font-weight:700;text-align:left}
.utility-accordion-item>button svg{flex:0 0 auto;width:20px;height:20px;color:var(--primary-500);transition:transform .25s ease}
.utility-accordion-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.utility-accordion-answer>p{min-height:0;overflow:hidden;color:var(--neutral-03);font-size:14px;line-height:1.65}
.utility-accordion-item.open .utility-accordion-answer{grid-template-rows:1fr}
.utility-accordion-item.open .utility-accordion-answer>p{padding:0 34px 22px 0}
.utility-accordion-item.open>button svg{transform:rotate(180deg)}
.provider-search{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;max-width:920px;margin:-24px auto 80px;
  padding:14px 16px 14px 22px;border:1px solid rgba(87,59,126,.16);border-radius:8px;background:#fff;box-shadow:0 24px 58px rgba(66,44,92,.1);
}
.provider-search>svg{width:22px;height:22px;color:var(--primary-400)}
.provider-search input{height:48px;min-width:0;border:0;outline:0;color:var(--black-500);font:500 16px var(--font-body)}
.provider-search .btn svg{width:17px;height:17px}
.provider-list-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:32px}
.provider-list-head h2{font-family:var(--font-head);font-size:42px;font-weight:500;color:var(--primary-500)}
.provider-list-head>p{max-width:510px;color:var(--neutral-03);font-size:15px;line-height:1.6}
.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.provider-card{padding:30px;border:1px solid rgba(87,59,126,.14);border-radius:8px;background:rgba(255,255,255,.84)}
.provider-status{display:inline-flex;align-items:center;gap:7px;color:var(--primary-400);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.provider-status svg{width:17px;height:17px}
.provider-card h3{margin:18px 0 8px;font-family:var(--font-head);font-size:24px;font-weight:600;color:var(--primary-500)}
.provider-card p{color:var(--neutral-03);font-size:14px;line-height:1.55}
.provider-card .provider-city{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-weight:700;color:var(--black-500)}
.provider-city svg{width:16px;height:16px;color:var(--primary-400)}
.provider-card>a{display:inline-flex;align-items:center;gap:7px;margin-top:22px;color:var(--primary-500);font-size:14px;font-weight:800}

.utility-portfolio{padding-bottom:110px}
.utility-range-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.utility-range-card{
  display:flex;flex-direction:column;min-height:610px;padding:28px 28px 24px;border:1px solid rgba(255,255,255,.8);
  border-radius:8px;background:rgba(255,255,255,.58);box-shadow:0 24px 62px rgba(70,45,103,.08);
}
.utility-range-logo{width:250px;height:72px;margin:0 auto 12px;object-fit:contain}
.utility-range-card>p{min-height:78px;color:var(--neutral-03);font-size:14px;line-height:1.55;text-align:center}
.utility-range-media{display:flex;align-items:center;justify-content:center;flex:1;min-height:330px;margin:18px 0;padding:10px;background:rgba(255,255,255,.32)}
.utility-range-media img{width:100%;height:100%;max-height:340px;object-fit:contain;mix-blend-mode:multiply}
.utility-range-card>a{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:max-content;margin:0 auto;color:var(--primary-500);font-size:14px;font-weight:800}
.utility-device-band{background:#fbf8f5}

.ecosystem-journey{background:#fbf8f5}
.ecosystem-steps{list-style:none;display:grid;gap:0;margin-top:30px;border-top:1px solid rgba(87,59,126,.14)}
.ecosystem-steps li{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid rgba(87,59,126,.14)}
.ecosystem-steps li>span{color:var(--primary-400);font-size:13px;font-weight:800}
.ecosystem-steps strong{font-family:var(--font-head);font-size:19px;color:var(--primary-500)}
.ecosystem-steps p{margin:4px 0 0!important;font-size:14px!important;line-height:1.5!important}

.training-path{background:#fbf8f5}
.training-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(87,59,126,.18);border-bottom:1px solid rgba(87,59,126,.18)}
.training-steps article{min-height:260px;padding:30px 26px;border-right:1px solid rgba(87,59,126,.18)}
.training-steps article:last-child{border-right:0}
.training-steps span{color:var(--primary-400);font-size:13px;font-weight:800}
.training-steps h3{margin:26px 0 10px;font-family:var(--font-head);font-size:22px;font-weight:600;color:var(--primary-500)}
.training-steps p{color:var(--neutral-03);font-size:14px;line-height:1.6}

.provider-stat-band{background:#dce9e2}
.provider-stat-band>.container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:42px;padding-bottom:42px}
.provider-stat-band .container>div{display:flex;flex-direction:column;gap:6px;padding:0 30px;border-right:1px solid rgba(37,25,53,.18);text-align:center}
.provider-stat-band .container>div:last-child{border-right:0}
.provider-stat-band strong{font-family:var(--font-head);font-size:38px;font-weight:600;color:var(--primary-500)}
.provider-stat-band span{color:#314238;font-size:13px;line-height:1.35}
.provider-benefit-split{grid-template-columns:minmax(0,1.05fr) minmax(420px,.8fr)}

.portal-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(480px,.9fr);gap:86px;align-items:center}
.portal-intro .portal-lock{margin-bottom:28px}
.portal-intro>p{max-width:560px;margin-top:26px;color:var(--neutral-03);font-size:14px;line-height:1.65}
.portal-options{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--neutral-03);font-size:13px}
.portal-options label{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-weight:600}
.portal-options input{width:16px;height:16px}
.portal-options a,.utility-form-note a{color:var(--primary-500);font-weight:800}

.legal-page{background:#fbf8f5}
.legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:90px;align-items:start;max-width:1180px}
.legal-aside{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;padding-top:8px}
.legal-aside .utility-icon{margin-bottom:22px}
.legal-aside strong{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--primary-500)}
.legal-aside>span:not(.utility-icon){margin-top:5px;color:var(--neutral-03);font-size:14px}
.legal-aside>a{display:inline-flex;align-items:center;gap:7px;margin-top:26px;color:var(--primary-500);font-size:14px;font-weight:800}
.legal-content{border-top:1px solid rgba(87,59,126,.16)}
.legal-content>section{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:34px 0;border-bottom:1px solid rgba(87,59,126,.16)}
.legal-content>section>span{padding-top:5px;color:var(--primary-400);font-size:12px;font-weight:800}
.legal-content h2{font-family:var(--font-head);font-size:25px;font-weight:600;color:var(--primary-500)}
.legal-content p{max-width:760px;margin-top:10px;color:var(--neutral-03);font-size:16px;line-height:1.72}

.route-utility .site-footer{min-height:522px;box-sizing:border-box;background:#241734}
.route-utility .footer-by{display:none}

@media (max-width:1024px){
  .utility-hero h1{font-size:50px}
  .utility-form-layout,.portal-layout{grid-template-columns:1fr;gap:54px}
  .utility-card-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .utility-range-card{min-height:560px;padding-left:20px;padding-right:20px}
  .utility-range-logo{width:210px}
  .training-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .training-steps article:nth-child(2){border-right:0}
  .training-steps article:nth-child(-n+2){border-bottom:1px solid rgba(87,59,126,.18)}
  .provider-stat-band>.container{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .provider-stat-band .container>div:nth-child(2){border-right:0}
  .utility-faq-panel{grid-template-columns:1fr;gap:38px}
  .utility-faq-intro{position:static}
}

@media (max-width:760px){
  .utility-hero,.utility-hero-inner{min-height:350px}
  .utility-hero-copy{width:100%;padding:62px 0}
  .utility-hero h1{font-size:40px;line-height:1.12}
  .utility-hero p{font-size:16px;line-height:1.55}
  .utility-hero-split .utility-hero-inner{display:block}
  .utility-hero-split .utility-hero-copy{text-align:center;padding:64px 0}
  .utility-hero-split .utility-hero h1,.utility-hero-split .utility-hero p{margin-left:auto}
  .utility-hero-image{display:none}
  .utility-section{padding:66px 0}
  .utility-heading{margin-bottom:34px}
  .utility-heading h2,.utility-image-split h2,.utility-contact-copy h2,.portal-intro h2{font-size:32px}
  .utility-card-grid-3,.utility-card-grid-4,.utility-range-grid,.utility-image-split,.provider-grid,.provider-benefit-split{grid-template-columns:1fr}
  .utility-icon-card{min-height:0;padding:28px 24px}
  .utility-form{padding:28px 22px}
  .utility-form-row{grid-template-columns:1fr}
  .utility-faq-panel{padding:34px 24px;border-radius:18px}
  .utility-faq-intro h2{font-size:32px}
  .utility-image-split{gap:38px}
  .utility-image-frame,.utility-image-frame img,.utility-image-frame-tall,.utility-image-frame-tall img{min-height:340px}
  .utility-provider-cta{padding:64px 0}
  .utility-provider-panel{padding:42px 22px;border-radius:18px}
  .utility-provider-panel h2{font-size:32px}
  .provider-search{grid-template-columns:auto minmax(0,1fr);margin-bottom:56px;padding:13px 16px}
  .provider-search .btn{grid-column:1/-1;justify-content:center}
  .provider-list-head{display:block}
  .provider-list-head h2{font-size:32px}
  .provider-list-head>p{margin-top:12px}
  .utility-range-card{min-height:520px}
  .utility-range-media{min-height:290px}
  .training-steps{grid-template-columns:1fr}
  .training-steps article{min-height:0;border-right:0;border-bottom:1px solid rgba(87,59,126,.18)!important}
  .training-steps article:last-child{border-bottom:0!important}
  .provider-stat-band>.container{grid-template-columns:1fr 1fr;padding-top:30px;padding-bottom:30px}
  .provider-stat-band .container>div{padding:0 10px}
  .provider-stat-band .container>div:nth-child(2n){border-right:0}
  .provider-stat-band strong{font-size:30px}
  .legal-layout{grid-template-columns:1fr;gap:34px}
  .legal-aside{position:static;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  .legal-aside .utility-icon{grid-row:1/3;margin:0}
  .legal-aside>a{grid-column:1/-1}
  .legal-content>section{grid-template-columns:36px 1fr;gap:12px;padding:28px 0}
  .legal-content h2{font-size:22px}
  .legal-content p{font-size:15px}
}

@media (max-width:420px){
  .utility-hero h1{font-size:36px}
  .provider-stat-band>.container{grid-template-columns:1fr}
  .provider-stat-band .container>div{padding:18px 0;border-right:0;border-bottom:1px solid rgba(37,25,53,.18)}
  .provider-stat-band .container>div:last-child{border-bottom:0}
}

/* ============================================================
   PRODUCT DETAIL TEMPLATES — Figma 8334:12170 / 10370:14180
   ============================================================ */
.page-product{background:#fff}
.page-product .pp-hero-text h1{font-size:46px;line-height:1.16}
.page-product .pp-tag{font-size:15px;line-height:1.55}
.page-product-dp .pp-hero-media img{transform:none;max-height:560px}
.page-product-dp .pp-hero-media{background:#f3f3f3}

.pp-dp-overview,.pp-dp-who-section,.pp-dp-ingredients-section,.pp-dp-use-section{
  background:
    radial-gradient(circle at 24px 24px,rgba(126,92,171,.075) 0 7px,transparent 8px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf8ff 0%,#f3eafb 100%)!important;
}
.pp-dp-overview-split{box-shadow:none}
.pp-dp-overview .pp-overview-media{display:flex;align-items:center;justify-content:center;background:transparent;overflow:visible}
.pp-dp-overview .pp-overview-media img{width:auto;height:100%;max-height:500px;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(87,59,126,.12))}

.pp-dp-who-section>.container{max-width:none;padding:0}
.pp-dp-who{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);gap:72px;align-items:center;
  height:100%;padding:40px max(60px,calc((100vw - 1280px)/2));color:#fff;
  background:
    radial-gradient(circle at 12% 120%,rgba(179,129,226,.3),transparent 38%),
    linear-gradient(112deg,#332046 0%,#65419a 63%,#783fd0 100%);
}
.pp-dp-who h2,.pp-dp-ingredients h2,.pp-dp-use h2,.pp-provider-panel h2{
  font-family:var(--font-head);font-size:42px;font-weight:500;line-height:1.14;letter-spacing:0;
}
.pp-dp-who h2{color:#fff}
.pp-dp-intro{margin:14px 0 16px;color:rgba(255,255,255,.86);font-size:15px}
.pp-dp-list{list-style:none;display:grid;gap:10px}
.pp-dp-list li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:13.5px;line-height:1.45}
.pp-dp-list .df-check{flex:0 0 auto;color:#fff}
.pp-dp-who-media{height:394px;border-radius:8px;overflow:hidden}
.pp-dp-who-media img{width:100%;height:100%;object-fit:cover}

.pp-dp-ingredients-section>.container,.pp-dp-use-section>.container{height:100%;max-width:1440px;padding-left:60px;padding-right:60px}
.pp-dp-ingredients{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);height:100%;overflow:hidden;
  border:1px solid rgba(255,255,255,.86);border-radius:8px;background:rgba(255,255,255,.58);
}
.pp-dp-ingredients>div:first-child{padding:40px 44px}
.pp-dp-ingredients h2,.pp-dp-use h2{color:var(--primary-500)}
.pp-dp-ingredient-list{display:grid;gap:13px;margin-top:22px}
.pp-dp-ingredient-list h3{font-family:var(--font-head);font-size:16px;font-weight:700;color:#6944aa}
.pp-dp-ingredient-list p{margin-top:2px;color:var(--primary-400);font-size:12.5px;line-height:1.4}
.pp-dp-ingredients-media{min-height:100%;overflow:hidden}
.pp-dp-ingredients-media img{width:100%;height:100%;object-fit:cover}

.pp-dp-use{
  height:100%;padding:40px;background:
    linear-gradient(90deg,rgba(246,242,251,.96) 0%,rgba(246,242,251,.82) 45%,rgba(246,242,251,.06) 78%),
    url('../assets/dp-heroshot.jpg') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.88);border-radius:8px;
}
.pp-dp-use-panel{display:flex;flex-direction:column;justify-content:center;width:53%;height:100%;padding:34px;border:1px solid rgba(87,59,126,.12);border-radius:8px;background:rgba(255,255,255,.62);backdrop-filter:blur(5px)}
.pp-dp-use-panel>p{margin:14px 0 18px;color:var(--black-500);font-size:14px;line-height:1.55}
.pp-dp-use-panel ol{list-style:none;display:grid;gap:9px;padding-top:16px;border-top:1px solid rgba(87,59,126,.15)}
.pp-dp-use-panel li{display:grid;grid-template-columns:22px 1fr;gap:8px;color:var(--black-500);font-size:13px;line-height:1.4}
.pp-dp-use-panel li>span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--primary-500);border-radius:50%;color:var(--primary-500);font-size:10px;font-weight:800}

.pp-provider-section{position:relative;overflow:hidden;color:#fff;background:#4a2774}
.pp-provider-section::before{content:"";position:absolute;inset:0;background:url('../assets/molecules.png') center/cover no-repeat;opacity:.32}
.pp-provider-section>.container{position:relative;display:flex;align-items:center;height:100%}
.pp-provider-panel{width:100%;max-width:1080px;margin:auto;padding:52px 70px;border:1px solid rgba(255,255,255,.24);border-radius:24px;background:rgba(109,66,160,.48);text-align:center;backdrop-filter:blur(8px)}
.pp-provider-panel h2{color:#fff}
.pp-provider-panel>p{max-width:800px;margin:18px auto 24px;color:rgba(255,255,255,.82);font-size:14px;line-height:1.6}
.pp-provider-panel>.btn{margin:0 auto}
.pp-provider-contact{display:block;margin-top:18px;color:rgba(255,255,255,.78);font-size:12.5px}
.pp-provider-contact a{margin-left:5px;color:#fff;font-weight:800;border-bottom:1px solid rgba(255,255,255,.5)}

.route-product .site-footer{height:594px;min-height:594px;box-sizing:border-box;background:#241734}
.route-product .footer-inner{padding-top:108px;padding-bottom:60px}
.route-product .footer-by{display:none}
.route-product .footer-desc{margin-top:33px}
.route-product .footer-bottom-inner{padding-top:29px;padding-bottom:112px}

@media (min-width:901px){
  .page-product .pp-hero{height:829px}
  .page-product .pp-breadcrumb{height:48px;padding-top:17px}
  .page-product .pp-hero-inner{height:781px;min-height:0;padding-top:72px;padding-bottom:72px}
  .page-product .pp-hero-media{height:600px;aspect-ratio:auto}

  .page-product-dc .pp-overview{height:688px;padding:50px 0}
  .page-product-dc .pp-overview>.container,.page-product-dc .pp-split{height:100%}
  .page-product-dc .pp-ing-section{height:849px;padding:72px 0}
  .page-product-dc .pp-ing-feature{height:470px;overflow:hidden}
  .page-product-dc .pp-ing-media{position:relative;align-self:stretch;height:auto;min-height:0;overflow:hidden}
  .page-product-dc .pp-ing-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .page-product-dc .pp-clinical-section{height:998px;padding:82px 0}
  .page-product-dc .pp-clinical-panel{min-height:570px}

  .page-product-dp .pp-overview{height:680px;padding:0 0 50px}
  .page-product-dp .pp-overview>.container,.page-product-dp .pp-dp-overview-split{height:630px}
  .page-product-dp .pp-dp-overview-split{padding:64px 80px;background:transparent;border:0;border-radius:0}
  .page-product-dp .pp-dp-who-section{height:526px;padding:0 0 50px}
  .page-product-dp .pp-dp-who{height:476px}
  .page-product-dp .pp-dp-ingredients-section{height:534px;padding:0 0 70px}
  .page-product-dp .pp-dp-ingredients{height:464px}
  .page-product-dp .pp-dp-use-section{height:702px;padding:0 0 70px}
  .page-product-dp .pp-dp-use{height:632px}
  .page-product-dp .pp-provider-section{height:724px}
}

@media (max-width:900px){
  .page-product .pp-hero{height:auto}
  .page-product .pp-hero-inner{grid-template-columns:1fr;gap:28px;height:auto;min-height:0;padding-top:12px;padding-bottom:48px;text-align:center}
  .page-product .pp-hero-media{height:auto;max-width:600px;width:100%;margin:0 auto;aspect-ratio:1/1}
  .page-product .pp-hero-text h1{font-size:38px}
  .page-product .pp-eyebrow{display:none}
  .page-product .pp-cta{justify-content:center}
  .page-product .pp-split,.page-product .pp-ing-feature,.page-product .pp-clinical-panel{grid-template-columns:1fr}
  .page-product .pp-overview-media,.page-product .pp-ing-media,.page-product .pd-ba{order:-1}
  .page-product-dc .pp-overview,.page-product-dc .pp-ing-section,.page-product-dc .pp-clinical-section{padding:56px 0}
  .page-product-dc .pp-split,.page-product-dc .pp-ing-feature,.page-product-dc .pp-clinical-panel{padding:28px 24px}
  .page-product-dc .pp-ing-media{position:relative;min-height:340px}
  .page-product-dc .pp-ing-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .page-product-dc .pp-results{grid-template-columns:1fr 1fr}
  .pp-dp-overview,.pp-dp-who-section,.pp-dp-ingredients-section,.pp-dp-use-section{height:auto!important;padding:56px 0!important}
  .pp-dp-overview .pp-split,.pp-dp-who,.pp-dp-ingredients{height:auto!important;grid-template-columns:1fr}
  .pp-dp-overview .pp-split{padding:34px 26px}
  .pp-dp-overview .pp-overview-media{min-height:380px}
  .pp-dp-who{padding:42px 28px}
  .pp-dp-who-media{height:auto;min-height:340px}
  .pp-dp-ingredients-section>.container,.pp-dp-use-section>.container{padding-left:28px;padding-right:28px}
  .pp-dp-ingredients-media{min-height:360px}
  .pp-dp-use{height:auto!important;min-height:0;padding:300px 0 0;background-size:auto 300px;background-position:center top;background-repeat:no-repeat}
  .pp-dp-use-panel{width:100%;max-width:none;height:auto;padding:30px 26px;border:0;border-top:1px solid rgba(87,59,126,.12);border-radius:0;background:rgba(255,255,255,.92);backdrop-filter:none}
  .pp-provider-section{height:auto!important;padding:70px 0}
  .pp-provider-panel{padding:42px 24px;border-radius:18px}
  .pp-provider-panel h2{font-size:32px}
  .route-product .site-footer{height:auto;min-height:0}
  .route-product .footer-inner{padding-top:70px;padding-bottom:46px}
  .route-product .footer-desc{margin-top:0}
  .route-product .footer-bottom-inner{padding-top:20px;padding-bottom:20px}
}

@media (max-width:560px){
  .page-product .pp-hero-text h1{font-size:28px}
  .page-product .pp-tag{font-size:13px}
  .page-product .pp-hero-inner{text-align:center}
  .page-product .pp-cta{justify-content:center}
  .pp-dp-overview .pp-overview-media{min-height:300px}
  .pp-dp-who h2,.pp-dp-ingredients h2,.pp-dp-use h2{font-size:32px}
  .pp-dp-who-media,.pp-dp-ingredients-media{min-height:280px}
  .pp-dp-ingredients>div:first-child{padding:32px 24px}
  .pp-dp-use{min-height:0;padding:270px 0 0;background-size:auto 270px}
  .pp-dp-use-panel{padding:24px 20px}
}

.footer-contact li{display:flex;align-items:flex-start;gap:8px}
.footer-contact svg{flex:0 0 auto;width:14px;height:14px;margin-top:3px;stroke-width:1.8}
.route-blog-post .site-footer{min-height:594px;box-sizing:border-box;background:#241734}
.route-blog-post .footer-inner{padding-top:108px;padding-bottom:60px}
.route-blog-post .footer-by{display:none}
.route-blog-post .footer-desc{margin-top:33px}
.route-blog-post .footer-bottom-inner{padding-top:29px;padding-bottom:112px}
@media (max-width:900px){
  .route-blog-post .site-footer{min-height:0}
  .route-blog-post .footer-inner{padding-top:70px;padding-bottom:46px}
  .route-blog-post .footer-desc{margin-top:0}
  .route-blog-post .footer-bottom-inner{padding-top:20px;padding-bottom:20px}
}

/* DermaFacial desktop band map from Figma frame 8334:3989. */
@media (min-width:901px){
  .page-dermafacial .df-about{height:850px;box-sizing:border-box}
  .page-dermafacial .df-tech{height:849px;box-sizing:border-box}
  .page-dermafacial .df-comb{height:718px;box-sizing:border-box}
  .page-dermafacial .df-step:not(.df-faq){height:636px;box-sizing:border-box}
  .page-dermafacial .df-why{height:928px;box-sizing:border-box;padding-top:49px;padding-bottom:49px}
  .page-dermafacial .df-diff{height:1138px;box-sizing:border-box}

  /* Header is in normal document flow in the app; these values preserve the
     visible Figma bands whose navbar is overlaid inside each source frame.
     .page-index .hero is deliberately absent: the home hero sizes itself from
     aspect-ratio so the frame stays full-bleed. A fixed height here would make
     aspect-ratio resolve the *width* backwards (839 * 1440/840 = 1438px) and
     leave a white gutter on viewports wider than 1440. */
  .page-dermaceuticals .blog{height:713px;min-height:713px}
  .page-dermaprofessional .blog{height:712px;min-height:712px}
  .page-skin-analyzer .dev-band{height:810px;min-height:810px}
  .page-blogs .blog{height:1415px}

  .page-active-human-exosomes .active-hero,
  .page-active-pdrn .active-hero,
  .page-active-plant-exosomes .active-hero{height:430px}
  .page-active-human-exosomes::after,
  .page-active-pdrn::after,
  .page-active-plant-exosomes::after{content:"";display:block;background:transparent}
  .page-active-human-exosomes::after{height:93px}
  .page-active-pdrn::after{height:87px}
  .page-active-plant-exosomes::after{height:61px}
}

/* ============================================================
   FINAL FIGMA ALIGNMENT — responsive header, product details, footer
   ============================================================ */
.site-header .logo img{height:46px}
.site-footer{background:#2d1f42}
.site-footer .logo-light img{height:30px}
.footer-contact .footer-mobile-only,.footer-mobile-directory{display:none}

.pp-title-dc-mobile,.pp-tag-dc-mobile{display:none}
.pp-hero-media picture,.pp-hero-media picture img,.pp-ing-media picture,.pp-ing-media picture img,.pp-dp-who-media picture,.pp-dp-who-media picture img{width:100%;height:100%}
.pp-hero-media picture,.pp-ing-media picture,.pp-dp-who-media picture{display:block}
.pp-hero-media-figma{padding:0;background:transparent}
.pp-hero-media-figma>picture>img{max-height:none;object-fit:cover;filter:none;transform:none}
.pp-disclaimer{display:grid;gap:2px;margin-top:16px;color:var(--primary-400);font-size:12px;line-height:1.35}
.pp-disclaimer strong{color:var(--primary-500)}
.pp-result p svg{display:block;width:24px;height:24px;margin-bottom:12px;color:#b39bdd;stroke-width:1.7}
.pp-result:first-child{color:#fff;border-color:transparent;background:linear-gradient(135deg,#7448b7,#9c60db)}
.pp-result:first-child .pp-metric,.pp-result:first-child p{color:#fff}
.pp-dp-use-checks{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(87,59,126,.18)}
.pp-dp-use-checks p{display:flex;align-items:flex-start;gap:9px;color:var(--black-500);font-size:12px;line-height:1.4}
.pp-dp-use-checks svg{flex:0 0 auto;width:17px;height:17px;color:var(--primary-500);stroke-width:1.6}
.pp-dp-use-panel li>span{width:auto;height:auto;border:0;border-radius:0;font-size:13px;line-height:1.4}
.utility-hero-split h1,.utility-hero-split p{margin-left:0}

@media (min-width:901px){
  .page-product-dp .pp-dp-use{
    background:
      linear-gradient(90deg,rgba(246,242,251,.96) 0%,rgba(246,242,251,.82) 45%,rgba(246,242,251,.06) 78%),
      url('../assets/figma-dp-howto-desktop.png') center/cover no-repeat;
  }
}

@media (max-width:760px){
  .site-header .container.header-inner{padding-left:16px;padding-right:16px;gap:8px}
  .site-header .logo img{height:58px;margin-left:-9px}
  .btn-provider-desktop{display:inline-flex;margin-left:auto;height:36px;padding:0 13px;font-size:12px;border-width:1px}
  .hamburger{flex:0 0 auto;padding:5px}
  .hamburger span{width:23px}
}

@media (max-width:560px){
  /* The supplied mobile frames use a 64px website navbar. Their extra 44px
     status bar is device chrome, so it is intentionally not recreated here. */
  .page-product .pp-breadcrumb{height:34px;padding:0 16px;align-items:center;font-size:13px}
  .page-product .pp-hero-inner{width:100%;max-width:none;margin:0;grid-template-columns:1fr;text-align:center}
  .page-product .pp-hero-media{width:100%;max-width:none;margin:0;border-radius:24px;aspect-ratio:auto;overflow:hidden}
  .page-product .pp-hero-media:not(.pp-hero-media-figma){padding:18px;background:#f4f4f4}
  .page-product .pp-hero-media:not(.pp-hero-media-figma) img{width:100%;height:100%;max-height:none;object-fit:contain;transform:none}
  .page-product .pp-hero-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}
  .page-product .pp-hero-text h1{max-width:none;margin-bottom:9px;font-size:32px;line-height:1.15}
  .page-product .pp-tag{max-width:350px;margin:0 0 15px;font-size:13px;line-height:1.45}
  .page-product .pp-cta .btn{height:48px;padding:0 25px;font-size:15px}

  .page-product-dc .pp-hero{height:604px}
  .page-product-dc .pp-hero-inner{height:570px;grid-template-rows:324px 181px;gap:8px;padding:29px 16px 28px}
  .page-product-dc .pp-hero-media{width:324px;height:324px;margin:0 auto}
  .page-product-dc .pp-hero-text{height:181px}
  .page-product-dc .pp-title-default,.page-product-dc .pp-tag-default{display:none}
  .page-product-dc .pp-title-dc-mobile,.page-product-dc .pp-tag-dc-mobile{display:inline}
  .page-product-dc .pp-hero-text h1{font-size:34px;line-height:1.2;white-space:nowrap}
  .page-product-dc .pp-tag{max-width:345px;font-size:14px;line-height:1.42}

  .page-product-dp .pp-hero{height:674px}
  .page-product-dp .pp-hero-inner{height:640px;grid-template-rows:325px 219px;gap:24px;padding:36px 16px}
  .page-product-dp .pp-hero-media{width:324px;height:325px;margin:0 auto}
  .page-product-dp .pp-hero-text{height:219px}
  .page-product-dp .pp-hero-text h1{font-size:34px;line-height:1.16}
  .page-product-dp .pp-tag{font-size:13px;line-height:1.45}

  /* DermaCeuticals: 709 / 702 / 1057px bands from frame 10370:5930. */
  .page-product-dc .pp-overview{height:709px!important;padding:24px 0 0!important}
  .page-product-dc .pp-overview>.container{height:685px;padding:0 16px}
  .page-product-dc .pp-overview .pp-split{
    height:685px;grid-template-columns:1fr;grid-template-rows:324px 305px;gap:24px;
    padding:16px 19px;border:0;border-radius:24px;align-items:start;overflow:hidden;
  }
  .page-product-dc .pp-overview-media{width:324px;height:324px;min-height:0;aspect-ratio:auto;border-radius:16px}
  .page-product-dc .pp-overview .pp-split>div:first-child{height:305px}
  .page-product-dc .pp-overview h2{height:41px;margin:0 0 16px;font-size:36px;line-height:41px}
  .page-product-dc .pp-overview p{height:120px;margin:0;overflow:hidden;font-size:13px;line-height:20px}
  .page-product-dc .pd-whatis-actions{display:grid;gap:16px;margin-top:16px}
  .page-product-dc .pd-whatis-actions .btn{justify-content:center;width:100%;height:48px;padding:0 16px}
  .page-product-dc .pd-whatis-actions .df-btn-grad{order:-1}

  .page-product-dc .pp-ing-section{height:702px!important;padding:50px 16px!important;overflow:hidden}
  .page-product-dc .pp-ing-section>.container{height:602px;padding:0}
  .page-product-dc .pp-ing-section>.container>.section-title{height:48px;margin:0;text-align:left;font-size:36px;line-height:48px}
  .page-product-dc .pp-tab-pills{justify-content:flex-start;flex-wrap:nowrap;width:100%;height:58px;margin:16px 0;overflow:hidden}
  .page-product-dc .pp-tab-pill{flex:0 0 auto;height:48px;padding:0 18px;font-size:14px}
  .page-product-dc .pp-ing-feature{
    height:464px;grid-template-columns:1fr;grid-template-rows:324px 92px;gap:16px;
    padding:16px 19px;border-radius:24px;overflow:hidden;
  }
  .page-product-dc .pp-ing-media{width:324px;height:324px;min-height:0;border-radius:16px;overflow:hidden}
  .page-product-dc .pp-ing-media img{position:static;width:100%;height:100%;object-fit:cover}
  .page-product-dc .pp-ing-feature>div:first-child{height:92px;overflow:hidden}
  .page-product-dc .pp-ing-feature h3{margin:0 0 7px;font-size:19px;line-height:24px}
  .page-product-dc .pp-ing-feature p{max-height:60px;overflow:hidden;font-size:13px;line-height:18px}

  .page-product-dc .pp-clinical-section{height:1057px!important;padding:24px 16px!important;overflow:hidden}
  .page-product-dc .pp-clinical-section>.container{height:100%;padding:0}
  .page-product-dc .pp-clinical-section .section-title{height:144px;margin:0;text-align:left;font-size:36px;line-height:48px}
  .page-product-dc .pp-clinical-section .pp-tab-pills{height:58px;margin:16px 0}
  .page-product-dc .pp-clinical-panel{display:flex;height:775px;min-height:0;flex-direction:column;gap:16px;padding:0;border-radius:0;background:transparent}
  .page-product-dc .pd-ba{order:-1;width:361px;height:361px;aspect-ratio:auto;border-radius:24px}
  .page-product-dc .pp-clinical-panel>div:first-child{height:398px}
  .page-product-dc .pp-clinical-panel h3{height:48px;margin:0 0 16px;font-size:36px;line-height:48px}
  .page-product-dc .pp-results{grid-template-columns:1fr 1fr;grid-template-rows:130px 130px;gap:16px;height:276px}
  .page-product-dc .pp-result{min-height:0;height:130px;padding:16px;border-radius:16px}
  .page-product-dc .pp-metric{font-size:42px}
  .page-product-dc .pp-result p{font-size:12px;line-height:1.35}
  .page-product-dc .pp-result p svg{width:24px;height:24px;margin-bottom:11px}
  .page-product-dc .pp-disclaimer{height:42px;margin-top:16px;font-size:12px;line-height:20px}

  /* DermaProfessional: 728 / 641 / 1251 / 524px bands from frame 10370:7841. */
  .page-product-dp .pp-dp-overview{height:728px!important;padding:40px 0 0!important}
  .page-product-dp .pp-dp-overview>.container{height:688px;padding:0}
  .page-product-dp .pp-dp-overview-split{
    height:688px!important;grid-template-columns:1fr;grid-template-rows:324px 340px;gap:24px;
    padding:0 35px;border:0;border-radius:0;background:transparent;align-items:start;overflow:hidden;
  }
  .page-product-dp .pp-dp-overview .pp-overview-media{width:324px;height:324px;min-height:0;aspect-ratio:auto;margin:0;border-radius:24px}
  .page-product-dp .pp-dp-overview .pp-overview-media img{width:100%;height:100%;max-height:none;object-fit:contain;filter:none}
  .page-product-dp .pp-dp-overview-split>div:first-child{height:340px;overflow:hidden}
  .page-product-dp .pp-overview h2{height:41px;margin:0 0 16px;font-size:36px;line-height:41px}
  .page-product-dp .pp-overview p{margin:0 0 16px;font-size:13px;line-height:20px}

  .page-product-dp .pp-dp-who-section{
    height:641px!important;padding:34px!important;
    background:radial-gradient(circle at 40% 100%,rgba(179,129,226,.28),transparent 44%),linear-gradient(112deg,#332046 0%,#65419a 63%,#783fd0 100%)!important;
  }
  .page-product-dp .pp-dp-who-section>.container{height:569px;padding:0}
  .page-product-dp .pp-dp-who{
    height:569px!important;grid-template-columns:1fr;grid-template-rows:324px 221px;gap:24px;
    padding:0;background:transparent;align-items:start;overflow:hidden;
  }
  .page-product-dp .pp-dp-who-media{order:-1;width:324px;height:324px;min-height:0;border-radius:24px}
  .page-product-dp .pp-dp-who>div:first-child{height:221px;overflow:hidden}
  .page-product-dp .pp-dp-who h2{font-size:36px;line-height:41px}
  .page-product-dp .pp-dp-intro{margin:12px 0 10px;font-size:13px;line-height:20px}
  .page-product-dp .pp-dp-list{gap:6px}
  .page-product-dp .pp-dp-list li{gap:7px;font-size:11.5px;line-height:17px}
  .page-product-dp .pp-dp-list .df-check{width:15px;height:15px;font-size:9px}

  .page-product-dp .pp-dp-ingredients-section{height:490px!important;padding:50px 16px 24px!important}
  .page-product-dp .pp-dp-ingredients-section>.container{height:416px;padding:0}
  .page-product-dp .pp-dp-ingredients{position:relative;display:block;height:416px!important;border:0;border-radius:24px;overflow:hidden}
  .page-product-dp .pp-dp-ingredients::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.74) 72%,rgba(255,255,255,.1));z-index:1}
  .page-product-dp .pp-dp-ingredients>div:first-child{position:relative;z-index:2;height:348px;padding:34px 19px;overflow:hidden}
  .page-product-dp .pp-dp-ingredients h2{font-size:36px;line-height:41px}
  .page-product-dp .pp-dp-ingredient-list{gap:10px;margin-top:15px}
  .page-product-dp .pp-dp-ingredient-list h3{font-size:15px;line-height:19px}
  .page-product-dp .pp-dp-ingredient-list p{font-size:11.5px;line-height:16px}
  .page-product-dp .pp-dp-ingredients-media{position:absolute;inset:0;z-index:0;min-height:0}
  .page-product-dp .pp-dp-ingredients-media img{width:100%;height:100%;object-fit:cover}

  .page-product-dp .pp-dp-use-section{height:761px!important;padding:0 16px 50px!important}
  .page-product-dp .pp-dp-use-section>.container{height:711px;padding:0}
  .page-product-dp .pp-dp-use{
    position:relative;height:711px!important;padding:361px 16px 16px;border-radius:24px;
    background:url('../assets/figma-dp-howto.png') 16px 16px/329px 329px no-repeat,rgba(255,255,255,.55);
  }
  .page-product-dp .pp-dp-use-panel{width:329px;height:334px;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;justify-content:flex-start}
  .page-product-dp .pp-dp-use h2{font-size:36px;line-height:41px}
  .page-product-dp .pp-dp-use-panel>p{margin:8px 0 9px;font-size:12.5px;line-height:18px}
  .page-product-dp .pp-dp-use-panel ol{gap:5px;padding:0;border:0}
  .page-product-dp .pp-dp-use-panel li{grid-template-columns:8px 1fr;gap:4px;font-size:11.5px;line-height:16px}
  .page-product-dp .pp-dp-use-panel li>span{width:auto;height:auto;border:0;font-size:11px;font-weight:700}
  .page-product-dp .pp-dp-use-checks{gap:7px;margin-top:12px;padding-top:12px}
  .page-product-dp .pp-dp-use-checks p{font-size:12px;line-height:17px}

  .page-product-dp .pp-provider-section{height:524px!important;padding:61px 16px 60px!important}
  .page-product-dp .pp-provider-section>.container{height:403px;padding:0}
  .page-product-dp .pp-provider-panel{height:403px;padding:24px 16px;border-radius:16px}
  .page-product-dp .pp-provider-panel h2{font-size:26px;line-height:29px}
  .page-product-dp .pp-provider-panel>p{height:175px;margin:16px auto;font-size:14px;line-height:25px;overflow:hidden}
  .page-product-dp .pp-provider-panel>.btn{width:329px;height:48px;justify-content:center;padding:0 12px}
  .page-product-dp .pp-provider-contact{height:34px;margin-top:16px;font-size:11px;line-height:34px}

  .page-regen .ra-redefine-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 20px;overflow:hidden}
  .page-regen .ra-redefine-grid>div{min-width:0}
  .page-regen .ra-redefine .btn{justify-content:center;width:100%;padding:12px 16px;white-space:normal;text-align:center;line-height:1.35}
  .page-regen .ra-redefine-media{width:100%;padding:24px}
  .page-regen .ra-redefine-media img{width:100%;max-width:100%;height:auto}

  /* The two reference slugs above mirror the only product-detail frames in
     Figma exactly. Other catalog entries retain the same layout but can grow
     when their approved product copy is longer. */
  .page-product-dc:not(.page-product-reference) .pp-overview,
  .page-product-dc:not(.page-product-reference) .pp-ing-section,
  .page-product-dc:not(.page-product-reference) .pp-clinical-section,
  .page-product-dp:not(.page-product-reference) .pp-hero,
  .page-product-dp:not(.page-product-reference) .pp-dp-overview,
  .page-product-dp:not(.page-product-reference) .pp-dp-who-section,
  .page-product-dp:not(.page-product-reference) .pp-dp-ingredients-section,
  .page-product-dp:not(.page-product-reference) .pp-dp-use-section{height:auto!important;overflow:visible}
  .page-product-dc:not(.page-product-reference) .pp-overview{min-height:709px}
  .page-product-dc:not(.page-product-reference) .pp-overview>.container,
  .page-product-dc:not(.page-product-reference) .pp-overview .pp-split{height:auto}
  .page-product-dc:not(.page-product-reference) .pp-overview .pp-split{grid-template-rows:324px auto;min-height:685px}
  .page-product-dc:not(.page-product-reference) .pp-overview .pp-split>div:first-child,
  .page-product-dc:not(.page-product-reference) .pp-overview p{height:auto;overflow:visible}
  .page-product-dc:not(.page-product-reference) .pp-ing-section{min-height:702px}
  .page-product-dc:not(.page-product-reference) .pp-ing-section>.container,
  .page-product-dc:not(.page-product-reference) .pp-ing-feature{height:auto}
  .page-product-dc:not(.page-product-reference) .pp-ing-feature{grid-template-rows:324px auto;min-height:464px}
  .page-product-dc:not(.page-product-reference) .pp-ing-feature>div:first-child{height:auto;min-height:92px;overflow:visible}
  .page-product-dc:not(.page-product-reference) .pp-ing-feature p{max-height:none;overflow:visible}
  .page-product-dc:not(.page-product-reference) .pp-clinical-section{min-height:1057px}
  .page-product-dc:not(.page-product-reference) .pp-clinical-section>.container,
  .page-product-dc:not(.page-product-reference) .pp-clinical-panel,
  .page-product-dc:not(.page-product-reference) .pp-clinical-panel>div:first-child{height:auto}
  .page-product-dc:not(.page-product-reference) .pp-clinical-panel{min-height:775px}

  .page-product-dp:not(.page-product-reference) .pp-hero{min-height:674px}
  .page-product-dp:not(.page-product-reference) .pp-hero-inner{height:auto;min-height:640px;grid-template-rows:325px auto}
  .page-product-dp:not(.page-product-reference) .pp-hero-text{height:auto;min-height:219px;padding:18px 0}
  .page-product-dp:not(.page-product-reference) .pp-dp-overview{min-height:728px}
  .page-product-dp:not(.page-product-reference) .pp-dp-overview>.container,
  .page-product-dp:not(.page-product-reference) .pp-dp-overview-split,
  .page-product-dp:not(.page-product-reference) .pp-dp-overview-split>div:first-child{height:auto!important;overflow:visible}
  .page-product-dp:not(.page-product-reference) .pp-dp-overview-split{grid-template-rows:324px auto;min-height:688px}
  .page-product-dp:not(.page-product-reference) .pp-dp-who-section{min-height:641px}
  .page-product-dp:not(.page-product-reference) .pp-dp-who-section>.container,
  .page-product-dp:not(.page-product-reference) .pp-dp-who,
  .page-product-dp:not(.page-product-reference) .pp-dp-who>div:first-child{height:auto!important;overflow:visible}
  .page-product-dp:not(.page-product-reference) .pp-dp-who{grid-template-rows:324px auto;min-height:569px}
  .page-product-dp:not(.page-product-reference) .pp-dp-ingredients-section{min-height:490px}
  .page-product-dp:not(.page-product-reference) .pp-dp-ingredients-section>.container,
  .page-product-dp:not(.page-product-reference) .pp-dp-ingredients,
  .page-product-dp:not(.page-product-reference) .pp-dp-ingredients>div:first-child{height:auto!important;min-height:416px;overflow:visible}
  .page-product-dp:not(.page-product-reference) .pp-dp-use-section{min-height:761px}

  /* Mobile footer in all supplied Figma frames: 1000px with complete link set. */
  .site-footer{height:1000px!important;min-height:1000px!important;overflow:hidden;background:#2d1f42!important}
  .site-footer .footer-inner{
    display:block;height:932px;padding:30px 16px!important;
  }
  .site-footer .footer-brand{height:322px}
  .site-footer .footer-brand .logo-light{display:flex;width:max-content}
  .site-footer .logo-light img{height:46px}
  .site-footer .footer-by{display:block!important;height:20px;margin:12px 0 0;font-size:14px;line-height:20px}
  .site-footer .footer-desc{height:100px;max-width:none;margin:16px 0 0!important;overflow:hidden;font-size:13px;line-height:20px}
  .site-footer .footer-contact{height:112px;margin-top:16px;gap:16px;font-size:13px;line-height:20px}
  .site-footer .footer-contact li{min-height:20px;gap:7px}
  .site-footer .footer-contact svg{width:14px;height:14px;margin-top:3px}
  .site-footer .footer-mobile-only{display:flex}
  .site-footer .footer-cols{display:none}
  .site-footer .footer-mobile-directory{display:block;height:520px;margin-top:30px}
  .site-footer .footer-mobile-pair{display:grid;grid-template-columns:161px 193px;gap:7px;height:230px}
  .site-footer .footer-mobile-col{height:230px;overflow:hidden}
  .site-footer .footer-mobile-col h4{height:25px;margin:0 0 16px;color:#eeeaf2;font-family:var(--font-head);font-size:18px;font-weight:500;line-height:25px}
  .site-footer .footer-mobile-col a{display:block;height:41px;color:#aa9db8;font-size:15px;line-height:20px}
  .site-footer .footer-mobile-col a:last-child{height:25px}
  .site-footer .footer-mobile-professional{width:180px;margin-top:60px}
  .site-footer .footer-bottom{height:68px}
  .site-footer .footer-bottom-inner{
    width:calc(100% - 32px);height:68px;margin:0 16px;padding:24px 0!important;
    flex-direction:row;justify-content:space-between;gap:8px;text-align:left;font-size:10px;line-height:20px;
  }
  .site-footer .footer-bottom-inner>span{white-space:nowrap}
  .site-footer .socials{gap:12px}
  .site-footer .socials a{font-size:13px}
}

@media (max-width:360px){
  .btn-provider-desktop{display:none}
  .page-product-dc .pp-hero-text h1{font-size:30px}
}

/* ============================================================
   SUPPLIED FIGMA BACKGROUNDS — shared image bands
   ============================================================ */
.figma-pale-band{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,#f5eef5 0%,#f6efff 100%);
}
.figma-pale-band::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:url('../assets/figma-pale-bubbles.webp') center/cover no-repeat;
  opacity:.24;
}
.figma-pale-band>section{position:relative;z-index:1;background:transparent!important}
.home-pale-band .portfolio::before{content:none}
.skin-analyzer-pale-band>.dev-band{
  background:linear-gradient(120deg,var(--primary-800),var(--primary-500))!important;
}

/* DermaProfessional detail band — values mirror Figma frame 8334:8355. */
@media (min-width:901px){
  .page-dermaprofessional .figma-pale-band{
    height:1476px;
    overflow:hidden;
  }
  .page-dermaprofessional .dc-results{
    height:872px;
    min-height:0;
    padding:0;
  }
  .page-dermaprofessional .dc-results>.container{
    width:min(1320px,calc(100% - 120px));
    max-width:1320px;
    height:872px;
    padding:80px 0 0;
    box-sizing:border-box;
  }
  .page-dermaprofessional .dc-results .section-title{
    height:75px;
    font-size:58px;
    line-height:75px;
    font-weight:500;
    letter-spacing:0;
  }
  .page-dermaprofessional .dc-results .section-sub{
    height:25px;
    margin-top:12px;
    font-size:16px;
    line-height:25px;
    max-width:none;
  }
  .page-dermaprofessional .dc-results .pp-rel-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:29.333px;
    width:100%;
    height:444px;
    margin-top:50px;
  }
  .page-dermaprofessional .dc-results .figma-card{
    height:444px;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
    box-shadow:none;
  }
  .page-dermaprofessional .dc-results .figma-card .pp-rel-media{
    position:relative;
    height:348px;
    aspect-ratio:auto;
    margin:0;
    padding:0;
    border-radius:16px;
    background:rgba(255,255,255,.34);
    overflow:hidden;
  }
  .page-dermaprofessional .dc-results .figma-card-feature .pp-rel-media{
    height:284px;
    background:#fff;
  }
  .page-dermaprofessional .dc-results .figma-card .pp-rel-media img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    filter:none;
  }
  .page-dermaprofessional .figma-card-tag{
    position:absolute;
    top:12px;
    left:12px;
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 8px;
    box-sizing:border-box;
    border-radius:14px;
    background:#fff;
    color:#000;
    font-size:14px;
    line-height:20px;
    white-space:nowrap;
  }
  .page-dermaprofessional .figma-card-copy{
    height:66px;
    padding-top:16px;
    box-sizing:border-box;
  }
  .page-dermaprofessional .figma-card-copy h4{
    height:25px;
    margin:0;
    color:#1b1622;
    font-family:var(--font-body);
    font-size:16px;
    font-weight:600;
    line-height:25px;
  }
  .page-dermaprofessional .figma-card-copy p{
    height:21px;
    margin:4px 0 0;
    color:#454140;
    font-family:var(--font-body);
    font-size:14px;
    line-height:21px;
    white-space:nowrap;
  }
  .page-dermaprofessional .figma-card-feature .figma-card-copy{
    height:160px;
  }
  .page-dermaprofessional .figma-card-feature .pc-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:48px;
    margin:16px 0 0;
    padding:0;
    box-sizing:border-box;
    border-radius:24px;
    background:var(--primary-500);
    color:#fff;
    font-family:var(--font-body);
    font-size:16px;
    font-weight:500;
    line-height:24px;
  }
  .page-dermaprofessional .figma-card-feature .pc-link .arrow{margin-left:10px;font-size:20px}
  .page-dermaprofessional .dc-viewmore{
    height:56px;
    margin-top:50px;
  }
  .page-dermaprofessional .dc-viewmore .btn{
    width:129px;
    height:56px;
    padding:0;
    justify-content:center;
    border-radius:28px;
    font-size:16px;
    font-weight:500;
    box-sizing:border-box;
  }

  .page-dermaprofessional .dc-regen{
    height:524px;
    min-height:0;
    padding:0;
  }
  .page-dermaprofessional .dc-regen>.container{
    position:relative;
    width:min(1320px,calc(100% - 120px));
    max-width:1320px;
    height:524px;
    padding:0;
    border-radius:16px;
    overflow:hidden;
    background:url('../assets/figma-dp-clinics-background.png') center/cover no-repeat;
  }
  .page-dermaprofessional .dc-regen-grid{display:block;height:524px}
  .page-dermaprofessional .dc-regen-copy{
    position:absolute;
    left:54px;
    top:53px;
    width:716px;
    height:418px;
  }
  .page-dermaprofessional .dc-regen h2{
    width:391px;
    height:116px;
    margin:0;
    color:#fff;
    font-size:58px;
    font-weight:700;
    line-height:58px;
    letter-spacing:0;
  }
  .page-dermaprofessional .dc-regen-intro{
    width:716px;
    height:56px;
    margin:16px 0 16px;
    color:#4f3673;
    font-family:var(--font-body);
    font-size:20px;
    font-weight:700;
    line-height:28px;
  }
  .page-dermaprofessional .dc-regen-list{
    width:480px;
    height:124px;
    display:grid;
    gap:8px;
    list-style:none;
    margin:0;
    padding:0;
    color:#3e2a59;
    font-family:var(--font-body);
    font-size:16px;
    font-weight:500;
    line-height:25px;
  }
  .page-dermaprofessional .dc-regen-list li::before{content:'•';margin-right:10px}
  .page-dermaprofessional .dc-regen-feature-card{
    width:480px;
    height:74px;
    display:grid;
    gap:8px;
    margin-top:16px;
    padding:8px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.78);
    border-radius:16px;
    background:rgba(255,255,255,.2);
    color:#3e2a59;
    font-family:var(--font-body);
    font-size:16px;
    font-weight:500;
    line-height:25px;
  }
  .page-dermaprofessional .dc-regen-feature-card>div{display:flex;align-items:center;gap:12px;height:25px;white-space:nowrap}
  .page-dermaprofessional .dc-regen-feature-card .df-check{width:20px;height:20px;font-size:12px}
  .page-dermaprofessional .dc-regen-media{display:none}
}

@media (max-width:900px){
  .page-dermaprofessional .figma-pale-band{height:auto;overflow:visible}
  .page-dermaprofessional .dc-results{height:auto;min-height:0;padding:52px 16px 56px}
  .page-dermaprofessional .dc-results>.container{width:100%;padding:0}
  .page-dermaprofessional .dc-results .section-title{font-size:38px;line-height:44px}
  .page-dermaprofessional .dc-results .section-sub{margin-top:12px;font-size:14px;line-height:22px}
  .page-dermaprofessional .dc-results .pp-rel-grid{grid-template-columns:1fr;gap:28px;margin-top:30px}
  .page-dermaprofessional .dc-results .figma-card,
  .page-dermaprofessional .dc-results .figma-card-feature{
    height:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
    box-shadow:none;
  }
  .page-dermaprofessional .dc-results .figma-card .pp-rel-media,
  .page-dermaprofessional .dc-results .figma-card-feature .pp-rel-media{
    position:relative;
    height:320px;
    aspect-ratio:auto;
    margin:0;
    padding:0;
    border:0;
    border-radius:16px;
    background:rgba(255,255,255,.34);
    overflow:hidden;
  }
  .page-dermaprofessional .dc-results .figma-card-feature .pp-rel-media{background:#fff}
  .page-dermaprofessional .dc-results .figma-card .pp-rel-media img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    filter:none;
  }
  .page-dermaprofessional .figma-card-tag{
    position:absolute;
    top:12px;
    left:12px;
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 8px;
    box-sizing:border-box;
    border-radius:14px;
    background:#fff;
    color:#000;
    font-size:14px;
    line-height:20px;
    white-space:nowrap;
  }
  .page-dermaprofessional .figma-card-copy{padding-top:16px}
  .page-dermaprofessional .figma-card-copy h4{
    margin:0;
    color:#1b1622;
    font-family:var(--font-body);
    font-size:16px;
    font-weight:600;
    line-height:25px;
  }
  .page-dermaprofessional .figma-card-copy p{
    margin:4px 0 0;
    color:#454140;
    font-size:14px;
    line-height:21px;
  }
  .page-dermaprofessional .dc-results .figma-card-copy,
  .page-dermaprofessional .dc-results .figma-card-feature .figma-card-copy{height:auto;min-height:66px}
  .page-dermaprofessional .dc-results .figma-card-feature .pc-link{margin-top:16px}
  .page-dermaprofessional .dc-viewmore{height:52px;margin-top:36px}
  .page-dermaprofessional .dc-regen{height:auto;min-height:0;padding:0 16px 56px}
  .page-dermaprofessional .dc-regen>.container{width:100%;height:640px;padding:0;border-radius:16px;background:url('../assets/figma-dp-clinics-background.png') center top/auto 640px no-repeat}
  .page-dermaprofessional .dc-regen-grid{height:640px}
  .page-dermaprofessional .dc-regen-copy{position:relative;left:auto;top:auto;width:auto;height:auto;padding:34px 24px;box-sizing:border-box}
  .page-dermaprofessional .dc-regen h2{width:auto;height:auto;font-size:38px;line-height:40px}
  .page-dermaprofessional .dc-regen-intro{width:auto;height:auto;margin:16px 0;font-size:17px;line-height:24px}
  .page-dermaprofessional .dc-regen-list{width:auto;height:auto;gap:8px;font-size:14px;line-height:21px}
  .page-dermaprofessional .dc-regen-feature-card{width:100%;height:auto;min-height:84px;margin-top:16px;font-size:13px;line-height:20px}
  .page-dermaprofessional .dc-regen-feature-card>div{height:auto;min-height:20px;white-space:normal}
  .page-dermaprofessional .dc-regen-media{display:none}
}

/* The same source image is used by Figma for standalone pale bands. */
.page-about .portfolio,
.utility-dot-band,
.utility-portfolio{
  background:
    linear-gradient(180deg,rgba(245,238,245,.76),rgba(246,239,255,.76)),
    url('../assets/figma-pale-bubbles.webp') center/cover no-repeat!important;
}
.page-product-dc .pp-clinical-section{
  background:
    linear-gradient(180deg,rgba(245,238,245,.84),rgba(246,239,255,.84)),
    url('../assets/figma-pale-bubbles.webp') center/cover no-repeat!important;
}
.page-about .portfolio::before{content:none}

/* Product frames use one smooth page gradient; only the DC results band adds bubbles. */
.page-product-dc,
.page-product-dp{
  background:linear-gradient(180deg,#f8f3fe 0%,#f1e3fd 100%);
}
.page-product-dc .pp-overview,
.page-product-dc .pp-ing-section,
.page-product-dp .pp-dp-overview,
.page-product-dp .pp-dp-ingredients-section,
.page-product-dp .pp-dp-use-section{
  background:transparent!important;
}

/* Frame 57 is the shared provider artwork throughout the Figma file. */
.provider-cta,
.pp-provider-section,
.utility-provider-cta,
.page-nano-pen .dev-band{
  background-color:#573b7e!important;
  background-image:url('../assets/figma-provider-background.webp')!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.provider-cta::before,
.pp-provider-section::before,
.utility-provider-cta::before{
  content:none!important;
}

/* Semantic selectors keep the original Figma heights after grouping the bands. */
.page-skin-analyzer .skin-audience{min-height:600px;box-sizing:border-box}
.page-nano-pen .nano-audience{min-height:532px;box-sizing:border-box}
.page-nano-pen .nano-clinical{min-height:684px;box-sizing:border-box;padding:80px 0;overflow:hidden}
.page-nano-pen .nano-clinical .dc-regen-grid,
.page-nano-pen .nano-clinical .dc-regen-media{height:524px}

@media (min-width:901px){
  .page-index .portfolio{height:906px;box-sizing:border-box}
  .page-index .tailored{height:913px;box-sizing:border-box}
}

@media (max-width:900px){
  .page-skin-analyzer .skin-audience,
  .page-nano-pen .nano-audience,
  .page-nano-pen .nano-clinical{height:auto;min-height:0}
  .page-nano-pen .nano-clinical{padding:56px 0}
  .page-nano-pen .nano-clinical .dc-regen-grid,
  .page-nano-pen .nano-clinical .dc-regen-media{height:auto}
}

@media (max-width:560px){
  .page-index .home-pale-band{height:3029px;overflow:hidden}
  .page-index .portfolio{height:1721px;padding:50px 0 24px;box-sizing:border-box}
  .page-index .portfolio>.container{padding-left:16px;padding-right:16px}
  .page-index .portfolio .section-title{height:44px;font-size:38px;line-height:44px}
  .page-index .portfolio .section-sub{height:125px;margin-top:10px;overflow:hidden}
  .page-index .portfolio-grid{grid-template-columns:1fr;gap:24px;margin-top:24px}
  .page-index .portfolio .product-card{height:460px;padding:20px}
  .page-index .portfolio .product-card:nth-child(3){height:476px}
  .page-index .portfolio .pc-media{height:252px}
  .page-index .portfolio .pc-link{bottom:24px}

  .page-index .tailored{height:1258px!important;padding:100px 0 0;box-sizing:border-box}
  .page-index .tailored>.container{padding-left:16px;padding-right:16px}
  .page-index .tailored .section-title{width:323px;height:132px;margin:0 auto;font-size:36px;line-height:44px}
  .page-index .tailored-grid{grid-template-columns:1fr;gap:24px;margin-top:24px}
  .page-index .tailored-media,
  .page-index .tailored-media img{width:361px;height:411px;aspect-ratio:auto}
  .page-index .tailored-body{height:567px;overflow:hidden}

  .provider-cta{
    height:524px!important;min-height:524px!important;padding:61px 16px 60px!important;
    box-sizing:border-box;
  }
  .provider-cta>.container{height:403px;padding:0}
  .provider-cta .provider-panel{height:403px;padding:24px 16px;border-radius:16px;box-sizing:border-box}
  .provider-cta .provider-panel h2{font-size:26px;line-height:29px;margin-bottom:0}
  .provider-cta .provider-panel>p:not(.provider-foot){height:175px;margin:16px auto;overflow:hidden;font-size:14px;line-height:25px}
  .provider-cta .provider-panel>.btn{justify-content:center;width:329px;height:48px;padding:0 12px}
  .provider-cta .provider-foot{height:34px;margin-top:16px;font-size:11px;line-height:34px}

  .page-nano-pen .dev-band{height:280px!important;padding:21px 16px!important;box-sizing:border-box}
  .page-nano-pen .dev-band>.container{height:238px;padding:0}
  .page-nano-pen .dev-band h2{
    width:361px;height:106px;margin:0 0 16px!important;padding-top:24px;box-sizing:border-box;
    font-size:36px!important;line-height:41px;text-align:center;
  }
  .page-nano-pen .np-compare{grid-template-columns:152px 152px;gap:24px;width:328px;height:100px;margin:0 auto}
  .page-nano-pen .np-col{width:152px;height:100px;padding:0;border:0;border-radius:0;background:transparent}
  .page-nano-pen .np-col.hl{padding-left:12px;border-left:1px solid rgba(255,255,255,.35);background:transparent}
  .page-nano-pen .np-col h4{height:24px;margin:0;font-size:14px;line-height:24px}
  .page-nano-pen .np-col ul{gap:0}
  .page-nano-pen .np-col li{height:19px;font-size:11px;line-height:19px;white-space:nowrap}
}

/* Homepage science and shared blog frames — Figma nodes 8334:16673 and 8334:18436. */
@media (min-width:901px){
  .page-index .science{height:1214px;min-height:1214px;padding:0;overflow:hidden}
  .page-index .science>.container{width:1280px;max-width:1280px;height:1054px;padding:80px 0 0;box-sizing:border-box}
  .page-index .science .eyebrow{display:flex;align-items:center;justify-content:center;width:152px;height:24px;margin:0 auto;padding:0;border-radius:12px;background:#fbf8f3;font-size:14px;line-height:20px}
  .page-index .science .section-title{height:68px;margin-top:16px;font-size:56px;line-height:68px;font-weight:500;letter-spacing:0}
  .page-index .science-pill{height:37px;margin:16px auto 0;padding:0;background:transparent;box-shadow:none;color:#2f2143;font-size:24px;font-weight:500;line-height:37px}
  .page-index .science .section-sub{width:1255px;max-width:1255px;height:75px;margin:8px auto 0;font-size:16px;line-height:25px}
  .page-index .science-actions{width:648px;height:56px;margin:16px auto 0;gap:16px;flex-wrap:nowrap}
  .page-index .science-actions .btn{width:316px;height:56px;padding:0;justify-content:center;box-sizing:border-box;font-size:16px}
  .page-index .science .feature-grid{width:1280px;height:688px;margin-top:50px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:332px 332px;gap:24px}
  .page-index .science .feature-card{min-height:332px;border-radius:24px}
  .page-index .science .fc-num{width:48px;height:48px;font-size:31px;font-weight:500;line-height:1}
  .page-index .science .fc-text{padding:24px}
  .page-index .science .fc-text h4{margin-bottom:8px;font-size:24px;line-height:34px;font-weight:500;letter-spacing:-.5px}
  .page-index .science .fc-text p{font-size:14px;line-height:17px;color:#f6f3fa}
  /* only card 4 (IoT) uses 16px copy in Figma — card 5 stays at 14px */
  .page-index .science .feature-card.wide:nth-child(4) .fc-text p{font-size:16px;line-height:19px}

  .page-index .blog,.page-about .blog,.page-dermaceuticals .blog,.page-dermafacial .blog,.page-dermaprofessional .blog{height:790px;min-height:790px;padding:80px 0 0;overflow:hidden;box-sizing:border-box}
  .page-index .blog>.container,.page-about .blog>.container,.page-dermaceuticals .blog>.container,.page-dermafacial .blog>.container,.page-dermaprofessional .blog>.container{width:1440px;max-width:1440px;height:710px;padding:0}
  .page-index .blog .section-title,.page-about .blog .section-title,.page-dermaceuticals .blog .section-title,.page-dermafacial .blog .section-title,.page-dermaprofessional .blog .section-title{width:1280px;height:82px;margin:0 auto;font-size:68px;line-height:82px;font-weight:500;letter-spacing:0}
  .page-index .blog .section-sub,.page-about .blog .section-sub,.page-dermaceuticals .blog .section-sub,.page-dermafacial .blog .section-sub,.page-dermaprofessional .blog .section-sub{width:1280px;max-width:1280px;height:25px;margin:12px auto 0;font-size:16px;line-height:25px}
  .page-index .blog-grid,.page-about .blog-grid,.page-dermaceuticals .blog-grid,.page-dermafacial .blog-grid,.page-dermaprofessional .blog-grid{display:flex;gap:24px;width:2216px;height:463px;margin:48px 0 0 calc(50% - 1108px)}
  .page-index .blog-card,.page-about .blog-card,.page-dermaceuticals .blog-card,.page-dermafacial .blog-card,.page-dermaprofessional .blog-card{flex:0 0 424px;width:424px;height:463px;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
  .page-index .blog-media,.page-about .blog-media,.page-dermaceuticals .blog-media,.page-dermafacial .blog-media,.page-dermaprofessional .blog-media{width:424px;height:312px;aspect-ratio:auto;border-radius:18px;overflow:hidden;box-shadow:none}
  .page-index .blog-card h3,.page-about .blog-card h3,.page-dermaceuticals .blog-card h3,.page-dermafacial .blog-card h3,.page-dermaprofessional .blog-card h3{margin:24px 32px 0;font-family:var(--font-body);font-size:20px;font-weight:600;line-height:31px;color:var(--primary-500)}
  .page-index .blog-card p,.page-about .blog-card p,.page-dermaceuticals .blog-card p,.page-dermafacial .blog-card p,.page-dermaprofessional .blog-card p{width:360px;height:52px;margin:12px 32px 0;font-family:Inter,var(--font-body);font-size:18px;font-weight:500;line-height:26px;color:#111a37}
}

@media (max-width:900px){
  .page-index .science{height:auto;min-height:0;padding:64px 0 56px}
  .page-index .science>.container{width:auto;height:auto;padding:0 20px}
  .page-index .science .section-title{font-size:38px;line-height:44px;margin-top:16px}
  .page-index .science-pill{font-size:18px;line-height:27px;margin-top:14px}
  .page-index .science .section-sub{height:auto;margin-top:10px;font-size:14px;line-height:22px}
  .page-index .science-actions{width:auto;height:auto;margin-top:22px;flex-direction:column;gap:12px}
  .page-index .science-actions .btn{width:100%;height:52px;justify-content:center}
  .page-index .science .feature-grid{height:auto;margin-top:34px;grid-template-columns:1fr;grid-template-rows:none;gap:18px}
  .page-index .science .feature-card,.page-index .science .feature-card.wide{grid-column:auto;min-height:300px}
  .page-index .science .fc-num{width:42px;height:42px;font-size:24px}
  .page-index .science .fc-text h4{font-size:22px;line-height:30px}
  .page-index .blog,.page-about .blog,.page-dermaceuticals .blog,.page-dermafacial .blog,.page-dermaprofessional .blog{height:auto;min-height:0;padding:56px 0 64px}
  .page-index .blog>.container,.page-about .blog>.container,.page-dermaceuticals .blog>.container,.page-dermafacial .blog>.container,.page-dermaprofessional .blog>.container{width:auto;height:auto;padding:0 20px}
  .page-index .blog .section-title,.page-about .blog .section-title,.page-dermaceuticals .blog .section-title,.page-dermafacial .blog .section-title,.page-dermaprofessional .blog .section-title{width:auto;height:auto;font-size:38px;line-height:44px}
  .page-index .blog .section-sub,.page-about .blog .section-sub,.page-dermaceuticals .blog .section-sub,.page-dermafacial .blog .section-sub,.page-dermaprofessional .blog .section-sub{width:auto;height:auto;margin-top:10px;font-size:14px;line-height:22px}
  .page-index .blog-grid,.page-about .blog-grid,.page-dermaceuticals .blog-grid,.page-dermafacial .blog-grid,.page-dermaprofessional .blog-grid{display:grid;width:auto;height:auto;margin:34px 0 0;grid-template-columns:1fr;gap:28px}
  .page-index .blog-card,.page-about .blog-card,.page-dermaceuticals .blog-card,.page-dermafacial .blog-card,.page-dermaprofessional .blog-card{width:100%;height:auto;min-height:0}
  .page-index .blog-media,.page-about .blog-media,.page-dermaceuticals .blog-media,.page-dermafacial .blog-media,.page-dermaprofessional .blog-media{width:100%;height:auto;aspect-ratio:424/312}
  .page-index .blog-card h3,.page-about .blog-card h3,.page-dermaceuticals .blog-card h3,.page-dermafacial .blog-card h3,.page-dermaprofessional .blog-card h3{margin:16px 0 0;font-size:19px;line-height:28px}
  .page-index .blog-card p,.page-about .blog-card p,.page-dermaceuticals .blog-card p,.page-dermafacial .blog-card p,.page-dermaprofessional .blog-card p{width:auto;height:auto;margin:8px 0 0;font-size:15px;line-height:22px}
}

/* Shared provider frame — Figma node 8334:16971. */
@media (min-width:901px){
  .provider-cta{min-height:724px;height:724px;padding:0;box-sizing:border-box}
  .provider-cta>.container{width:100%;height:724px;padding:0;display:flex;align-items:center;justify-content:center}
  .provider-cta .provider-panel{width:1069px;height:485px;max-width:none;margin:0;padding:50px;box-sizing:border-box;border-radius:46px}
  .provider-cta .provider-panel h2{width:969px;height:140px;margin:0 auto 24px;font-size:58px;line-height:69.6px;font-weight:700}
  .provider-cta .provider-panel>p:not(.provider-foot){width:969px;max-width:969px;height:82px;margin:0 auto 24px;font-size:18px;line-height:27.9px}
  .provider-cta .provider-panel>.btn{width:288px;height:56px;padding:0;justify-content:center;box-sizing:border-box;font-size:16px}
  .provider-cta .provider-foot{width:398px;height:35px;margin:24px auto 0;font-size:18px;line-height:35px}
  .provider-cta .provider-foot a{display:inline-flex;align-items:center;height:35px;padding:0 12px;margin-left:6px;box-sizing:border-box}
}

/* Dermaceuticals blog — exact Figma frames 8334:7416 and 10370:5806. */
@media (min-width:901px){
  .page-dermaceuticals .blog{
    height:710px!important;
    min-height:710px!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%)!important;
  }
  .page-dermaceuticals .blog>.container{
    width:1440px;
    max-width:1440px;
    height:710px;
    padding:0;
  }
  .page-dermaceuticals .blog .section-title{
    width:1280px;
    height:82px;
    margin:0 auto;
    font-size:68px;
    line-height:82px;
    font-weight:500;
    letter-spacing:0;
  }
  .page-dermaceuticals .blog .section-sub{
    width:1280px;
    max-width:1280px;
    height:25px;
    margin:12px auto 0;
    font-size:16px;
    line-height:25px;
  }
  .page-dermaceuticals .blog-grid{
    display:flex;
    gap:24px;
    width:2216px;
    height:463px;
    margin:48px 0 0 calc(50% - 1108px);
  }
  .page-dermaceuticals .blog-card{
    flex:0 0 424px;
    width:424px;
    height:463px;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
  }
  .page-dermaceuticals .blog-media{
    width:424px;
    height:312px;
    aspect-ratio:auto;
    border-radius:18px;
    overflow:hidden;
    box-shadow:none;
  }
  .page-dermaceuticals .blog-card h3{
    margin:24px 32px 0;
    font-family:var(--font-body);
    font-size:20px;
    font-weight:600;
    line-height:31px;
    color:var(--primary-500);
  }
  .page-dermaceuticals .blog-card p{
    width:360px;
    height:52px;
    margin:12px 32px 0;
    font-family:Inter,var(--font-body);
    font-size:18px;
    font-weight:500;
    line-height:26px;
    color:#111a37;
  }
}

@media (max-width:900px){
  .page-dermaceuticals .blog{
    height:484px!important;
    min-height:484px!important;
    padding:41px 0 0!important;
    overflow:hidden!important;
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%)!important;
  }
  .page-dermaceuticals .blog>.container{
    width:393px;
    max-width:393px;
    height:443px;
    padding:0 16px;
  }
  .page-dermaceuticals .blog .section-title{
    width:361px;
    height:41px;
    margin:0;
    font-size:34px;
    line-height:41px;
  }
  .page-dermaceuticals .blog .section-sub{
    width:361px;
    height:44px;
    margin:12px 0 0;
    font-size:14px;
    line-height:22px;
  }
  .page-dermaceuticals .blog-grid{
    display:flex;
    gap:16px;
    width:max-content;
    height:281px;
    margin:24px 0 0;
  }
  .page-dermaceuticals .blog-card{
    flex:0 0 224px;
    width:224px;
    height:281px;
    min-height:0;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
  }
  .page-dermaceuticals .blog-media{
    width:224px;
    height:224px;
    aspect-ratio:auto;
    border-radius:18px;
    overflow:hidden;
  }
  .page-dermaceuticals .blog-card h3{
    width:220px;
    height:25px;
    margin:8px 0 0;
    font-size:19.93px;
    line-height:25px;
  }
  .page-dermaceuticals .blog-card p{
    width:220px;
    height:24px;
    margin:0;
    font-size:12px;
    line-height:26px;
  }
}

/* Dermaceuticals mobile page bands — exact grouped frame 10370:4872. */
@media (max-width:900px){
  .page-dermaceuticals .dc-hero{
    height:570px;
    min-height:570px;
    box-sizing:border-box;
  }
  .page-dermaceuticals .df-about{
    height:786px;
    min-height:786px;
    padding:0 16px;
    box-sizing:border-box;
    overflow:hidden;
  }
  .page-dermaceuticals .df-about>.container{
    width:361px;
    height:786px;
    padding:0;
  }
  .page-dermaceuticals .df-about-grid{
    display:flex;
    flex-direction:column;
    width:361px;
    height:786px;
    gap:0;
  }
  .page-dermaceuticals .df-about-body{
    order:1;
    width:324px;
    height:382px;
    margin:364px auto 0;
    padding:0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .df-about-body h2{
    width:324px;
    height:82px;
    margin:0;
    font-size:34px;
    line-height:41px;
  }
  .page-dermaceuticals .df-about-body p{
    width:324px;
    height:220px;
    margin:16px 0 0;
    font-size:14px;
    line-height:22px;
    overflow:hidden;
  }
  .page-dermaceuticals .df-about-body .btn{
    width:219px;
    height:48px;
    margin-top:16px;
    padding:0 24px;
  }
  .page-dermaceuticals .df-about-media{
    order:0;
    position:absolute;
    top:16px;
    left:18.5px;
    width:324px;
    height:324px;
    margin:0;
  }
  .page-dermaceuticals .df-about-media img{
    width:324px;
    height:324px;
    object-fit:cover;
    border-radius:18px;
  }

  .page-dermaceuticals .dc-regen{
    height:779px;
    min-height:779px;
    padding:0 16px;
    box-sizing:border-box;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-regen>.container{
    width:361px;
    height:779px;
    padding:0;
  }
  .page-dermaceuticals .dc-regen-grid{
    display:flex;
    flex-direction:column;
    width:361px;
    height:779px;
    padding:50px 0 0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .dc-regen-grid>div:first-child{display:contents}
  .page-dermaceuticals .dc-regen h2{
    order:1;
    width:361px;
    height:68px;
    margin:0;
    font-size:28px;
    line-height:34px;
  }
  .page-dermaceuticals .dc-regen .dc-regen-media{
    order:2;
    width:361px;
    height:361px;
    margin:16px 0 0;
    padding:0;
    border-radius:18px;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-regen .dc-regen-media img{
    width:361px;
    height:361px;
    max-height:none;
    object-fit:cover;
  }
  .page-dermaceuticals .dc-regen .tabset{
    order:3;
    width:361px;
    height:218px;
    margin:16px 0 0;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-regen .tabset-nav{
    width:100%;
    height:58px;
    margin:0 0 16px;
    overflow:hidden;
    gap:16px;
    flex-wrap:nowrap;
  }
  .page-dermaceuticals .dc-regen .tabset-btn{
    flex:0 0 auto;
    height:58px;
    padding:0 16px;
    white-space:nowrap;
  }
  .page-dermaceuticals .dc-regen .tabset-panels{height:144px}
  .page-dermaceuticals .dc-regen .dc-regen-panel{height:144px;padding:0}
  .page-dermaceuticals .dc-regen .dc-regen-panel p{
    width:361px;
    height:80px;
    margin:0;
    font-size:14px;
    line-height:20px;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-regen .dc-regen-panel .btn{height:48px;margin-top:16px}

  .page-dermaceuticals .figma-pale-band{
    height:3237px;
    min-height:3237px;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-bespoke{
    height:1936px;
    min-height:1936px;
    padding:24px 16px 0;
    box-sizing:border-box;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-bespoke>.container{
    width:361px;
    height:1912px;
    padding:0;
  }
  .page-dermaceuticals .dc-bespoke .section-title{
    width:361px;
    height:88px;
    font-size:34px;
    line-height:44px;
  }
  .page-dermaceuticals .dc-bespoke .section-sub{
    width:361px;
    height:66px;
    margin:8px 0 0;
    font-size:14px;
    line-height:22px;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-bespoke-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    width:361px;
    height:1720px;
    margin:16px 0 0;
  }
  .page-dermaceuticals .dc-bcard{
    width:361px;
    height:562px;
    min-height:562px;
    border-radius:18px;
    box-sizing:border-box;
  }
  .page-dermaceuticals .dc-bcard .bmedia{
    width:324px;
    height:324px;
    margin:16px auto 0;
    aspect-ratio:auto;
    border-radius:16px;
  }
  .page-dermaceuticals .dc-bcard .bmedia img{
    width:324px;
    height:324px;
    max-height:none;
    object-fit:contain;
  }
  .page-dermaceuticals .dc-bcard h3{
    width:324px;
    height:24px;
    margin:24px auto 0;
    font-size:20px;
    line-height:24px;
  }
  .page-dermaceuticals .dc-bcard p{
    width:324px;
    height:80px;
    margin:8px auto 0;
    font-size:14px;
    line-height:20px;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-why{display:none!important}

  .page-dermaceuticals .dc-results{
    height:1277px;
    min-height:1277px;
    padding:24px 16px 0;
    box-sizing:border-box;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-results>.container{
    width:361px;
    height:1253px;
    padding:0;
  }
  .page-dermaceuticals .dc-results .section-title{
    width:324px;
    height:94px;
    font-size:30px;
    line-height:38px;
  }
  .page-dermaceuticals .dc-results .section-sub{
    width:323px;
    height:100px;
    margin:16px 0 0;
    font-size:14px;
    line-height:20px;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-results-grid{
    display:block;
    width:323px;
    height:659px;
    margin:16px 19px 0;
  }
  .page-dermaceuticals .dc-results-grid .ba-slider{
    width:323px;
    height:309px;
  }
  .page-dermaceuticals .dc-results-grid .dc-pure-card{
    width:323px;
    height:324px;
    margin-top:16px;
  }
  .page-dermaceuticals .dc-results .pp-rel-grid{
    display:flex;
    gap:16px;
    width:361px;
    height:266px;
    margin:16px 0 0;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-results .pp-rel-card{
    flex:0 0 80px;
    width:80px;
    height:266px;
  }
  .page-dermaceuticals .dc-results .pp-rel-card:nth-child(n+5){display:none}
  .page-dermaceuticals .dc-viewmore{display:none}

  .page-dermaceuticals .df-step{
    height:874px;
    min-height:874px;
    padding:24px 16px;
    box-sizing:border-box;
    overflow:hidden;
  }
  .page-dermaceuticals .df-step>.container{
    width:361px;
    height:826px;
    padding:0;
  }
  .page-dermaceuticals .df-step-grid{display:block;width:361px;height:826px}
  .page-dermaceuticals .df-step-intro{width:361px;height:162px}
  .page-dermaceuticals .df-step-intro h2{
    width:361px;
    height:88px;
    margin:0;
    font-size:34px;
    line-height:44px;
  }
  .page-dermaceuticals .df-step-intro p{
    width:361px;
    height:66px;
    margin:8px 0 0;
    font-size:14px;
    line-height:22px;
    overflow:hidden;
  }
  .page-dermaceuticals .df-step .acc{
    width:361px;
    height:648px;
    margin:16px 0 0;
    overflow:hidden;
  }
  .page-dermaceuticals .df-step .acc-item{min-height:58px}
  .page-dermaceuticals .df-step .acc-head{height:58px;font-size:16px;line-height:24px}
  .page-dermaceuticals .df-step .acc-item.open{height:240px}
  .page-dermaceuticals .df-step .acc-item.open .acc-panel{height:182px;padding:16px}
  .page-dermaceuticals .df-step .acc-panel p{font-size:14px;line-height:22px}
}

/* Dermaceuticals desktop frame 8334:5763. These rules are deliberately
   page-scoped because this page's Figma composition differs from the shared
   DermaFacial/DermaProfessional section shells. */
.page-dermaceuticals .reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

@media (min-width:901px){
  .page-dermaceuticals .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .page-dermaceuticals .dc-hero{height:550px;min-height:550px}
  .page-dermaceuticals .dc-hero-text{top:152px;left:609px;width:618px;max-width:none}
  .page-dermaceuticals .dc-hero-text h1{
    height:72px;
    margin:0 0 16px;
    font-size:58px;
    line-height:72px;
  }
  .page-dermaceuticals .dc-hero-text p{
    width:703px;
    max-width:none;
    margin:0 0 16px;
    font-size:26px;
    line-height:43px;
  }
  .page-dermaceuticals .dc-hero-text .btn{width:219px;height:56px;padding:0;justify-content:center}

  .page-dermaceuticals .df-about{
    height:688px;
    min-height:688px;
    padding:50px 0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .df-about>.container,
  .page-dermaceuticals .df-about-grid{
    width:1320px;
    max-width:1320px;
    height:588px;
    min-height:0;
    margin:0 auto;
    padding:50px 60px;
    box-sizing:border-box;
    grid-template-columns:640px 488px;
    gap:72px;
    border-radius:24px;
  }
  .page-dermaceuticals .df-about-body{width:680px;height:326px}
  .page-dermaceuticals .df-about-body h2{
    width:680px;
    height:72px;
    margin:0;
    font-size:58px;
    line-height:72px;
  }
  .page-dermaceuticals .df-about-body p{
    width:680px;
    max-width:none;
    height:150px;
    margin:24px 0 0;
    font-size:18px;
    line-height:25px;
  }
  .page-dermaceuticals .df-about-body .btn{width:219px;height:56px;margin-top:24px;padding:0;justify-content:center}
  .page-dermaceuticals .df-about-media,
  .page-dermaceuticals .df-about-media .img-treat{
    width:488px;
    height:488px;
    aspect-ratio:auto;
  }

  .page-dermaceuticals .dc-regen{
    height:668px;
    min-height:668px;
    padding:50px 0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .dc-regen>.container,
  .page-dermaceuticals .dc-regen-grid{
    width:1320px;
    max-width:1320px;
    height:568px;
    margin:0 auto;
    padding:24px;
    box-sizing:border-box;
    grid-template-columns:702px 520px;
    gap:50px;
    border-radius:24px;
    background:linear-gradient(110deg,rgba(255,255,255,.78),rgba(250,244,255,.64));
    border:1px solid rgba(255,255,255,.82);
  }
  .page-dermaceuticals .dc-regen-grid>div:first-child{
    width:702px;
    height:398px;
    padding-left:40px;
    box-sizing:border-box;
    align-self:center;
  }
  .page-dermaceuticals .dc-regen h2{
    width:794px;
    max-width:none;
    height:auto;
    min-height:132px;
    margin:0 0 30px;
    /* 60px overflowed the 794px box to 3 lines and spilled onto the tab pills;
       52px keeps "Regenerative DermaCeuticals" on line 1 like Figma (2 lines). */
    font-size:52px;
    line-height:66px;
  }
  .page-dermaceuticals .dc-regen .tabset-nav{width:647px;height:58px;margin:0 0 34px;gap:16px;flex-wrap:nowrap}
  .page-dermaceuticals .dc-regen .tabset-btn{height:58px;padding:0 20px;font-size:16px;white-space:nowrap}
  .page-dermaceuticals .dc-regen-panel p{width:662px;max-width:none;height:40px;margin:0 0 34px;font-size:16px;line-height:20px}
  .page-dermaceuticals .dc-regen-panel .btn{width:159px;height:48px;padding:0;justify-content:center}
  .page-dermaceuticals .dc-regen-media{
    width:520px;
    height:520px;
    padding:0;
    border:0;
    border-radius:16px;
    background:#f8f6fb;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-regen-media img{width:100%;height:100%;max-height:none;object-fit:contain}

  .page-dermaceuticals .figma-pale-band{height:3468.995px;min-height:3468.995px}
  .page-dermaceuticals .dc-bespoke{
    height:794px;
    min-height:794px;
    padding:80px 0 0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .dc-bespoke>.container{
    width:1320px;
    max-width:1320px;
    height:714px;
    margin:0 auto;
    padding:0;
  }
  .page-dermaceuticals .dc-bespoke .section-title{
    width:1320px;
    height:75px;
    margin:0;
    font-size:62px;
    line-height:75px;
  }
  .page-dermaceuticals .dc-bespoke .section-sub{
    width:1150px;
    height:25px;
    margin:12px auto 0;
    font-size:16px;
    line-height:25px;
  }
  .page-dermaceuticals .dc-bespoke-grid{
    width:1320px;
    height:582px;
    margin:20px 0 0;
    grid-template-columns:repeat(3,424px);
    gap:24px;
  }
  .page-dermaceuticals .dc-bcard{
    width:424px;
    height:582px;
    border:0;
    border-radius:18px;
    background:rgba(255,255,255,.58);
    box-shadow:none;
    overflow:hidden;
  }
  .page-dermaceuticals .dc-bcard .bmedia{
    width:376px;
    height:326px;
    margin:24px 24px 0;
    border-radius:12px;
    aspect-ratio:auto;
    background:#f5f3f8;
  }
  .page-dermaceuticals .dc-bcard .bmedia img{width:100%;height:100%;max-height:none;object-fit:cover}
  .page-dermaceuticals .dc-bcard h3{width:376px;height:24px;margin:16px 24px 0;font-size:20px;line-height:24px}
  .page-dermaceuticals .dc-bcard p{width:376px;height:64px;margin:8px 24px 0;font-size:14px;line-height:18px;overflow:hidden}
  .page-dermaceuticals .dc-bcard-best{display:grid;width:376px;height:64px;margin:32px 24px 0;color:var(--primary-500);font-size:14px;line-height:20px}
  .page-dermaceuticals .dc-bcard-best strong{font-size:14px;line-height:20px}

  .page-dermaceuticals .dc-why{
    height:1174px;
    min-height:1174px;
    padding:0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .dc-why>.container{
    position:relative;
    width:1320px;
    max-width:1320px;
    height:1174px;
    margin:0 auto;
    padding:0;
  }
  .page-dermaceuticals .dc-why-top{position:absolute;top:80px;left:0;width:1320px;height:595px;margin:0;display:block}
  .page-dermaceuticals .dc-why-img{position:absolute;inset:0;width:1320px;height:595px;border-radius:24px;box-shadow:none}
  .page-dermaceuticals .dc-why-img img{width:100%;height:100%;aspect-ratio:auto;object-position:center;filter:brightness(.96)}
  .page-dermaceuticals .dc-why-top>div:last-child{position:absolute;top:64px;left:564px;width:696px;height:313px}
  .page-dermaceuticals .dc-why-top h2{width:696px;margin:0 0 16px;font-size:48px;line-height:58px}
  .page-dermaceuticals .dc-why-top p{width:696px;margin:0 0 20px;font-size:16px;line-height:22px}
  .page-dermaceuticals .dc-why-actions{gap:14px;flex-wrap:nowrap}
  .page-dermaceuticals .dc-why-actions .btn{height:48px;padding:0 18px;font-size:14px;white-space:nowrap}
  .page-dermaceuticals .dc-why-grid{
    position:absolute;
    top:660px;
    left:11px;
    width:1298px;
    height:434px;
    margin:0;
    padding:0;
    grid-template-columns:624px 658px;
    gap:16px;
  }
  .page-dermaceuticals .dc-why .df-benefits{height:434px;padding:28px;border-radius:16px;background:rgba(255,255,255,.92);box-sizing:border-box}
  .page-dermaceuticals .dc-why .df-benefits h3{margin-bottom:14px;font-size:18px}
  .page-dermaceuticals .dc-why .df-benefits ul{gap:8px}
  .page-dermaceuticals .dc-why .df-benefits li{gap:8px;font-size:12px;line-height:18px}
  .page-dermaceuticals .dc-why .df-check{width:15px;height:15px;font-size:9px}
  .page-dermaceuticals .dc-why .df-disclaimer{margin-top:12px;font-size:11px;line-height:16px}
  .page-dermaceuticals .dc-why .df-benefits .btn{height:40px;margin-top:12px;padding:0 16px;font-size:12px}
  .page-dermaceuticals .dc-stats5{height:434px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:8px}
  .page-dermaceuticals .dc-stats5 .df-stat{min-height:0;padding:20px;border:0;border-radius:12px;box-shadow:none}
  /* Figma highlights only the first stat (3X) in purple; the global
     .df-stat pale !important rule was flattening it. Others stay pale. */
  .page-dermaceuticals .dc-stats5 .df-stat:first-child{background:linear-gradient(47deg,#573b7e 0%,#9d6be4 100%) !important}
  .page-dermaceuticals .dc-stats5 .df-stat:first-child .num{color:#fff}
  .page-dermaceuticals .dc-stats5 .df-stat:first-child p{color:rgba(255,255,255,.92)}
  .page-dermaceuticals .dc-stats5 .df-stat:last-child{grid-column:span 2}
  /* The 5+ card is also .alt (white text) but sits on the flattened pale bg,
     which made its text invisible. Figma shows it pale with dark text. */
  .page-dermaceuticals .dc-stats5 .df-stat.alt:last-child .num{color:var(--primary-500)}
  .page-dermaceuticals .dc-stats5 .df-stat.alt:last-child p{color:var(--neutral-03)}
  .page-dermaceuticals .dc-stats5 .num{font-size:36px}
  .page-dermaceuticals .dc-stats5 .df-stat p{font-size:12px;line-height:18px}

  .page-dermaceuticals .dc-results{
    height:1500.995px;
    min-height:1500.995px;
    padding:80px 0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .dc-results>.container{
    width:1320px;
    max-width:1320px;
    height:1340.995px;
    margin:0 auto;
    padding:50px;
    box-sizing:border-box;
    border-radius:18px;
    background:rgba(255,255,255,.62);
  }
  .page-dermaceuticals .dc-results .section-title{width:1220px;height:75px;margin:0;font-size:58px;line-height:75px}
  .page-dermaceuticals .dc-results .section-sub{width:1220px;height:72px;margin:24px 0 0;font-size:16px;line-height:24px}
  .page-dermaceuticals .dc-results-grid{width:1220px;height:542px;min-height:0;margin:30px 0 0;grid-template-columns:796px 400px;gap:24px}
  .page-dermaceuticals .dc-results-grid .ba-slider{width:796px;height:542px;border-radius:18px}
  .page-dermaceuticals .dc-results-grid .dc-pure-card{width:400px;height:520px;padding:28px;border-radius:18px;box-sizing:border-box}
  /* Cards size to content and top-align — a fixed 382px card + overflow:hidden
     clipped the second line of longer descriptions ("Human Exosome Regeneration
     Serum") and any card whose text ran past the 64px left under the 318px vial. */
  .page-dermaceuticals .dc-results .pp-rel-grid{width:1216px;min-height:0;margin:30px 0 0;grid-template-columns:repeat(4,1fr);gap:30px;align-items:start;overflow:visible}
  .page-dermaceuticals .dc-results .pp-rel-card{width:281px;height:auto;padding:0 0 4px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  .page-dermaceuticals .dc-results .pp-rel-media{width:281px;height:318px;padding:0;border-radius:12px;background:#f5f2f8}
  .page-dermaceuticals .dc-results .pp-rel-media img{width:100%;height:100%;max-height:none;object-fit:contain}
  .page-dermaceuticals .dc-results .pp-rel-card h4{margin:14px 0 0;font-size:16px;line-height:20px}
  .page-dermaceuticals .dc-results .pp-rel-card p{margin:4px 0 0;font-size:12px;line-height:16px}
  .page-dermaceuticals .dc-results .pc-link{display:none}
  .page-dermaceuticals .dc-viewmore{margin-top:30px}

  .page-dermaceuticals .df-step{
    height:878px;
    min-height:878px;
    padding:80px 0;
    box-sizing:border-box;
  }
  .page-dermaceuticals .df-step>.container,
  .page-dermaceuticals .df-step-grid{
    position:relative;
    width:1280px;
    max-width:1280px;
    height:718px;
    margin:0 auto;
    padding:0;
    display:block;
    box-sizing:border-box;
    border-radius:26px;
    background:linear-gradient(110deg,rgba(255,255,255,.48),rgba(248,241,255,.5));
  }
  .page-dermaceuticals .df-step-intro{position:absolute;top:198px;left:48px;width:512px;height:322px}
  .page-dermaceuticals .df-step-intro h2{width:512px;height:140px;margin:0;font-size:58px;line-height:70px}
  .page-dermaceuticals .df-step-intro p{width:512px;height:78px;margin:24px 0 0;font-size:16px;line-height:26px}
  .page-dermaceuticals .df-step-intro .btn{width:274px;height:56px;margin-top:24px;padding:0;justify-content:center}
  .page-dermaceuticals .df-step .acc{position:absolute;top:48px;left:592px;width:640px;height:622px;margin:0;gap:8px}
  .page-dermaceuticals .df-step .acc-item{min-height:74px;border-radius:8px}
  .page-dermaceuticals .df-step .acc-item.open{height:212px}
  .page-dermaceuticals .df-step .acc-head{height:74px;padding:0 24px;font-size:16px;line-height:26px}
  .page-dermaceuticals .df-step .acc-item.open .acc-panel{max-height:120px}
  .page-dermaceuticals .df-step .acc-panel p{padding:0 20px 20px;font-size:14px;line-height:20px}
}

/* --- Latest Blog & News: plain colour bg (no dots), per Figma ---
   Sampled from the design: lilac top-left (#f2e5fd) fading to near-white
   toward the bottom/right. Blogs page listing (.page-blogs) keeps its own bg. */
.blog.section{
  background:linear-gradient(135deg,#f2e5fd 0%,#f7f1fe 42%,#fdfbff 100%) !important;
}
.page-blogs .blog.section{
  background:
    radial-gradient(circle at 24px 24px, rgba(126,92,171,.08) 0 8px, transparent 9px) 0 0/48px 48px,
    linear-gradient(180deg,#fbf7ff 0%,#f2e8fb 100%) !important;
}

/* ============================================================
   DermaFacial — "Why Clinics Are Choosing Préime DermaFacial"
   Rebuilt to Figma node 8334:4744 (frame 1320x928, 60px page margin).

   Structure is a 1320x848 group sitting under 80px of top padding:
     - a full-bleed 1320x595 photo, rounded 24
     - the headline block absolutely placed over its right side
     - a card row that overlaps the photo's bottom edge by 95px

   Scoped to .page-dermafacial and using dfw-* class names on purpose:
   .df-why / .df-benefits / .df-stats are shared with provider-benefits.html
   and dc-dermaceuticals.html, which still use the older centred layout.
   Percentage margins resolve against the 1320 container width, so the
   overlap and gutters stay proportional as the container narrows.
   ============================================================ */
@media (min-width:901px){
  .page-dermafacial .df-why{
    height:928px;box-sizing:border-box;
    padding:80px 0 0;
    background:linear-gradient(160deg,#f7f2fa 0%,#f3ebfa 55%,#efe5f8 100%) !important;
  }
  /* neutralise the older grid/white-card treatment on the container */
  .page-dermafacial .df-why > .container{
    display:block;position:relative;
    width:calc(100% - 120px);max-width:1320px;margin:0 auto;
    padding:0;border-radius:0;overflow:visible;
    background:none;box-shadow:none;
  }

  /* photo — Figma crops the 3:2 source to 1320x595 via these offsets */
  .page-dermafacial .dfw-photo{
    position:relative;width:100%;aspect-ratio:1320/595;
    border-radius:24px;overflow:hidden;
  }
  .page-dermafacial .dfw-photo img{
    position:absolute;left:-2.85%;top:-36.4%;
    width:102.85%;height:152.14%;max-width:none;
    object-fit:cover;display:block;
  }

  /* headline block — 696 wide at x=564.5, y=74 from the photo top */
  .page-dermafacial .dfw-copy{
    position:absolute;left:42.765%;top:74px;width:52.727%;z-index:2;
  }
  .page-dermafacial .dfw-copy h2{
    margin:0;font-family:var(--font-head);font-weight:500;
    font-size:clamp(38px,4.03vw,58px);line-height:1.3;letter-spacing:-.232px;
    color:var(--primary-500);
  }
  .page-dermafacial .dfw-copy p{
    margin:16px 0 0;font-weight:600;font-size:20px;line-height:1.55;
    color:var(--neutral-03);
  }
  .page-dermafacial .dfw-btn{
    margin-top:16px;height:56px;padding:12px 24px;gap:12px;
    border-radius:100px;font-size:16px;font-weight:700;color:#fbf9f5;
    background:linear-gradient(30deg,#573b7e 0%,#7f63a6 100%);
  }

  /* card row — 58/57 gutters, overlapping the photo bottom by 95px */
  .page-dermafacial .dfw-cards{
    position:relative;z-index:2;
    display:flex;align-items:flex-start;gap:16px;
    margin-top:-7.197%;
    padding:0 4.318% 0 4.394%;
  }
  .page-dermafacial .dfw-benefits{
    flex:1 1 640px;min-width:0;box-sizing:border-box;min-height:347px;
    display:flex;flex-direction:column;justify-content:center;gap:16px;
    padding:16px 34px;border-radius:24px;
    background:linear-gradient(180deg,#f8f6fb 0%,#f0ecf7 100%);
  }
  .page-dermafacial .dfw-benefits h3{
    margin:0;font-family:var(--font-head);font-weight:700;
    font-size:24px;line-height:1.2;letter-spacing:-.096px;color:var(--primary-500);
  }
  .page-dermafacial .dfw-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:16px;
  }
  .page-dermafacial .dfw-list li{
    display:flex;align-items:center;gap:12px;
    font-size:16px;line-height:1.55;font-weight:500;color:#49454e;
  }
  /* exact check-circle from Figma (stroke #573B7E, width 1.66667) */
  .page-dermafacial .dfw-check{
    flex:0 0 auto;width:20px;height:20px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.25 10L8.75 12.5L13.75 7.5M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z' stroke='%23573B7E' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  }
  .page-dermafacial .dfw-disclaimer{
    margin:0;font-size:16px;line-height:1.55;font-weight:500;color:#49454e;
  }
  .page-dermafacial .dfw-disclaimer strong{
    margin-right:8px;font-weight:700;
    background:linear-gradient(27deg,#573b7e 0%,#9d6be4 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* stat cards — 2x2 of 264x166, 21px column gap, 16px row gap = 549 wide */
  .page-dermafacial .dfw-stats{
    flex:1 1 549px;min-width:0;box-sizing:border-box;
    display:grid;grid-template-columns:1fr 1fr;column-gap:21px;row-gap:16px;
  }
  .page-dermafacial .dfw-stat{
    box-sizing:border-box;min-height:166px;
    display:flex;flex-direction:column;gap:8px;
    padding:16px;border-radius:16px;overflow:hidden;
    background:linear-gradient(180deg,#f8f6fb 0%,#f0ecf7 100%);
    color:var(--primary-500);
  }
  .page-dermafacial .dfw-stat .num{
    font-family:var(--font-head);font-weight:500;font-size:44px;
    line-height:1.15;letter-spacing:-2px;
  }
  .page-dermafacial .dfw-stat p{margin:0;font-size:18px;line-height:1.4}
  .page-dermafacial .dfw-stat-hl{
    background:linear-gradient(47deg,#573b7e 0%,#9d6be4 100%);
    color:#f6f3fa;
  }
  .page-dermafacial .dfw-stat-hl p{font-weight:600;line-height:1.7}
}

/* Below the desktop band the fixed Figma geometry can't hold: stack the
   photo, headline and cards instead of overlapping them. */
@media (max-width:900px){
  .page-dermafacial .df-why{background:linear-gradient(180deg,#f7f2fa,#efe5f8) !important}
  .page-dermafacial .df-why > .container{display:block;padding:0 20px;background:none;border-radius:0}
  .page-dermafacial .dfw-photo{border-radius:20px;overflow:hidden;aspect-ratio:4/3}
  .page-dermafacial .dfw-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .page-dermafacial .dfw-copy{margin-top:26px}
  .page-dermafacial .dfw-copy h2{font-size:34px;line-height:1.2;color:var(--primary-500);font-family:var(--font-head);font-weight:500;margin:0}
  .page-dermafacial .dfw-copy p{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--neutral-03)}
  .page-dermafacial .dfw-btn{margin-top:16px;border-radius:100px;color:#fbf9f5;background:linear-gradient(30deg,#573b7e 0%,#7f63a6 100%)}
  .page-dermafacial .dfw-cards{display:flex;flex-direction:column;gap:16px;margin-top:26px}
  .page-dermafacial .dfw-benefits{
    display:flex;flex-direction:column;gap:14px;
    padding:24px 22px;border-radius:20px;
    background:linear-gradient(180deg,#f8f6fb 0%,#f0ecf7 100%);
  }
  .page-dermafacial .dfw-benefits h3{margin:0;font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--primary-500)}
  .page-dermafacial .dfw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .page-dermafacial .dfw-list li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.5;color:#49454e}
  .page-dermafacial .dfw-check{
    flex:0 0 auto;width:18px;height:18px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.25 10L8.75 12.5L13.75 7.5M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z' stroke='%23573B7E' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  }
  .page-dermafacial .dfw-disclaimer{margin:0;font-size:12px;line-height:1.5;color:#49454e}
  .page-dermafacial .dfw-disclaimer strong{color:var(--primary-500);margin-right:6px}
  .page-dermafacial .dfw-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .page-dermafacial .dfw-stat{
    display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;
    background:linear-gradient(180deg,#f8f6fb 0%,#f0ecf7 100%);color:var(--primary-500);
  }
  .page-dermafacial .dfw-stat .num{font-family:var(--font-head);font-weight:500;font-size:32px;line-height:1.15;letter-spacing:-1px}
  .page-dermafacial .dfw-stat p{margin:0;font-size:13px;line-height:1.35}
  .page-dermafacial .dfw-stat-hl{background:linear-gradient(47deg,#573b7e 0%,#9d6be4 100%);color:#f6f3fa}
}

/* ============================================================
   Home — "How Préime Transforms Skin"   (Figma node 8334:16733)

   The band is 1441x965: a full-bleed WHITE panel with rounded TOP
   corners (measured r=49 -> 48) over the page's lavender wash, 54px
   top/bottom padding and a 1281 content column.

   The previous build wrapped the content in an inset white card
   (radius 30, padding 52/48/40) inside a 1440-wide container, so the
   content ran taller than the fixed 965 band and the caption and
   pagination were clipped off the bottom.

   Vertical rhythm straight from Figma:
     54 pad | 178 header | 24 | 520 slider | 24 | 75 caption | 24 | 12 dots | 54 pad = 965
   ============================================================ */
@media (min-width:901px){
  .page-index .transforms{
    position:relative;
    height:965px;box-sizing:border-box;
    padding:54px 0 0;
    /* lavender continues the science wash; it shows through the rounded top corners */
    background:linear-gradient(90deg,#efe2fc 0%, #f4ebfc 50%, #f6f1fc 100%) !important;
  }
  .page-index .transforms::before{
    content:"";position:absolute;inset:0;
    background:#fff;border-radius:48px 48px 0 0;
  }
  .page-index .transforms > .container{
    position:relative;z-index:1;
    width:1281px;max-width:1281px;margin:0 auto;
    padding:0;background:none;border-radius:0;box-shadow:none;
  }

  /* header — chip + h2 + tabs stacked left, CTA vertically centred right */
  .page-index .transforms-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;height:178px;margin:0;
  }
  .page-index .transforms-head-copy{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
  }
  .page-index .transforms .eyebrow-chip{
    margin:0;padding:2px 8px;border:0;box-shadow:none;border-radius:100px;
    background:#fbf7f5;color:var(--primary-500);
    font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.4;letter-spacing:0;
  }
  .page-index .transforms .section-title{
    margin:0;text-align:left;white-space:nowrap;
    font-family:var(--font-head);font-weight:500;
    font-size:58px;line-height:1.4;letter-spacing:-.29px;color:var(--primary-500);
  }
  .page-index .transforms .ba-tabs{margin:0;gap:24px;flex-wrap:nowrap}
  .page-index .transforms .ba-tab{
    padding:16px 20px;border-radius:100px;
    border:1.5px solid var(--primary-500);background:none;
    font-weight:600;font-size:18px;line-height:1.4;color:var(--primary-500);
  }
  .page-index .transforms .ba-tab.active{background:var(--primary-500);color:#fff}
  .page-index .transforms .discover-btn{
    flex:0 0 auto;height:56px;padding:12px 24px;gap:12px;border-radius:100px;
    font-size:16px;font-weight:700;color:#fbf9f5;
    background:linear-gradient(22deg,#573b7e 0%, #9d6be4 100%);
  }

  /* slider — 1280x520, 28px radius, no drop shadow in Figma */
  .page-index .transforms .ba-slider{
    width:100%;margin:24px 0 0;
    aspect-ratio:1280/520;border-radius:28px;box-shadow:none;
  }
  /* handle — Figma uses a translucent white pill with two spaced chevrons
     flanking the divider, not a solid knob. */
  .page-index .transforms .ba-handle::after{
    width:81px;height:42px;border-radius:21px;
    background:rgba(255,255,255,.14);
    border:1.5px solid rgba(255,255,255,.6);
    box-shadow:none;
  }
  /* Before/After sit either side of the handle (~84px out), not at the edges.
     .ba-label-before is inside the clipped .ba-before, so anchoring it right
     tracks the divider for free; .ba-label-after follows --ba-pct (set in App.jsx). */
  .page-index .transforms .ba-label{font-size:40px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
  .page-index .transforms .ba-label-before{left:auto;right:84px}
  .page-index .transforms .ba-label-after{right:auto;left:calc(var(--ba-pct,50%) + 83px)}

  .page-index .transforms .ba-caption{
    width:1255px;max-width:1255px;margin:24px auto 0;
    font-size:16px;line-height:25px;color:#49454e;text-align:center;
  }
  .page-index .transforms .ba-dots{margin:24px 0 0;gap:10px;height:12px;align-items:center}
  .page-index .transforms .ba-dots .dot{width:12px;height:12px;border-radius:6px;background:var(--secondary-100)}
  .page-index .transforms .ba-dots .dot.active{
    width:32px;border-radius:6px;
    background:linear-gradient(90deg,#573b7e 0%, #9d6be4 100%);
  }
}

@media (max-width:900px){
  .page-index .transforms{height:auto;padding:56px 0 0;background:linear-gradient(180deg,#f6f0fb,#efe7f8) !important}
  .page-index .transforms::before{content:none}
  .page-index .transforms > .container{width:auto;max-width:none;padding:0 20px;background:none}
  .page-index .transforms-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;height:auto}
  .page-index .transforms-head-copy{gap:10px}
  .page-index .transforms .section-title{font-size:30px;white-space:normal}
  .page-index .transforms .ba-tabs{flex-wrap:wrap;gap:10px}
  .page-index .transforms .ba-tab{padding:10px 16px;font-size:14px}
  .page-index .transforms .ba-caption{width:auto;max-width:none;font-size:14px;line-height:22px}
}

/* ============================================================
   DermaCeuticals / Skin Analyzer / Nano Pen — Figma page pass
   (nodes 8334:5762, 8334:9433, 10370:18370)

   Figma uses a flat left-to-right lavender wash on these mid-page
   sections — no dot pattern. The shared !important rule near the top
   of this file dots .df-about/.dc-regen/.dp-tech, so re-flatten the
   exact sections that carry dots here, page-scoped so DermaFacial,
   product and blog pages keep their own treatment.
   Wash sampled from the designs: #f0e2fc (left) -> #f6f1fc (right).
   ============================================================ */
.page-skin-analyzer .df-about,
.page-skin-analyzer .dc-regen.skin-core,
.page-nano-pen .df-about,
.page-nano-pen .dp-tech,
.page-nano-pen .dc-regen.nano-clinical,
.page-dermaceuticals .df-about,
.page-dermaceuticals .dc-regen{
  background:linear-gradient(90deg,#f0e2fc 0%,#f6f1fc 100%) !important;
}

/* --- Nano Pen: Figma section details (node 10370:18370) --- */
.page-nano-pen .nano-ideal{
  color:var(--primary-500);font-weight:700;font-size:16px;margin:0 0 14px;
}
.page-nano-pen .nano-bullets{
  list-style:disc;margin:0;padding:0 0 0 20px;
  display:flex;flex-direction:column;gap:12px;
}
.page-nano-pen .nano-bullets li{
  color:var(--neutral-03);font-size:16px;line-height:1.5;padding-left:4px;
}
/* Key Features right side is a composed LED illustration on a light card,
   so show it whole (contain) rather than cover-cropping it. */
.page-nano-pen .nano-features-media-contain{
  background:linear-gradient(150deg,#f3ecfa,#efe6f8);
  display:flex;align-items:center;justify-content:center;
}
.page-nano-pen .nano-features-media-contain img{
  width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box;
}
/* Clinical Applications: Figma places the image on the LEFT, copy on the right. */
@media (min-width:901px){
  .page-nano-pen .nano-clinical .dc-regen-grid{direction:rtl}
  .page-nano-pen .nano-clinical .dc-regen-grid > *{direction:ltr}
}

/* --- Nano Pen: Benefits Over Traditional Tools — heading left, plain columns right (Figma) --- */
@media (min-width:901px){
  .page-nano-pen .nano-benefits-grid{
    display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:40px;max-width:none;
  }
  .page-nano-pen .nano-benefits h2{
    margin:0;text-align:left;color:#fff;font-family:var(--font-head);font-weight:500;
    font-size:clamp(30px,3.2vw,44px);line-height:1.15;
  }
  .page-nano-pen .nano-benefits .np-compare{
    grid-column:2 / 4;display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:none;margin:0;
  }
  .page-nano-pen .nano-benefits .np-col,
  .page-nano-pen .nano-benefits .np-col.hl{
    background:transparent;border:0;border-radius:0;padding:0;height:auto;width:auto;
  }
  .page-nano-pen .nano-benefits .np-col h4{font-size:19px;margin-bottom:16px;height:auto}
  .page-nano-pen .nano-benefits .np-col ul{gap:12px}
  .page-nano-pen .nano-benefits .np-col li{font-size:15px;height:auto;line-height:1.4;white-space:normal}
}

/* ============================================================
   Skin Analyzer — Figma section builds (node 8334:9433)
   ============================================================ */
/* keep 4 Key Features on the flat lavender wash (its inline #fff bg was removed) */
.page-skin-analyzer .skin-keyfeat{
  background:linear-gradient(90deg,#f0e2fc 0%,#f6f1fc 100%) !important;
}
@media (min-width:901px){
  /* Core Technologies: device image LEFT, "17 Skin Parameters" list RIGHT */
  .page-skin-analyzer .skin-core .dc-regen-grid{direction:rtl}
  .page-skin-analyzer .skin-core .dc-regen-grid > *{direction:ltr}
}
.page-skin-analyzer .skin-core-sub{
  color:var(--primary-500);font-weight:700;font-size:16px;margin:0 0 18px;
}
.page-skin-analyzer .skin-params{
  list-style:disc;margin:0;padding:0 0 0 20px;
  columns:1;display:flex;flex-direction:column;gap:11px;
}
.page-skin-analyzer .skin-params li{color:var(--neutral-03);font-size:16px;line-height:1.4;padding-left:4px}
.page-skin-analyzer .skin-core-media{background:transparent !important;border:0 !important;padding:0 !important}
.page-skin-analyzer .skin-core-media img{max-height:380px;width:auto;margin:0 auto}

/* 4 Key Features: white rounded card, check bullets, then 3 captioned phones */
.page-skin-analyzer .skin-keyfeat-card{
  background:#fff;border-radius:28px;padding:52px 56px 56px;
  box-shadow:0 24px 60px rgba(87,59,126,.08);
}
.page-skin-analyzer .skin-keyfeat-card > h2{
  font-family:var(--font-head);font-weight:500;color:var(--primary-500);
  font-size:clamp(30px,3.4vw,48px);line-height:1.15;margin:0 0 26px;
}
.page-skin-analyzer .skin-keyfeat-list{list-style:none;margin:0 0 44px;padding:0;display:flex;flex-direction:column;gap:16px}
.page-skin-analyzer .skin-keyfeat-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--neutral-03)}
.page-skin-analyzer .skin-keyfeat-list strong{color:var(--primary-500)}
.page-skin-analyzer .skin-keyfeat-list .df-check{flex:0 0 auto;margin-top:2px}
.page-skin-analyzer .skin-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;justify-items:center}
.page-skin-analyzer .skin-shots figure{margin:0;text-align:center;max-width:280px}
.page-skin-analyzer .skin-shots img{width:100%;border-radius:22px;display:block}
.page-skin-analyzer .skin-shots figcaption{margin-top:16px;color:var(--neutral-03);font-size:18px}

/* Handheld skin microimager: solid purple card on the lavender wash */
.page-skin-analyzer .skin-handheld{
  background:linear-gradient(90deg,#f0e2fc 0%,#f6f1fc 100%) !important;
  color:inherit;display:flex;align-items:center;
}
/* Sized to the Figma card (~1317x647): big ExtraBold heading, ~21px bullets
   wrapping at ~640px, large wand at right. */
.page-skin-analyzer .skin-handheld-card{
  position:relative;overflow:hidden;
  background:#7c5197;border-radius:30px;
  padding:56px 64px;color:#fff;min-height:640px;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
}
.page-skin-analyzer .shh-copy{max-width:56%}
.page-skin-analyzer .skin-handheld-card h2{
  font-family:var(--font-head);font-weight:700;font-size:clamp(34px,4.2vw,60px);
  line-height:1.1;margin:0 0 20px;color:#fff;
}
.page-skin-analyzer .shh-sub{font-weight:700;font-size:24px;margin:0 0 30px;color:#fff}
.page-skin-analyzer .shh-lead{font-weight:700;font-size:21px;margin:0 0 16px;color:#fff}
.page-skin-analyzer .shh-list{list-style:disc;margin:0;padding:0 0 0 24px;display:flex;flex-direction:column;gap:16px}
.page-skin-analyzer .shh-list li{font-size:20px;line-height:1.35;color:rgba(255,255,255,.92)}
.page-skin-analyzer .shh-list strong{color:#fff;font-weight:700}
.page-skin-analyzer .shh-wand{
  position:absolute;right:56px;top:50%;transform:translateY(-50%);width:340px;height:auto;
  mix-blend-mode:normal;pointer-events:none;
}
@media (max-width:900px){
  .page-skin-analyzer .skin-core .dc-regen-grid{direction:ltr}
  .page-skin-analyzer .skin-keyfeat-card{padding:30px 22px}
  .page-skin-analyzer .skin-shots{grid-template-columns:1fr;gap:26px}
  .page-skin-analyzer .shh-copy{max-width:100%}
  .page-skin-analyzer .shh-wand{position:static;width:150px;margin:20px auto 0;display:block}
  .page-skin-analyzer .skin-handheld-card{padding:34px 24px}
}

/* ============================================================
   Blogs page — match Figma 10370:20771: flat lavender wash (no dot
   pattern anywhere), post-card chip as an outlined pill BELOW the
   image, Read More link instead of a date meta line.
   ============================================================ */
.page-blogs .bl-hero + .section,
.page-blogs .blog.section,
.page-blogs .bl-news{
  background:linear-gradient(90deg,#f0e2fc 0%,#f4ebfc 50%,#f6f1fc 100%) !important;
}
/* chip sits in flow under the image (was an absolute overlay on it) */
.page-blogs .bl-posts .blog-tag{
  display:inline-block;position:static;align-self:flex-start;
  margin:16px 4px 2px;padding:5px 14px;
  background:#fff;border:1px solid var(--secondary-100);border-radius:var(--pill);
  color:var(--primary-500);font-size:12.5px;font-weight:600;
  box-shadow:none;
}
.page-blogs .bl-posts .blog-card{display:flex;flex-direction:column}
.page-blogs .bl-posts .blog-read{
  display:inline-block;margin:2px 4px 0;color:var(--primary-500);font-weight:700;font-size:14px;
}

/* ============================================================
   Regenerative Actives family — Figma pass (9337:3211 + actives)
   ============================================================ */
/* hero: Figma places the text block just right of the model's face
   (~22% in), not in the right half */
@media (min-width:901px){
  /* Figma composition: model left, exosome cell right, text in the clear
     band between them. The art stays untouched at cover/center — shifting
     it exposes a flat strip once the image runs out — and the text is
     placed into the art's natural gap (face ends ~46% in, cell starts ~80%). */
  .ra-hero-inner{justify-content:flex-start}
  .ra-hero-text{width:min(470px,40vw);max-width:none;margin-left:48%;margin-right:16px;text-align:left}
  .ra-hero-text h1{font-size:clamp(34px,3.1vw,46px)}
  .ra-hero-text p{font-size:clamp(17px,1.5vw,21px)}
}
/* key-actives cards: icons sit in a soft rounded chip per Figma */
.ra-ico{
  width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#f3ecfb,#e9defa);color:var(--primary-500);margin-bottom:14px;
}
/* Redefining band: plain text link + big transparent bottles per Figma */
.ra-discover-link{display:inline-block;margin-top:6px;font-weight:600;color:var(--neutral-03)}
.ra-discover-link:hover{color:var(--primary-500)}
.ra-redefine-media.ra-bottles{background:none;border:none;box-shadow:none;padding:0}
.ra-redefine-media.ra-bottles img{width:100%;max-width:450px;border-radius:18px}

/* actives detail pages */
.active-scope-icon svg{display:block}
.active-scope-item.hl{background:#fff;box-shadow:0 10px 26px rgba(87,59,126,.08)}
.active-dots{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.active-dots li{position:relative;padding-left:18px;color:var(--black-500);font-weight:600;font-size:16px;line-height:1.45}
.active-dots li::before{content:"•";position:absolute;left:4px;color:var(--black-500)}
.active-dots li strong{font-weight:700}
.active-adv-media.active-adv-photo{background:none;padding:0;overflow:hidden;border-radius:24px}
.active-adv-media.active-adv-photo img{width:100%;height:100%;max-height:none;object-fit:cover;display:block}
.active-family-media{background:none !important;border:none;box-shadow:none;padding:0 !important;overflow:hidden;border-radius:24px}
.active-family-media img{width:100%;display:block;border-radius:24px}
/* Clinically Proven card (human exosomes) */
.active-clin{background:linear-gradient(90deg,#f0e2fc 0%,#f6f1fc 100%)}
.active-clin-card{
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  border-radius:28px;padding:56px 60px;
  background:linear-gradient(115deg,rgba(255,255,255,.72),rgba(244,236,252,.55));
  border:1px solid rgba(255,255,255,.8);
}
.active-clin-card h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(32px,3.6vw,52px);line-height:1.15;margin-bottom:18px}
.active-clin-card p{color:var(--neutral-03);font-size:16px;line-height:1.6;margin-bottom:14px;max-width:560px}
.active-clin-media img{width:100%;border-radius:20px;display:block}
@media (max-width:900px){
  .active-clin-card{grid-template-columns:1fr;padding:28px 22px}
}

/* ============================================================
   Become a Provider — rebuilt to Figma 8334:24162
   ============================================================ */
.bp2-hero{
  padding:74px 0 78px;text-align:center;color:#fff;
  background:
    radial-gradient(40% 60% at 85% 20%, rgba(196,120,230,.4) 0%, transparent 65%),
    radial-gradient(36% 52% at 10% 85%, rgba(120,70,190,.55) 0%, transparent 65%),
    linear-gradient(118deg,#5b2fa0 0%,#6e3ab4 48%,#7d43c4 100%);
}
.bp2-hero h1{font-family:var(--font-head);font-weight:500;font-size:clamp(32px,3.4vw,46px);margin-bottom:14px}
.bp2-hero p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.9);font-size:16px;line-height:1.6}
.bp2-enquiries{padding:88px 0;background:linear-gradient(90deg,#f0e2fc 0%,#f4ebfc 50%,#f6f1fc 100%)}
.bp2-enquiries-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.bp2-details h2{font-family:var(--font-head);font-weight:500;color:var(--primary-500);font-size:clamp(30px,3vw,42px);margin-bottom:14px}
.bp2-intro{color:var(--neutral-03);font-size:16px;margin-bottom:30px}
.bp2-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.bp2-contact li{display:flex;gap:16px;align-items:flex-start}
.bp2-contact li svg{flex:0 0 auto;width:22px;height:22px;color:var(--black-500);margin-top:3px}
.bp2-contact li span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--neutral-03);margin-bottom:4px}
.bp2-contact li a,.bp2-contact li p{color:var(--black-500);font-size:15.5px;font-weight:600;line-height:1.5;margin:0}
.bp2-form{
  background:#fff;border-radius:18px;padding:34px 36px 30px;
  box-shadow:0 24px 60px rgba(87,59,126,.12);
  display:flex;flex-direction:column;gap:16px;
}
.bp2-form h3{font-family:var(--font-head);font-weight:700;color:var(--black-500);font-size:20px}
.bp2-form-sub{color:var(--neutral-03);font-size:13.5px;margin:-8px 0 2px}
.bp2-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:var(--black-500)}
.bp2-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bp2-form input,.bp2-form select,.bp2-form textarea{
  width:100%;border:1px solid #e4dced;border-radius:10px;background:#fff;
  padding:12px 14px;font-family:var(--font-body);font-size:14px;color:var(--black-500);
}
.bp2-form textarea{resize:vertical}
.bp2-form input:focus,.bp2-form select:focus,.bp2-form textarea:focus{outline:none;border-color:var(--primary-400)}
.bp2-submit{justify-content:center;background:var(--primary-500);color:#fff;font-weight:700;border-radius:10px;padding:14px 20px;margin-top:6px}
.bp2-submit:hover{filter:brightness(1.08)}
.bp2-help{padding:0 0 96px;background:linear-gradient(90deg,#f0e2fc 0%,#f4ebfc 50%,#f6f1fc 100%)}
.bp2-help-card{
  position:relative;overflow:visible;border-radius:26px;color:#fff;
  padding:56px 480px 56px 56px;min-height:230px;
  background:linear-gradient(115deg,#5b2fa0 0%,#8d55d7 100%);
}
.bp2-help-card h2{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,2.8vw,38px);margin-bottom:26px}
.bp2-contact-light li svg{color:#fff;background:rgba(255,255,255,.16);border-radius:50%;width:40px;height:40px;padding:9px;margin-top:0}
.bp2-contact-light li span{color:rgba(255,255,255,.75)}
.bp2-contact-light li a{color:#fff}
.bp2-help-photo{
  position:absolute;right:44px;bottom:0;width:470px;max-width:46%;
  display:block;pointer-events:none;   /* card overflow stays visible so the
                                          heads rise above the top edge (Figma) */
}
@media (max-width:900px){
  .bp2-enquiries{padding:56px 0}
  .bp2-enquiries-grid{grid-template-columns:1fr;gap:40px}
  .bp2-form-row{grid-template-columns:1fr}
  .bp2-help-card{padding:36px 26px 220px}
  .bp2-help-photo{right:50%;transform:translateX(50%);width:300px;max-width:80%}
}

/* ============================================================
   Blogs — Figma's rich 3-column footer, on this page only.
   The markup already exists (Footer.jsx renders the mobile
   directory on every page); we just swap which set shows.
   ============================================================ */
@media (min-width:901px){
  .route-blogs .footer-cols{display:none}
  .route-blogs .footer-mobile-directory{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;flex:1;
  }
  .route-blogs .footer-mobile-pair{display:contents}
  .route-blogs .footer-mobile-col h4{color:#fff;font-size:15.5px;margin-bottom:14px}
  .route-blogs .footer-mobile-col a{display:block;color:rgba(255,255,255,.72);font-size:14px;line-height:1.5;margin-bottom:10px}
  .route-blogs .footer-mobile-col a:hover{color:#fff}
  .route-blogs .footer-contact .footer-mobile-only{display:flex}
}