/* =====================================================================
   Kept Lab - functionality + presentation layer for the static mirror.
   The original Next.js (RSC) JS can't hydrate when served statically,
   so this file (with kept-lab.js) re-implements every interaction and
   neutralises the JS-only initial states. Uses [class*="..."] selectors
   so it survives the hashed CSS-module class names.
   ===================================================================== */

/* --- Neutralise JS-only hidden states ------------------------------- */
/* LazyImage skeleton overlays (their onLoad never fires) */
[class*="skeleton" i]{opacity:0!important;visibility:hidden!important}
/* LazyVideo / LazyImage default to opacity:0 until JS marks them visible */
[class*="LazyVideo"],[class*="LazyImage"]{opacity:1!important}

/* --- Placeholder media --------------------------------------------- */
img:not(.kl-logo-img){background:#deb1a1}
video{background:#deb1a1;object-fit:cover}

/* --- Wordmark replacing the logo glyph ----------------------------- */
.kl-wordmark{
  font-family:var(--font-pp-neue),"PP Neue Montreal",-apple-system,sans-serif;
  font-weight:600;font-size:1.25rem;letter-spacing:-.02em;line-height:1;
  color:currentColor;white-space:nowrap;display:inline-flex;align-items:center;
}
/* footer wordmark sits on dark bg - keep it readable */
[class*="Footer"] .kl-wordmark{font-size:1.6rem}

/* --- Scroll-reveal (data-animation 1/2/3 = stagger order) ---------- */
[data-animation]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
[data-animation="2"]{transition-delay:.08s}
[data-animation="3"]{transition-delay:.16s}
[data-animation].kl-in{opacity:1;transform:none}
/* never let the reveal layer permanently hide content if JS is slow */
.kl-nojs [data-animation]{opacity:1;transform:none}

/* --- Collapsible / accordion (FAQ, AestheticTests, …) -------------- */
[class*="collapsible_content_container"]{
  height:0;overflow:hidden;
  transition:height .35s cubic-bezier(.22,1,.36,1);
}
/* icon: header_icon holds two svgs (plus, then minus). Show plus closed. */
[class*="header_icon"] svg:nth-of-type(2){display:none}
.kl-open > [class*="collapsible_header"] [class*="header_icon"] svg:nth-of-type(1){display:none}
.kl-open > [class*="collapsible_header"] [class*="header_icon"] svg:nth-of-type(2){display:inline-block}

/* FAQ open card: clean white (no fill) - question stays dark, answer reads muted */
.kl-open[class*="FAQContent"] [class*="collapsible_header"] h4{color:#7f4233!important}
[class*="FAQContent"][class*="__text"] p{color:#8a6f64}
/* category filtering: only the active category's questions show */
[class*="Poj_lW__collapsible"][data-cat][hidden]{display:none!important}

/* --- Before / After comparison slider ------------------------------ */
[class*="BeforeAfter"][class*="__content"],
[class*="BeforeAfter"][class*="__element"]{--percentage-x:50}
[class*="BeforeAfter"][class*="__content"]{cursor:ew-resize;touch-action:none;user-select:none}
[class*="BeforeAfter"][class*="__divider"]{
  left:calc(var(--percentage-x,50)*1%)!important;
  transform:translateX(-50%)!important;
  padding-left:1.6rem!important;padding-right:1.6rem!important;
  cursor:ew-resize;z-index:3;
}

/* --- Marquee (News coverage) - JS clones the track, CSS animates --- */
@keyframes kl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kl-marquee-anim{animation:kl-marquee 32s linear infinite;width:max-content!important}
[class*="news_coverage_marquee"]:hover .kl-marquee-anim{animation-play-state:paused}

/* --- Mobile nav overlay (built by JS) ------------------------------ */
.kl-mobile-overlay{
  position:fixed;inset:0;z-index:90;display:none;flex-direction:column;
  gap:.5rem;padding:6rem 2rem 2rem;background:#fffffff2;backdrop-filter:blur(14px);
  animation:kl-fade .22s ease both;
}
.kl-mobile-overlay.kl-show{display:flex}
.kl-mobile-overlay a{font-family:var(--font-pp-neue),sans-serif;font-size:1.4rem;
  color:#7f4233;text-decoration:none;padding:1rem .25rem;border-bottom:1px solid #f8ece7}
@keyframes kl-fade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* dismissed announcement bar */
.kl-hidden{display:none!important}

/* ===================================================================
   KEPT personalised-plan report card (rebuilt from the source layout,
   body-composition + on-brand). Lives in YourPersonalized panel_right.
   =================================================================== */
[class*="YourPersonalized"][class*="__panel_right"]{overflow:visible;min-height:765px}
[class*="YourPersonalized"][class*="__element"]{min-height:0}
.klr{position:absolute;top:50%;left:1%;width:880px;background:#fff;border-radius:16px;
     box-shadow:0 50px 120px rgba(60,28,20,.26);overflow:hidden;color:#4a3a33;z-index:2;transform:translateY(-50%) scale(.85);transform-origin:center center}
.klr-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #efe7e2}
.klr-bar-title{font-size:18px;color:#3a2a24}
.klr-bar-mid{display:flex;align-items:center;gap:12px;font-size:12px;color:#8a7a72}
.klr-z{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border:1px solid #e8ded8;border-radius:6px}
.klr-sep{width:1px;height:16px;background:#e8ded8}
.klr-pdf{background:#B36856;color:#F8ECE7;font-size:12px;font-weight:600;padding:8px 14px;border-radius:9px}
.klr-body{display:flex;align-items:stretch}
.klr-pages{flex:none;width:60px;background:#faf6f3;border-right:1px solid #efe7e2;padding:12px 9px;display:flex;flex-direction:column;gap:8px}
.klr-thumb{height:74px;border:1px solid #e8ded8;border-radius:3px;background:#fff;padding:5px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.klr-thumb .th-h{height:5px;width:66%;background:#d9cfc8;border-radius:1px;flex:none}
.klr-thumb .th-l{flex:1;background:repeating-linear-gradient(#eee3dc 0 1.5px,transparent 1.5px 5px)}
.klr-thumb .th-l-sm{flex:none;height:12px}
.klr-thumb .th-img{height:18px;background:#e6dbd4;border-radius:2px;flex:none}
.klr-thumb .th-duo{display:flex;gap:3px;height:22px;flex:none}
.klr-thumb .th-duo i{flex:1;background:#e6dbd4;border-radius:2px;display:block}
.klr-thumb-on{border-color:#B36856;box-shadow:0 0 0 1px #B36856}
.klr-main{flex:1;min-width:0;padding:18px 20px}
.klr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.klr-mark{display:flex;gap:2px}
.klr-mark i{width:5px;height:13px;border-radius:1px;background:#B36856;display:block}
.klr-mark i:nth-child(2){background:#DEB1A1}
.klr-page{font-size:10px;letter-spacing:1px;color:#a89a92}
.klr-title{font-size:24px;font-weight:500;letter-spacing:-.5px;color:#2c1f1a;margin:0 0 10px}
.klr-title span{color:#c2a99d}
.klr-ba{display:flex;gap:12px;margin-bottom:14px}
.klr-ba-card{position:relative;flex:1;height:234px;border-radius:8px;overflow:hidden;background:#DEB1A1}
.klr-ba-card img{width:100%;height:100%;object-fit:cover;display:block}
.klr-ba-lab{position:absolute;top:8px;left:8px;background:rgba(44,31,26,.7);color:#fff;font-size:9px;letter-spacing:.5px;padding:3px 7px;border-radius:4px}
.klr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:12px}
.klr-h4{font-size:15px;color:#2c1f1a;margin:0 0 6px}
.klr-p{font-size:12px;color:#7a6a62;line-height:1.4;margin:0 0 10px}
.klr-p b{color:#B36856}
.klr-markers{list-style:none;margin:0;padding:0}
.klr-markers li{font-size:11.5px;color:#5a4a42;margin-bottom:5px;display:flex;align-items:center;gap:7px}
.klr-dot{width:4px;height:4px;border-radius:50%;background:#B36856;flex:none}
.klr-radar-wrap{display:flex;flex-direction:column;align-items:center}
.klr-radar{width:100%;max-width:250px}
.klr-legend{display:flex;gap:14px;font-size:9px;color:#9a8a82;margin-top:2px}
.klr-legend span{display:flex;align-items:center;gap:5px}
.klr-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.klr-li-proj{background:rgba(179,104,86,.5);border:1px solid #B36856}
.klr-li-cur{background:rgba(127,66,51,.3);border:1px solid #7F4233}
.klr-proj{font-size:14px;color:#3a2a24;margin:4px 0 12px}
.klr-proj span{color:#B36856;font-weight:600}
.klr-stats{display:flex;gap:12px;margin-bottom:12px}
.klr-stat{flex:1;border:1px solid #efe7e2;border-radius:10px;padding:12px 14px}
.klr-stat-dark{background:#2c1f1a;border-color:#2c1f1a}
.klr-stat-k{display:block;font-size:10px;color:#a89a92;margin-bottom:4px}
.klr-stat-dark .klr-stat-k{color:#c2a99d}
.klr-stat-v{font-size:26px;color:#2c1f1a;font-weight:500}
.klr-stat-dark .klr-stat-v{color:#fff}
.klr-foot{font-size:11px;color:#8a7a72;line-height:1.45;margin:0}
.klr-profile{flex:none;width:228px;border-left:1px solid #efe7e2;padding:18px 16px;background:#fdfbfa}
.klr-prof-title{font-size:17px;color:#2c1f1a;margin:0 0 14px}
.klr-prof-id{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.klr-ava{width:40px;height:40px;border-radius:50%;background:#DEB1A1 center/cover;flex:none;background-image:url(plan-after.jpg)}
.klr-name{font-size:14px;color:#2c1f1a;font-weight:500}
.klr-pid{font-size:11px;color:#a89a92}
.klr-prow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #f2ebe7}
.klr-pk{color:#a89a92;text-transform:uppercase;letter-spacing:.3px;font-size:10px}
.klr-pv{color:#4a3a33;text-align:right;font-size:11.5px}
.klr-ov{margin-top:16px}
.klr-ov-p{font-size:11.5px;color:#7a6a62;line-height:1.5;margin:0}

/* Mobile: shrink the protocol PDF ~15% more so more of it is visible, and pull
   it ~100px left so there's less empty space on its left and more of the report
   shows (tune the -100px if it needs more/less). */
@media (max-width:1099px){
  .klr{transform:translate(-100px,-50%) scale(.72)}
}

/* ===== Study tabs (AppearanceMatters) - working filter + active pill ===== */
[class*="AppearanceMatters"][class*="__tab_active"]{display:none!important}   /* hide stray sliding indicator */
button[class*="AppearanceMatters"][class*="__tab"]{cursor:pointer;background:transparent;border:none;transition:background .2s ease,color .2s ease}
button[class*="AppearanceMatters"][class*="__tab"]:hover{background:#b3685622}
button[class*="AppearanceMatters"][class*="__tab--active"]{background:#B36856!important;color:#fff!important}

/* Studies grid: left-align cards (so 3-card tabs sit left, not centered) */
[class*="AppearanceMatters"][class*="__grid_content"]{justify-content:flex-start!important}

/* Concept graphics that fill the analysis / learn boxes */
.kl-fig{width:100%;height:100%;display:block;object-fit:cover}

/* Before/after sliders: kill the inline-image baseline gap (terracotta strip at top),
   and make only the handle grabbable (so the page scrolls on mobile) */
[class*="BeforeAfter"] img{top:0!important}   /* only kill the 3.9px top offset that exposed the terracotta strip; leave left/width/position to the slider */
/* The original CSS set touch-action:none on the whole .content, which blocked
   vertical page scroll anywhere over the image. Allow vertical scroll (pan-y) on
   the image area; only the handle keeps touch-action:none so it can still drag. */
[class*="BeforeAfter"][class*="__content"]{touch-action:pan-y!important}
[class*="BeforeAfter"][class*="__content"] [class*="picture"],
[class*="BeforeAfter"][class*="__content"] img{touch-action:pan-y!important}
[class*="BeforeAfter"][class*="__divider"]{touch-action:none!important;cursor:ew-resize}
[class*="BeforeAfter"][class*="__divider"] svg{touch-action:none!important;cursor:ew-resize}

/* ===== YourBiometrics (restored) - re-wired scroll-in animations ===== */
/* slide the "YOU" indicator into place when JS sets --indicator-left */
[style*="--indicator-left"]{transition:left 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1)}
/* reveal cards + featured + chart once (JS arms with .kb-armed, fires with .kb-in) */
[class*="YourBiometrics"][class*="__element"].kb-armed [class*="ScoreChart"][class*="chart_card"],
[class*="YourBiometrics"][class*="__element"].kb-armed [class*="membership_card"],
[class*="YourBiometrics"][class*="__element"].kb-armed [class*="prediction_chart"]{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
[class*="YourBiometrics"][class*="__element"].kb-armed.kb-in [class*="ScoreChart"][class*="chart_card"],
[class*="YourBiometrics"][class*="__element"].kb-armed.kb-in [class*="membership_card"],
[class*="YourBiometrics"][class*="__element"].kb-armed.kb-in [class*="prediction_chart"]{
  opacity:1;transform:none;
}
.kb-armed.kb-in [class*="membership_card"]{transition-delay:.1s}
.kb-armed.kb-in [class*="prediction_chart"]{transition-delay:.2s}

/* FacialAnalysis central cutout: transparent so the terracotta section shows through */
[class*="FacialAnalysis"] [class*="image_container"] img,[class*="FacialAnalysis"] [class*="hero"] img{background:transparent!important}
/* ===== Body-composition analysis showcase (.kba-section) - band of cards behind a centered model ===== */
.kba-section{position:relative;overflow:hidden;padding:3.6rem 1.25rem 0;color:var(--kl-cream);background:#b36856}
.kba-section::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,76%);height:84%;z-index:0;pointer-events:none;
  background:radial-gradient(54% 62% at 50% 56%, rgba(222,177,161,.5) 0%, rgba(222,177,161,.1) 46%, rgba(179,104,86,0) 66%)}
.kba-section::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(74,38,28,.40) 0%, rgba(74,38,28,0) 22%, rgba(74,38,28,0) 72%, rgba(74,38,28,.46) 100%)}
.kba-head{text-align:center;max-width:44rem;margin:0 auto;position:relative;z-index:3}
.kba-eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,236,231,.85);border:1px solid rgba(248,236,231,.4);border-radius:999px;padding:.42rem .95rem}
.kba-title{font-family:ppNeueMontreal,"ppNeueMontreal Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(2rem,4.2vw,3rem);font-weight:400;line-height:1.04;letter-spacing:-.02em;margin:.6rem 0 0;color:#fff}
.kba-title span{color:#DEB1A1}
.kba-sub{margin:.8rem auto 0;font-size:.98rem;line-height:1.5;color:rgba(248,236,231,.82);max-width:33rem}
.kba-stage{position:relative;z-index:2;width:100%;max-width:1480px;margin:.7rem auto 0;height:550px}
.kba-model{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:600px;width:auto;max-width:none;object-fit:contain;object-position:bottom center;z-index:5;background:transparent!important}
/* glassy cards */
.kc{position:absolute;z-index:3;background:rgba(24,12,7,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(248,236,231,.13);border-radius:14px;padding:.9rem 1rem;color:var(--kl-cream)}
.kc-cap-t{display:block;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,236,231,.6);margin-bottom:.5rem}
.kc-foot{font-size:.62rem;color:rgba(248,236,231,.58);margin-top:.5rem;line-height:1.3}
/* tall side cards */
.kc-grid{right:calc(50% + 424px);top:8%;width:236px;height:78%;display:flex;flex-direction:column}
.kc-scale{left:calc(50% + 170px);top:8%;width:236px;height:78%;display:flex;flex-direction:column}
/* stacked columns */
.kc-col{position:absolute;display:flex;flex-direction:column;gap:13px;width:236px}
.kc-col-l{right:calc(50% + 170px);top:6%}
.kc-col-r{left:calc(50% + 424px);top:6%}
.kc-col .kc{position:static;width:100%}
/* dot grid */
.kc-grid-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:18px 28px}
.kc-dots{display:grid;grid-template-columns:repeat(9,1fr);gap:13px 12px}
.kc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(248,236,231,.16);display:block}
.kc-dots i.on{background:rgba(248,236,231,.72)}
.kc-ax{position:absolute;font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(248,236,231,.5)}
.kc-ax-t{top:0;left:50%;transform:translateX(-50%)}.kc-ax-b{bottom:0;left:50%;transform:translateX(-50%)}
.kc-ax-l{left:0;top:50%;transform:translateY(-50%)}.kc-ax-r{right:0;top:50%;transform:translateY(-50%)}
/* curve */
.kc-curvesvg{width:100%;height:auto;display:block;overflow:visible}
.kc-curveline{fill:none;stroke:rgba(248,236,231,.65);stroke-width:2}
.kc-curveball{fill:#7F4233;stroke:#F8ECE7;stroke-width:1.5}
.kc-curve-x{display:flex;justify-content:space-between;font-size:.52rem;color:rgba(248,236,231,.5);margin-top:3px}
/* score */
.kc-big{font-size:1.9rem;font-weight:500;line-height:1}
.kc-big i{font-style:normal;font-size:.85rem;color:rgba(248,236,231,.7);margin-left:.06rem}
.kc-bar{position:relative;height:5px;border-radius:3px;background:rgba(248,236,231,.2);margin:.6rem 0 .3rem}
.kc-bar-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;background:rgba(248,236,231,.88);transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.kc-bar-x{display:flex;justify-content:space-between;font-size:.54rem;color:rgba(248,236,231,.52)}
/* vertical scale */
.kc-scale-body{flex:1;display:flex;gap:16px;align-items:stretch;padding:4px 0}
.kc-vscale{position:relative;width:9px;border-radius:5px;background:linear-gradient(#f8ece7,#deb1a1,#b36856,#7f4233)}
.kc-vline{position:absolute;left:-6px;right:-6px;height:2px;border-radius:1px;background:#f8ece7;top:90%;box-shadow:0 0 7px rgba(248,236,231,.5)}
@keyframes kc-vline{0%{top:90%}44%{top:5%}74%{top:74%}100%{top:54%}}
.kba-in .kc-vline{animation:kc-vline 2.1s cubic-bezier(.4,0,.2,1) forwards}
.kc-vmarks{position:relative;flex:1}
.kc-vmark{position:absolute;left:0;white-space:nowrap;font-size:.56rem;color:rgba(248,236,231,.72);transform:translateY(-50%)}
.kc-vmark::before{content:"";position:absolute;left:-13px;top:50%;width:9px;height:1px;background:rgba(248,236,231,.5)}
/* thirds */
.kc-thirds-row{display:flex;gap:8px}
.kc-third{flex:1;text-align:center}
.kc-third b{display:block;font-size:1.35rem;font-weight:500;line-height:1.1}
.kc-third span{font-size:.52rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(248,236,231,.55)}
/* sliders */
.kc-srow{position:relative;height:15px;display:flex;align-items:center;margin-bottom:6px}
.kc-strack{flex:1;height:1px;background:rgba(248,236,231,.3)}
.kc-sdot{position:absolute;left:6%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:#f8ece7;box-shadow:0 0 0 3px rgba(179,104,86,.45);transition:left 1.3s cubic-bezier(.22,1,.36,1)}
/* reveal */
.kc[data-anim]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .75s cubic-bezier(.22,1,.36,1)}
.kba-in .kc[data-anim]{opacity:1;transform:none}
.kba-in .kc-col-l .kc-score{transition-delay:.12s}.kba-in .kc-scale{transition-delay:.08s}
.kba-in .kc-col-r .kc-thirds{transition-delay:.1s}.kba-in .kc-col-r .kc-slider{transition-delay:.2s}
@media (max-width:820px){
  .kba-section{padding:3.2rem 1rem 0}
  .kba-stage{height:430px;margin-top:1rem}
  .kba-model{height:396px;max-width:none}
  /* same concept, 4 cards: keep both stacked columns, hide grid + scale */
  .kc-grid,.kc-scale{display:none}
  .kc-col{width:161px;gap:.55rem}
  .kc-col-l{right:calc(50% + 62px);left:auto;top:13%}
  .kc-col-r{left:calc(50% + 62px);right:auto;top:13%}
  .kc{padding:.65rem .78rem}
  .kc-cap-t{font-size:.48rem;margin-bottom:.3rem}
  .kc-big{font-size:1.3rem}
  .kc-third b{font-size:.95rem}
  .kc-curvesvg{height:auto}
  .kc-bar-x,.kc-third span,.kc-foot,.kc-curve-x{font-size:.44rem}
}

/* ===== Transformations carousel (original source section, revived in vanilla JS) =====
   The original was a GSAP/React scroll-pinned vertical coverflow; its CSS leaves the
   list at opacity:0 and items at opacity:.15 until JS adds --active/--prev/--next.
   initTransformation() (kept-lab.js) drives those classes + inline transforms. */
[class*="Transformation"][class*="__content_list"]{opacity:1!important}
@media (min-width:1100px){
  /* neutralise the negative margins so the pin maths is predictable */
  [class*="Transformation"][class*="__element"]{margin-top:0!important;margin-bottom:0!important}
  /* the original CSS already makes items position:absolute;left:50% - we only add
     vertical centering + the blur the original drove via GSAP (filter from --blur). */
  [class*="Transformation"][class*="__content_item"]{top:50%;filter:blur(var(--blur,0))}
  [class*="Transformation"][class*="__indicator_bar_active"]{transition:top .4s cubic-bezier(.22,1,.36,1)}
}
@media (max-width:1099px){
  /* mobile/tablet: the original flattens to a simple vertical stack - keep it sharp + visible */
  [class*="Transformation"][class*="__content_item"]{opacity:1!important;filter:none!important}
}

/* ===== Pricing card: real gradient + interactive 3D tilt + glare, and crisp payment icons ===== */
[class*="Pricing"][class*="__card"].kl-pcard{
  position:relative;overflow:hidden;
  /* gradient is set inline on the element so it survives a stale CSS cache; this is a fallback */
  background:
    radial-gradient(120% 120% at 80% 6%, rgba(248,236,231,.34) 0%, rgba(248,236,231,0) 44%),
    radial-gradient(130% 125% at 8% 108%, rgba(74,38,28,.52) 0%, rgba(74,38,28,0) 56%),
    linear-gradient(145deg, #c67d66 0%, #b36856 46%, #874a3a 100%);
  transform:perspective(900px) rotateX(0deg) rotateY(0deg);
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  will-change:transform;
}
[class*="Pricing"][class*="__card"].kl-pcard.kl-tilt-on{box-shadow:0 30px 64px -28px rgba(127,66,51,.55)}
/* glare as a pseudo-element - never a flex child, so the header stays top-left even if this rule is missing */
.kl-pcard::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.30), rgba(255,255,255,0) 42%);
  opacity:0;transition:opacity .3s ease;mix-blend-mode:screen;
}
.kl-pcard>*{position:relative;z-index:2}
.kl-pcard.kl-tilt-on::after{opacity:1}
@media (prefers-reduced-motion: reduce){
  .kl-pcard{transition:none!important;transform:none!important}
  .kl-pcard::after{display:none}
}
/* payment method icons (crisp inline SVG, muted to match brand) */
.kl-pay{gap:1.9rem!important;width:auto!important;height:auto!important;padding:0!important}
.kl-pay li{width:auto!important;height:1.15rem!important;display:flex;align-items:center}
.kl-pay li svg{height:100%;width:auto;display:block;opacity:.72}
.kl-pay li:nth-child(2) svg{height:155%}
@media (max-width:1099px){ .kl-pay{gap:1.45rem!important} }

/* Hidden for now (owner will revisit): "See detailed transformation" buttons in the No-drugs (SurgeryFree) section */
[class*="SurgeryFree"][class*="see_transformation"]{display:none!important}

/* Hero cutout video: transparent VP9-alpha webm (Chrome/FF/Edge/Android) or
   HEVC-alpha .mov (Safari/iOS), chosen in JS; sits on the hero gradient. */
/* Gradient paints instantly; the video starts invisible and fades in once it can
   actually play, so the hero is never blank and never flashes a half-loaded frame. */
.kl-hero-video{background:transparent!important;opacity:0;transition:opacity .5s ease}
.kl-hero-video.kl-hero-on{opacity:1}

/* "See your future" (Visualization) cards are text-only for now (the 4 point
   images were removed; images come later). The card pushes text to the bottom
   for an image-on-top layout, so center it instead so the cards don't look
   empty. Scoped to the visible section so the hidden backup stays original. */
section[class*="Visualization"][class*="__element"]:not([data-kl-backup]) article{justify-content:center!important}
section[class*="Visualization"][class*="__element"]:not([data-kl-backup]) [class*="__card_text"]{margin-top:0!important}
/* Mobile: the card is row-flex, so the desktop vertical-centering rule above
   centers the text block horizontally (indenting narrower cards). Force
   left-alignment on mobile. */
@media (max-width:1099px){
  section[class*="Visualization"][class*="__element"]:not([data-kl-backup]) article{justify-content:flex-start!important;align-items:flex-start!important}
  section[class*="Visualization"][class*="__element"]:not([data-kl-backup]) [class*="__card_text"]{text-align:left!important;align-items:flex-start!important}
}