/* ==========================================================================
   Shape of You - Google Ads landing pages
   ONE shared stylesheet for every /hifu10, /tribella, /pigmentation ... page.
   Scope: everything is nested under .soy-lp so nothing leaks into the theme.

   Conventions (DeCODE house rules):
   - Colour comes from the Beaver Builder globals (var(--fl-global-*)) so a
     palette change in the Customizer flows through here. No raw hex for brand
     colour anywhere below.
   - Body copy inherits the theme's type scale. Explicit font-size is only used
     for genuine layout exceptions - display prices, eyebrows, tags, captions -
     and each of those is commented.
   - Headings inherit the theme families (H1 Classico, H2-H6 Avenir). Display
     numerals borrow the H1 family via --lp-display so they read as brand.

   IMPORTANT - this site sets html { font-size: 10px }, so 1rem = 10px here,
   not the usual 16px. Every rem value below is written against that 10px base:
   1.6rem = 16px, 6.4rem = 64px. If the root ever changes, rescale this file.
   ========================================================================== */

.soy-lp {
  /* --- palette: mapped straight onto the BB globals --- */
  --lp-ink:        var(--fl-global-charcoal, #141415);
  --lp-body:       var(--fl-global-text, rgb(77, 77, 77));
  --lp-muted:      var(--fl-global-steel, #6B6E73);
  --lp-line:       var(--fl-global-mist, #E5E6E8);
  --lp-line-hover: var(--fl-global-chrome, #B0B3B7);
  --lp-blue:       var(--fl-global-dark-blue, rgb(101, 148, 195));
  --lp-blue-soft:  var(--fl-global-light-blue, #bfd7ef);
  --lp-blue-wash:  var(--fl-global-blue-bg, rgba(191, 215, 238, 0.22));
  --lp-graphite:   var(--fl-global-graphite, #2E3033);
  --lp-white:      #fff;

  /* --- surfaces --- */
  --lp-bg:      var(--lp-white);
  --lp-bg-tint: var(--lp-blue-wash);
  --lp-bg-mist: var(--fl-global-mist, #E5E6E8);
  --lp-card:    var(--lp-white);
  --lp-stage:   var(--lp-graphite);

  /* white-washed embossed texture - the house parent-card treatment */
  --lp-texture: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)),
                url(/wp-content/uploads/2026/06/Texture.png);

  /* --- elevation (house values) --- */
  --lp-shadow:       0 2px 10px -4px rgba(20, 20, 21, .06);
  --lp-shadow-hover: 0 12px 28px -16px rgba(20, 20, 21, .16);
  --lp-shadow-lift:  0 18px 40px -22px rgba(20, 20, 21, .28);

  --lp-radius: 4px;
  --lp-radius-lg: 14px;
  --lp-gutter: 28px;
  --lp-section: clamp(56px, 8vw, 96px);

  /* display family: matches the theme's H1 (Classico) */
  --lp-display: "Classico", Georgia, "Times New Roman", serif;

  color: var(--lp-body);
  background: var(--lp-bg);
  overflow-x: hidden;
}

.soy-lp *,
.soy-lp *::before,
.soy-lp *::after { box-sizing: border-box; }

.soy-lp p,
.soy-lp h1, .soy-lp h2, .soy-lp h3, .soy-lp h4,
.soy-lp figure, .soy-lp ul, .soy-lp li { margin: 0; padding: 0; }

.soy-lp h1, .soy-lp h2, .soy-lp h3, .soy-lp h4 { color: var(--lp-ink); }

/* the accent word inside a headline - brand blue, never italic */
.soy-lp h1 em,
.soy-lp h2 em,
.soy-lp h3 em { font-style: normal; color: var(--lp-blue); }

.soy-lp img { max-width: 100%; }

/* --------------------------------------------------------------- layout -- */
.soy-lp .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
}

.soy-lp section { padding: var(--lp-section) 0; }

.soy-lp .sec-head {
  text-align: center;
  max-width: 42em;
  margin: 0 auto clamp(34px, 5vw, 54px);
}
.soy-lp .sec-head h2 { margin: 12px 0 0; }
.soy-lp .sec-head p.sub { margin-top: 16px; color: var(--lp-body); }

/* Eyebrow label. Layout exception: a small tracked-out uppercase label has to
   be set below body size or the tracking swallows the line. */
.soy-lp .eyebrow {
  display: block;
  font-size: 1.152rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--lp-blue);
}

/* --------------------------------------------------------------- buttons -- */
/* House rule: Book Now / primary action buttons are charcoal, not blue. */
.soy-lp .btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--lp-ink);
  color: var(--lp-white);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 16px 32px;
  border: 1px solid var(--lp-ink);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s;
}
.soy-lp .btn:hover,
.soy-lp .btn:focus-visible {
  background: transparent;
  color: var(--lp-ink);
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-hover);
}
.soy-lp .btn .arrow { transition: transform .35s; }
.soy-lp .btn:hover .arrow { transform: translateX(4px); }

/* .btn--blue was the old site's blue booking button. It is the primary CTA in
   every offer section, so it keeps the filled .btn treatment (charcoal, per the
   house rule) rather than getting a fill of its own. */

/* secondary action - outlined, picks up brand blue on hover. In a hero pair the
   second button steps back automatically so the first one leads. */
.soy-lp .btn--ghost,
.soy-lp .hero-cta-row .btn ~ .btn {
  background: transparent;
  color: var(--lp-ink);
  border-color: var(--lp-ink);
}
.soy-lp .btn--ghost:hover,
.soy-lp .btn--ghost:focus-visible,
.soy-lp .hero-cta-row .btn ~ .btn:hover,
.soy-lp .hero-cta-row .btn ~ .btn:focus-visible {
  background: var(--lp-blue);
  border-color: var(--lp-blue);
  color: var(--lp-white);
}

/* reassurance line under a CTA. Layout exception: deliberately fine print. */
.soy-lp .cta-reassure {
  font-size: 1.28rem;
  color: var(--lp-muted);
  margin: 14px auto 0;
  max-width: 34em;
}
.soy-lp .cta-reassure a { color: var(--lp-blue); text-decoration: underline; }

/* ------------------------------------------------------------ animation -- */
.soy-lp .reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.soy-lp .reveal.pre { opacity: 0; transform: translateY(24px); }
.soy-lp .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .soy-lp .reveal,
  .soy-lp .reveal.pre { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------- hero -- */
.soy-lp .hero {
  position: relative;
  overflow: hidden;
  background: var(--lp-bg);
}
.soy-lp .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(54% 70% at 82% 20%, var(--lp-blue-wash), transparent 64%);
  pointer-events: none;
}
.soy-lp .hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
  padding: clamp(48px, 7vw, 80px) 0 clamp(44px, 6vw, 76px);
}
/* Layout exception: the hero headline. These are ad landing pages, so the
   headline is the whole proposition and has to outweigh the 21px lead
   paragraph. Runs 40px on a phone up to 64px on desktop. Tune the two clamp
   ends here and all eleven pages follow. Section H2s deliberately stay on the
   Customizer scale. */
.soy-lp .hero h1 {
  font-size: clamp(4rem, 2.32rem + 3.1vw, 6.4rem);
  line-height: 1.1;
  margin: 18px 0 22px;
}
.soy-lp .hero p.lead { max-width: 32em; margin-bottom: 26px; }

/* text-only hero variant (no device shot) */
.soy-lp .hero--text .wrap {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(44px, 6vw, 76px);
}
.soy-lp .hero--text p.lead { margin-inline: auto; }
.soy-lp .hero--text .hero-price,
.soy-lp .hero--text .hero-cta-row { justify-content: center; margin-inline: auto; }

/* the in-hero logo is redundant now the site header sits above the page */
.soy-lp .brandmark { display: none; }

.soy-lp .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Layout exception: uppercase tracked meta strip. */
.soy-lp .hero-meta {
  font-size: 1.248rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin-top: 24px;
}

/* price block ------------------------------------------------------------ */
.soy-lp .hero-price {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 14px 24px;
  margin-bottom: 26px;
}
/* Layout exception: display price, sized to dominate the hero. */
.soy-lp .hero-price .hp-amount {
  font-family: var(--lp-display);
  font-size: clamp(3.68rem, 4.5vw, 4.8rem);
  color: var(--lp-blue);
  line-height: 1;
}
.soy-lp .hero-price .hp-amount small { font-size: .42em; vertical-align: top; margin-right: 1px; }
.soy-lp .hero-price .hp-was {
  font-size: .44em;
  color: var(--lp-muted);
  text-decoration: line-through;
  margin-right: .32em;
  vertical-align: middle;
}
.soy-lp .hero-price .hp-text { display: flex; flex-direction: column; text-align: left; }
.soy-lp .hero-price .hp-text strong { color: var(--lp-ink); font-weight: 500; letter-spacing: .02em; }
.soy-lp .hero-price .hp-text span { font-size: 1.248rem; color: var(--lp-muted); letter-spacing: .03em; }

/* anchored price (glow-booster / tribella variant) */
.soy-lp .price-anchor { margin: 0 auto 26px; max-width: 30em; }
.soy-lp .pa-prices {
  font-family: var(--lp-display);
  font-size: clamp(3.52rem, 5vw, 4.8rem);
  color: var(--lp-ink);
  line-height: 1;
}
.soy-lp .pa-prices .was { color: var(--lp-muted); text-decoration: line-through; font-size: .62em; margin-right: .35em; }
.soy-lp .pa-label { margin-top: 8px; color: var(--lp-ink); }
.soy-lp .pa-label strong { font-weight: 500; }
.soy-lp .pa-sub {
  font-size: 1.184rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-blue);
  font-weight: 500;
  margin-top: 5px;
}

/* device / hero imagery -------------------------------------------------- */
.soy-lp .hero-device {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--lp-stage);
  border: 1px solid var(--lp-graphite);
  border-radius: 10px;
  padding: 30px 24px;
  overflow: hidden;
}
.soy-lp .hero-device img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  filter: drop-shadow(0 18px 40px rgba(20, 20, 21, .3));
}
.soy-lp .hero-badge {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(20, 20, 21, .62);
  border: 1px solid var(--lp-blue-soft);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Layout exception: text fitted inside a 112px badge. */
.soy-lp .hero-badge .num { font-family: var(--lp-display); font-size: 2.96rem; color: var(--lp-blue-soft); line-height: 1; }
.soy-lp .hero-badge .lbl { font-size: 0.864rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lp-line); margin-top: 5px; }

.soy-lp .hero-photo,
.soy-lp .why-photo,
.soy-lp .clinic-photo,
.soy-lp .treatphoto-frame {
  max-width: 880px;
  margin: clamp(34px, 5vw, 56px) auto 0;
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  box-shadow: var(--lp-shadow-lift);
  line-height: 0;
}
.soy-lp .why-photo { max-width: 430px; margin: 0 auto 42px; }
/* The shared clinic shot is a tall portrait. Crop it to a banner so it sets
   the scene without pushing the offer below the fold. */
.soy-lp .hero-photo,
.soy-lp .clinic-photo { aspect-ratio: 16 / 7; }
.soy-lp .hero-photo img,
.soy-lp .clinic-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.soy-lp .why-photo img { width: 100%; height: auto; display: block; }
.soy-lp .treatphoto { background: var(--lp-bg-tint); }

/* ------------------------------------------------------------- symptoms -- */
.soy-lp .symptoms { background: var(--lp-bg-mist); }
.soy-lp .sym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--lp-line-hover);
  border: 1px solid var(--lp-line-hover);
}
.soy-lp .sym { background: var(--lp-bg-mist); padding: 32px 30px; }
.soy-lp .sym h3 { margin-bottom: 8px; }
.soy-lp .sym h3 .q { color: var(--lp-blue); }

/* ------------------------------------------------------------------ why -- */
.soy-lp .why { background: var(--lp-bg); }
.soy-lp .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
}
.soy-lp .why-item { background: var(--lp-bg); padding: 38px 30px; }
.soy-lp .why-item .ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--lp-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-blue);
  font-family: var(--lp-display);
  margin-bottom: 18px;
}
.soy-lp .why-item h3 { margin-bottom: 8px; }

/* treatment grid variant (free-skin / hollywood-peel / laser-genesis) */
.soy-lp .treat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
  background: none;
  border: 0;
}
.soy-lp .treat-grid > .why-item {
  /* house parent-card treatment: white-washed texture, black text, no border */
  background-image: var(--lp-texture);
  background-size: cover;
  border: 1px solid transparent;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  color: var(--lp-ink);
  transition: box-shadow .3s, border-color .3s;
}
.soy-lp .treat-grid > .why-item:hover {
  border-color: var(--lp-line-hover);
  box-shadow: var(--lp-shadow-hover);
}

/* ------------------------------------------------------------------ how -- */
.soy-lp .how { background: var(--lp-bg-tint); }
.soy-lp .how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 50px);
}
.soy-lp .how-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 32px 28px;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.soy-lp .how-card:hover {
  border-color: var(--lp-line-hover);
  box-shadow: var(--lp-shadow-hover);
  transform: translateY(-2px);
}
/* Layout exception: the big step numeral. */
.soy-lp .how-card .n {
  display: block;
  font-family: var(--lp-display);
  font-size: 3.52rem;
  color: var(--lp-blue);
  line-height: 1;
  margin-bottom: 14px;
}
.soy-lp .how-card h3 { margin-bottom: 8px; }
.soy-lp .how-body {
  max-width: 44em;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.84rem, 1.52rem + .9vw, 2.4rem);
  line-height: 1.55;
  color: var(--lp-body);
}

/* ----------------------------------------------------------- technology -- */
.soy-lp .tech { background: var(--lp-bg); }
.soy-lp .tech-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 48px;
  align-items: center;
}
/* the card variant used on the IPL/needling pages */
.soy-lp .tech-grid:has(> .tech-item) {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
  align-items: stretch;
}
.soy-lp .tech-item {
  background: var(--lp-card);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.soy-lp .tech-logo {
  height: 40px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  object-position: left center;
}
.soy-lp .tech-logo--lum { mix-blend-mode: multiply; }
.soy-lp .tech-logo.tech-logo--cos { height: 64px; max-width: 300px; }
/* Layout exception: pill tags need to sit below body size to read as metadata. */
.soy-lp .tech-tag {
  display: inline-block;
  font-size: 1.056rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lp-blue);
  background: var(--lp-blue-wash);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  padding: 4px 11px;
  margin: 2px 4px 2px 0;
}
.soy-lp .tech-link {
  font-size: 1.36rem;
  color: var(--lp-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  margin-top: 6px;
}
.soy-lp .tech-lead { line-height: 1.7; }
.soy-lp .tech-lead strong { color: var(--lp-ink); }
.soy-lp .device-shot,
.soy-lp .tech-single {
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  box-shadow: var(--lp-shadow-lift);
  line-height: 0;
  background: var(--lp-stage);
}
.soy-lp .device-shot img,
.soy-lp .device-shot video,
.soy-lp .tech-single img { width: 100%; height: auto; display: block; }

/* mode comparison card */
.soy-lp .mode-card {
  margin-top: 24px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow);
  padding: 20px 22px;
}
.soy-lp .mode-card img { width: 100%; height: auto; display: block; margin: 4px 0 16px; }
.soy-lp .mode-legend { display: grid; gap: 9px; line-height: 1.5; }
.soy-lp .mode-legend strong { color: var(--lp-blue); }
.soy-lp .modes { background: var(--lp-bg-mist); }
.soy-lp .mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.soy-lp .mode-img {
  border-radius: var(--lp-radius);
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--lp-line);
  background: var(--lp-card);
}
.soy-lp .mode-img img { width: 100%; height: auto; display: block; }
.soy-lp .mode-body h3 { margin: 14px 0 6px; }
.soy-lp .mode-ey {
  font-size: 1.088rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lp-blue);
  font-weight: 500;
}
.soy-lp .mode-credit { font-size: 1.216rem; color: var(--lp-muted); margin-top: 14px; }

/* ---------------------------------------------------------------- offer -- */
.soy-lp .offer { background: var(--lp-bg-tint); text-align: center; }
.soy-lp .offer-marquee {
  overflow: hidden;
  width: 100%;
  background: var(--lp-ink);
  padding: 13px 0;
  margin: 0 0 clamp(30px, 4vw, 46px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.soy-lp .marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: soy-lp-marquee 30s linear infinite;
  will-change: transform;
}
/* Layout exception: marquee text is tracked out to read as a ribbon. */
.soy-lp .marquee-track span {
  font-family: var(--lp-display);
  font-size: 1.52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lp-white);
  padding: 0 .55em;
}
.soy-lp .marquee-track .dot { color: var(--lp-blue-soft); opacity: .7; }
@keyframes soy-lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .soy-lp .marquee-track { animation: none; } }

.soy-lp .offer-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-lift);
  padding: clamp(34px, 5vw, 52px) clamp(24px, 4vw, 44px);
}
.soy-lp .offer-card h2 { margin: 10px 0 6px; }
/* Layout exception: the hero price on the offer card. */
.soy-lp .offer-price,
.soy-lp .offer-prices {
  font-family: var(--lp-display);
  font-size: clamp(4.16rem, 6vw, 6.08rem);
  color: var(--lp-ink);
  line-height: 1;
  margin: 18px 0 6px;
}
.soy-lp .offer-price { color: var(--lp-blue); }
.soy-lp .offer-price small { font-size: .32em; vertical-align: top; margin-right: 2px; }
.soy-lp .offer-price .was,
.soy-lp .offer-prices .was {
  color: var(--lp-muted);
  text-decoration: line-through;
  font-size: .58em;
  margin-right: .35em;
  vertical-align: middle;
}
.soy-lp .offer-sub { color: var(--lp-muted); letter-spacing: .04em; }
.soy-lp .offer-note { color: var(--lp-ink); margin-top: 10px; }
.soy-lp .offer-note strong { font-weight: 500; }
.soy-lp .offer-save { display: block; color: var(--lp-blue); font-weight: 600; letter-spacing: .05em; margin: 2px 0; }
/* Layout exception: uppercase tracked deadline chip. */
.soy-lp .offer-deadline {
  display: inline-block;
  margin: 22px 0 26px;
  font-size: 1.248rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--lp-ink);
  background: var(--lp-blue-soft);
  padding: 8px 18px;
  border-radius: 2px;
}
.soy-lp .offer-fine {
  font-size: 1.248rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin: 16px 0 24px;
  font-weight: 500;
}
.soy-lp .offer-card .cta-reassure { margin-top: 16px; }
.soy-lp .promo-code {
  font-family: var(--lp-display);
  letter-spacing: .12em;
  color: var(--lp-blue);
}

/* pricing tiers (tribella) */
.soy-lp .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.soy-lp .tier {
  background-image: var(--lp-texture);
  background-size: cover;
  border: 1px solid transparent;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 32px 28px;
  text-align: center;
  color: var(--lp-ink);
}
.soy-lp .tier h3 { margin-bottom: 8px; }
.soy-lp .tier .tier-tag {
  display: inline-block;
  font-size: 1.056rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lp-blue);
  margin-bottom: 10px;
  font-weight: 500;
}
.soy-lp .tier-price { font-family: var(--lp-display); font-size: clamp(3.2rem, 4vw, 4.16rem); line-height: 1; color: var(--lp-ink); }
.soy-lp .tier-price-note { font-size: 1.28rem; color: var(--lp-muted); margin-top: 6px; }
.soy-lp .tier-techs { font-size: 1.312rem; color: var(--lp-muted); margin-top: 12px; }

/* price rows */
.soy-lp .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--lp-line);
}
.soy-lp .price-row:last-child { border-bottom: 0; }
.soy-lp .pr-name { color: var(--lp-ink); font-weight: 500; text-align: left; }
.soy-lp .pr-min { font-size: 1.248rem; color: var(--lp-muted); letter-spacing: .1em; text-transform: uppercase; }
.soy-lp .pr-amt { font-family: var(--lp-display); font-size: 2.4rem; color: var(--lp-blue); line-height: 1; }
.soy-lp .pr-was { color: var(--lp-muted); text-decoration: line-through; margin-right: .3em; font-size: .8em; }

/* ---------------------------------------------------------- ticker band -- */
.soy-lp .ticker {
  background: var(--lp-stage);
  border-top: 1px solid var(--lp-graphite);
  border-bottom: 1px solid var(--lp-graphite);
  overflow: hidden;
  padding: 16px 0;
  white-space: nowrap;
}
.soy-lp .ticker-track { display: inline-block; animation: soy-lp-marquee 30s linear infinite; }
.soy-lp .ticker span {
  font-family: var(--lp-display);
  font-size: 1.68rem;
  color: var(--lp-white);
  letter-spacing: .08em;
  margin: 0 .2em;
}
.soy-lp .ticker .t-dot { color: var(--lp-blue-soft); }

/* -------------------------------------------------------------- results -- */
.soy-lp .results { background: var(--lp-bg); }
.soy-lp .res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.soy-lp .res-card {
  display: flex;
  flex-direction: column;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
  transition: box-shadow .3s, border-color .3s;
}
.soy-lp .res-card:hover { border-color: var(--lp-line-hover); box-shadow: var(--lp-shadow-hover); }
.soy-lp .res-card .imgwrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 0;
}
.soy-lp .res-card img { width: 100%; height: auto; display: block; }
.soy-lp .res-card img.ba-fit { max-height: 300px; object-fit: contain; background: var(--lp-white); padding: 10px; }
.soy-lp .res-card .tags { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 10px 12px; }
/* Layout exception: before/after chips. */
.soy-lp .tag {
  font-size: 0.96rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(20, 20, 21, .78);
  color: var(--lp-white);
  padding: 5px 11px;
  border-radius: 2px;
}
.soy-lp .tag.after { background: var(--lp-blue); }
.soy-lp .res-card .cap {
  padding: 15px 20px;
  font-size: 1.312rem;
  letter-spacing: .14em;
  color: var(--lp-muted);
  text-transform: uppercase;
}
.soy-lp .res-note {
  text-align: center;
  font-size: 1.312rem;
  color: var(--lp-muted);
  margin: 30px auto 0;
  max-width: 46em;
}

/* stacked before/after */
.soy-lp .ba-stack { display: flex; flex-direction: column; gap: 30px; align-items: center; }
.soy-lp .ba-item { width: 100%; max-width: 640px; }
.soy-lp .ba-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.soy-lp .ba-img {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow);
  line-height: 0;
}
.soy-lp .ba-img img { width: 100%; height: auto; display: block; }
.soy-lp .ba-cap {
  text-align: center;
  margin-top: 11px;
  font-size: 1.312rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

/* steps (venusglow) */
.soy-lp .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.soy-lp .step-img {
  border-radius: var(--lp-radius);
  overflow: hidden;
  border: 1px solid var(--lp-line);
  line-height: 0;
  margin-bottom: 14px;
}
.soy-lp .step-img img { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------- demo -- */
.soy-lp .demo { background: var(--lp-bg-mist); text-align: center; }
.soy-lp .demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: 0 auto; }
.soy-lp .demo-frame,
.soy-lp .vframe {
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow-lift);
  background: #000;
  line-height: 0;
}
.soy-lp .vframe { max-width: 780px; border-color: transparent; }
.soy-lp .demo-grid .demo-frame { max-width: none; margin: 0; }
.soy-lp .demo-frame video,
.soy-lp .vframe video { width: 100%; height: auto; display: block; background: #000; }
.soy-lp .demo-cap {
  font-size: 1.28rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-body);
  margin-top: 12px;
}
.soy-lp a.yt-facade { text-decoration: none; }
.soy-lp .yt-facade { position: relative; display: block; width: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: #000; line-height: 0; }
.soy-lp .yt-facade img { width: 100%; height: auto; display: block; opacity: .88; }
.soy-lp .yt-facade .yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.soy-lp .yt-facade .yt-play::before { content: ""; width: 66px; height: 66px; border-radius: 50%; background: rgba(20, 20, 21, .62); }
.soy-lp .yt-facade .yt-play::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

/* ----------------------------------------------------------------- team -- */
.soy-lp .team { background: var(--lp-bg-tint); }
.soy-lp .team .sec-head { text-align: center; }
.soy-lp .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.soy-lp .team-card { margin: 0; text-align: center; }
.soy-lp .team-img,
.soy-lp .team-photo,
.soy-lp .team-card .tc-photo {
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow);
  line-height: 0;
}
.soy-lp .team-img img,
.soy-lp .team-photo img,
.soy-lp .team-card .tc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.soy-lp .team-card figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.soy-lp .team-card figcaption strong,
.soy-lp .team-card .tc-name,
.soy-lp .team-card h3 {
  display: block;
  font-family: var(--lp-display);
  font-weight: 400;
  color: var(--lp-ink);
  font-size: 2rem;
  line-height: 1.1;
  margin: 0;
}
/* Layout exception: role label under a name. */
.soy-lp .team-card figcaption span,
.soy-lp .team-card .tc-role,
.soy-lp .team-card > span {
  display: block;
  font-size: 1.088rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lp-muted);
  font-weight: 500;
}

/* -------------------------------------------------------------- reviews -- */
.soy-lp .reviews { background: var(--lp-bg); }
.soy-lp .rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  background-image: var(--lp-texture);
  background-size: cover;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow);
  padding: 30px 42px;
  max-width: 620px;
  margin: 0 auto clamp(32px, 5vw, 46px);
}
/* Layout exception: the 4.9 hero numeral. */
.soy-lp .rs-score { font-family: var(--lp-display); font-size: clamp(4.8rem, 7vw, 6.72rem); color: var(--lp-ink); line-height: 1; }
.soy-lp .rs-meta { text-align: left; }
.soy-lp .rs-stars { color: var(--lp-blue); font-size: 2.4rem; letter-spacing: .12em; line-height: 1; }
.soy-lp .rs-count { color: var(--lp-body); margin-top: 6px; }
.soy-lp .rs-count strong { font-weight: 500; color: var(--lp-ink); }
.soy-lp .rs-google {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 1.184rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-muted);
  font-weight: 500;
}
.soy-lp .rs-google .g {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  align-items: center;
  justify-content: center;
  font-family: var(--lp-display);
  font-size: 1.28rem;
  color: var(--lp-blue);
}
.soy-lp .review-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.soy-lp .review-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 300px;
  max-width: 340px;
  transition: box-shadow .3s, border-color .3s;
}
.soy-lp .review-card:hover { border-color: var(--lp-line-hover); box-shadow: var(--lp-shadow-hover); }
.soy-lp .rc-stars { color: var(--lp-blue); letter-spacing: .1em; }
.soy-lp .rc-text { color: var(--lp-body); flex: 1; }
.soy-lp .rc-author { display: flex; align-items: center; gap: 12px; }
.soy-lp .rc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lp-blue-soft);
  color: var(--lp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lp-display);
  flex-shrink: 0;
}
.soy-lp .rc-author strong { display: block; font-weight: 500; color: var(--lp-ink); }
.soy-lp .rc-author span { font-size: 1.312rem; color: var(--lp-muted); }
.soy-lp .reviews-note { text-align: center; font-size: 1.28rem; color: var(--lp-muted); margin-top: 26px; font-style: italic; }

/* -------------------------------------------------------------- studies -- */
.soy-lp .studies { background: var(--lp-bg-mist); }
.soy-lp .studies-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; gap: 18px; }
.soy-lp .study-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 22px;
  text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.soy-lp .study-card:hover { border-color: var(--lp-line-hover); transform: translateY(-2px); box-shadow: var(--lp-shadow-hover); }
.soy-lp .study-card .st-tag { font-size: 1.056rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-blue); }
.soy-lp .study-card h4 { font-family: var(--lp-display); font-size: 1.68rem; line-height: 1.35; color: var(--lp-ink); font-weight: 400; margin: 0; }
.soy-lp .study-card .st-src { font-size: 1.248rem; color: var(--lp-muted); }
.soy-lp .study-card .st-link { font-size: 1.312rem; color: var(--lp-blue); margin-top: 6px; border-bottom: 1px solid currentColor; width: max-content; }

/* ------------------------------------------------------------------ faq -- */
.soy-lp .faq { background: var(--lp-bg-tint); }
.soy-lp .faq-list { max-width: 780px; margin: 0 auto; }
.soy-lp .faq-item { border-bottom: 1px solid var(--lp-line-hover); }
.soy-lp .faq-item:first-child { border-top: 1px solid var(--lp-line-hover); }
.soy-lp .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 6px;
  color: var(--lp-ink);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.soy-lp .faq-item summary::-webkit-details-marker { display: none; }
.soy-lp .faq-item summary:hover { color: var(--lp-blue); }
.soy-lp .faq-item summary .plus { color: var(--lp-blue); font-size: 2.4rem; line-height: 1; transition: transform .3s; flex-shrink: 0; }
.soy-lp .faq-item[open] summary .plus { transform: rotate(45deg); }
.soy-lp .faq-item .faq-a { padding: 0 6px 24px; color: var(--lp-body); }
.soy-lp .faq-item .faq-a a { color: var(--lp-blue); }

/* ---------------------------------------------------------------- final -- */
.soy-lp .final { background: var(--lp-bg-mist); text-align: center; }
.soy-lp .final h2 { margin: 16px auto 18px; max-width: 16em; }
.soy-lp .final p { color: var(--lp-body); max-width: 34em; margin: 0 auto 30px; }

/* ------------------------------------------------- image placeholder box -- */
.soy-lp .img-ph,
.soy-lp .vid-placeholder,
.soy-lp .tech-logo-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: var(--lp-bg-tint);
  color: var(--lp-muted);
  font-size: 1.184rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px dashed var(--lp-line-hover);
  border-radius: var(--lp-radius);
  min-height: 240px;
  width: 100%;
  padding: 20px;
}
.soy-lp .tech-logo-ph { min-height: 0; height: 40px; width: max-content; padding: 0 14px; }
.soy-lp .img-ph .ph-ic { font-size: 2.4rem; opacity: .5; }

/* ------------------------------------------------- sticky mobile CTA bar -- */
/* Moved to <body> by the shared script, so it is styled outside .soy-lp. */
.soy-lp-sticky { display: none; }

@media (max-width: 760px) {
  .soy-lp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--fl-global-charcoal, #141415);
    padding: 11px 14px;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .22);
  }
  .soy-lp-sticky a { text-decoration: none; display: flex; align-items: center; }
  .soy-lp-sticky .sc-call {
    color: #fff;
    font-size: 1.44rem;
    font-weight: 500;
    gap: .4em;
    border: 1px solid var(--fl-global-steel, #6B6E73);
    border-radius: 3px;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .soy-lp-sticky .sc-call svg { width: 16px; height: 16px; fill: var(--fl-global-light-blue, #bfd7ef); flex-shrink: 0; }
  .soy-lp-sticky .sc-text {
    font-size: 1.248rem;
    line-height: 1.25;
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    overflow: hidden;
  }
  .soy-lp-sticky .sc-text strong { color: var(--fl-global-light-blue, #bfd7ef); font-size: 1.6rem; margin-right: .25em; }
  .soy-lp-sticky .sc-btn {
    background: var(--fl-global-dark-blue, rgb(101, 148, 195));
    color: #fff;
    padding: 10px 16px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 1.44rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* keep the last section clear of the fixed bar */
  .soy-lp > section:last-child,
  .soy-lp .final,
  .soy-lp .faq:last-child,
  .soy-lp .studies:last-child { padding-bottom: 140px; }
}

/* ---------------------------------------------------------- breakpoints -- */
@media (max-width: 900px) {
  .soy-lp .team-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 560px; }
}

@media (max-width: 860px) {
  .soy-lp .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .soy-lp .hero p.lead { margin-left: auto; margin-right: auto; }
  .soy-lp .hero-price,
  .soy-lp .hero-cta-row { margin-left: auto; margin-right: auto; }
  .soy-lp .hero-cta-row { justify-content: center; }
  .soy-lp .hero-device { margin-top: 32px; order: 2; }
  .soy-lp .hero-badge { left: 6%; }
  .soy-lp .tech-grid { grid-template-columns: 1fr; gap: 28px; }
  .soy-lp .device-shot { max-width: 380px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .soy-lp { --lp-gutter: 20px; }
  .soy-lp .hero-photo,
  .soy-lp .clinic-photo { aspect-ratio: 4 / 3; }
  .soy-lp .how-grid,
  .soy-lp .why-grid,
  .soy-lp .mode-grid,
  .soy-lp .demo-grid,
  .soy-lp .studies-grid,
  .soy-lp .treat-grid { grid-template-columns: 1fr; }
  .soy-lp .rating-summary { padding: 26px 22px; gap: 20px; }
  .soy-lp .rs-meta { text-align: center; }
}

@media (max-width: 680px) {
  .soy-lp .res-grid { grid-template-columns: 1fr; }
  .soy-lp .sym-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .soy-lp .offer-card { padding: 34px 22px; }
  .soy-lp .team-card figcaption strong,
  .soy-lp .team-card .tc-name,
  .soy-lp .team-card h3 { font-size: 1.68rem; }
}

@media (max-width: 480px) {
  .soy-lp .btn { width: 100%; justify-content: center; }
  .soy-lp .hero-cta-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 420px) {
  .soy-lp .hero-price { flex-direction: column; gap: 8px; }
  .soy-lp .hero-price .hp-text { text-align: center; }
  .soy-lp .ba-split { grid-template-columns: 1fr; }
}
