/* ============================================================
   ips-x.jp  aurora.css  (rev: PC widen + warm aurora bg + motion)
   - load AFTER common.css and the index inline <style> (override layer)
   - keep existing mobile layout intact; add PC widening and bg effects
   - palette: warm aurora (wisteria - rose - red) harmonized with brand red
============================================================ */

:root {
  --aurora-1: #f8eef0;   /* pearl mist */
  --aurora-2: #f5e4e8;   /* light periwinkle */
  --aurora-3: #f0d6dd;   /* soft lavender-blue */
  --aurora-4: #e4b9c4;   /* wisteria-blue */
  --aurora-5: #f3dde2;   /* cool petal */
  --aurora-accent: #996b6f; /* cool slate-lavender accent */
}

/* ---------- aurora background layer ---------- */
:root {
  --aurora-accent: #996b6f;
}

/* ---------- mesh aurora background (M1 coral) ---------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #f8eef0;
}
/* three independently drifting mesh layers; no left/right split */
.aurora-bg::before,
.aurora-bg::after {
  content: "";
  position: absolute;
  inset: -25%;
  background-repeat: no-repeat;
  will-change: transform;
}
.aurora-bg::before {
  background:
    radial-gradient(44% 42% at 12% 18%, rgba(206,196,228,0.82), transparent 64%),
    radial-gradient(42% 40% at 86% 14%, rgba(240,214,220,0.82), transparent 64%),
    radial-gradient(48% 46% at 72% 78%, rgba(236,200,208,0.72), transparent 66%),
    radial-gradient(44% 44% at 18% 86%, rgba(214,205,234,0.76), transparent 66%);
  animation: meshDriftA 26s ease-in-out infinite alternate;
}
.aurora-bg::after {
  background:
    radial-gradient(40% 38% at 50% 46%, rgba(235,238,248,0.85), transparent 60%),
    radial-gradient(38% 36% at 90% 86%, rgba(234,196,204,0.40), transparent 60%),
    radial-gradient(40% 40% at 6% 58%, rgba(230,196,206,0.62), transparent 64%),
    radial-gradient(34% 34% at 62% 10%, rgba(240,212,218,0.58), transparent 60%);
  animation: meshDriftB 34s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}
@keyframes meshDriftA {
  0%   { transform: translate3d(0,0,0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(5%, -4%, 0) scale(1.14) rotate(6deg); }
  100% { transform: translate3d(-4%, 5%, 0) scale(1.08) rotate(-5deg); }
}
@keyframes meshDriftB {
  0%   { transform: translate3d(0,0,0) scale(1.08) rotate(0deg); }
  50%  { transform: translate3d(-6%, 4%, 0) scale(1.16) rotate(-7deg); }
  100% { transform: translate3d(5%, -5%, 0) scale(1.05) rotate(6deg); }
}

/* specular sweep: a soft light band crossing occasionally */
.aurora-sweep {
  position: fixed;
  inset: -45%;
  z-index: -2;
  pointer-events: none;
  background: conic-gradient(from 0deg at 42% 40%,
    rgba(245,248,255,0) 0deg,
    rgba(248,250,255,0.60) 60deg,
    rgba(244,214,222,0.35) 150deg,
    rgba(245,248,255,0) 240deg,
    rgba(250,250,255,0.45) 320deg,
    rgba(245,248,255,0) 360deg);
  mix-blend-mode: screen;
  animation: glossSpin 26s linear infinite;
  opacity: .85;
}
.aurora-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 180deg at 60% 60%,
    rgba(225,225,245,0) 0deg,
    rgba(240,210,218,0.40) 80deg,
    rgba(240,244,255,0.50) 180deg,
    rgba(225,225,245,0) 300deg,
    rgba(240,244,255,0.35) 360deg);
  mix-blend-mode: screen;
  animation: glossSpinR 34s linear infinite;
}
@keyframes glossSpin { to { transform: rotate(360deg); } }
@keyframes glossSpinR { to { transform: rotate(-360deg); } }

/* fine film grain to kill the flat digital look */
.aurora-grain {
  display: none;
}

/* particle canvas sits above bg, below content */
#aurora-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.85;
}
/* content sits above the water canvas */
header, main, footer, .ftr { position: relative; z-index: 1; }
/* header + sticky CTA must stay perfectly crisp, above the water film */
.hdr { position: sticky; z-index: 6 !important; }
.sticky-cta, #stickyCta { z-index: 6 !important; }

/* make existing surfaces let the aurora show through tastefully */
body { background: transparent !important; }
.fv, .ambassador { background: transparent !important; }
.sec-pale { background: rgba(250,238,240,0.55) !important; backdrop-filter: blur(3px); }
.sec { position: relative; }

/* ---------- PC widen: lift the 600px cage (layout kept as original stack) ---------- */
@media (min-width: 768px) {
  main { max-width: 720px !important; padding: 0 24px; }

  .sec { padding: 4.5rem 2rem; }
  .sec-title { font-size: 2rem; }
  .sec-eyebrow { font-size: .88rem; }

  /* FV stays as the original single-column stack; just center nicely */
  .fv { max-width: 640px; margin: 0 auto; padding-bottom: 3.5rem; }
  .fv-hero { border-radius: 18px; overflow: hidden; }

  /* generic content cards get a soft glass panel so they don't float on bg */
  .ambassador, .sec.final, .faq {
    border-radius: 20px;
  }

  /* cannes gallery: multi-column on PC */
  .cannes-gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cannes-influencers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

  /* lineup / comparison images centered with cap */
  .sec img { margin-left: auto; margin-right: auto; }
}

@media (min-width: 1024px) {
  main { max-width: 1260px !important; }
  .sec-title { font-size: 2.3rem; }
}

/* ---------- glass panels for content blocks (PC + SP) ---------- */
.glass-panel {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(150,30,45,0.10);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,.7,.3,1), transform .9s cubic-bezier(.16,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }

/* parallax hook (JS sets --py) */
.parallax { transform: translate3d(0, var(--py, 0), 0); }

/* ---------- subtle hover lift on cards/images (PC) ---------- */
@media (hover: hover) and (min-width: 768px) {
  .cannes-gallery img, .lineup-card, .ambassador img {
    transition: transform .5s cubic-bezier(.16,.7,.3,1), box-shadow .5s ease;
  }
  .cannes-gallery img:hover, .ambassador img:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 16px 40px rgba(150,30,45,0.16);
  }
}

/* ---------- reduced motion: disable all movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg::before, .aurora-bg::after, .aurora-sweep, .aurora-sweep::after { animation: none !important; }
  #aurora-particles { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .parallax { transform: none !important; }
}

/* ===== refined notes & footer (override layer) ===== */
/* disclaimers / annotations: quiet, editorial, hairline-led */
.fv-disclaimer,
.about-note,
.cannes-note,
.science-note,
.note-box {
  position: relative;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.1rem 1.4rem 1.1rem 1.5rem;
  font-size: .76rem;
  line-height: 1.9;
  letter-spacing: .02em;
  color: #4a4e6a;
  text-align: left;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(190,90,105,0.16);
  border-left: 2px solid rgba(190,90,105,0.50);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* small caps-like marker for the leading note symbol is kept inline; just refine spacing */
.fv-disclaimer { margin-top: 1.6rem; }

/* footer: editorial spacing, hairline divider, typographic hierarchy */
.ftr {
  background: linear-gradient(180deg, rgba(238,240,248,0) 0%, rgba(232,235,247,0.85) 30%, rgba(226,230,245,0.95) 100%) !important;
  border-top: none !important;
  padding: 3.5rem 1.3rem 2.6rem !important;
  position: relative;
}
.ftr::before {
  /* centered hairline ornament above the footer content */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,90,105,0.55), transparent);
}
.ftr-links {
  gap: .6rem 1.6rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1.4rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.ftr-links::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,90,105,0.30) 50%, transparent);
}
.ftr-links a {
  font-size: .82rem;
  letter-spacing: .06em;
  color: #4e5276;
  text-decoration: none;
  transition: color .3s ease;
}
.ftr-links a:hover { color: var(--aurora-accent); }
.ftr-operator {
  letter-spacing: .04em;
  color: #4a4e6a !important;
}
.ftr-brandlink a {
  letter-spacing: .06em;
  color: #996b6f;
  text-decoration: none;
  border-bottom: 1px solid rgba(190,90,105,0.40);
  padding-bottom: 1px;
  transition: color .3s ease, border-color .3s ease;
}
.ftr-brandlink a:hover { color: var(--aurora-accent); border-color: var(--aurora-accent); }
.ftr-copy {
  letter-spacing: .08em;
  color: #ad8488 !important;
  margin-top: 1.4rem;
}

/* ============================================================
   dev override: hero full-width + SEO visually-hidden h1
   (dev.ips-x.jp specific; hashimoto banner hero)
============================================================ */
/* SEO: keep hero copy in DOM for crawlers, hide visually */
.fv-hero-seo {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: -9999px !important;
  top: auto !important;
}
/* neutralize any inherited display/typography on the hidden copy */
.fv-hero-seo,
.fv-hero-seo * {
  font-size: 1px !important;
  line-height: 1px !important;
  color: transparent !important;
  text-shadow: none !important;
  background: none !important;
}
/* hero widened to match the ABOUT content width on PC */
@media (min-width: 768px) {
  .fv-hero-hashimoto .fv-hero-overlay-sp { display: none; }
}
@media (min-width: 1024px) {
  .fv { max-width: 1260px !important; }
  .fv-hero { max-width: 1260px; margin-left: auto; margin-right: auto; }
  .fv-hero-hashimoto .fv-hero-img { max-width: 100%; width: 100%; }
}

/* ============================================================
   PREMIUM BORDERS  (dev) - reduce hard rules; separate planes
   with light, shadow, and a single accent edge. No flat 1px boxes.
   palette anchors: navy #9B0F1E / blue #E60015 / lavender mist
============================================================ */

/* --- annotation / disclaimer notes: lifted plane, light from above.
       gentle elevation so it reads as a distinct card, not a flat box --- */
.fv-disclaimer,
.about-note,
.cannes-note,
.science-note,
.note-box {
  border: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbff 60%, #f1f4fb 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -8px 18px -16px rgba(155,15,30,0.45) inset,
    0 0 0 1px rgba(200,10,25,0.08),
    0 2px 6px -2px rgba(155,15,30,0.22),
    0 16px 30px -16px rgba(130,10,22,0.36) !important;
  padding: 1.2rem 1.5rem !important;
  overflow: hidden;
  position: relative;
}
/* top sheen */
.fv-disclaimer::before,
.about-note::before,
.cannes-note::before,
.science-note::before,
.note-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}
/* navy base anchor line (where the shadow meets the surface) */
.fv-disclaimer::after,
.about-note::after,
.cannes-note::after,
.science-note::after,
.note-box::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%; bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(155,15,30,0.4) 50%, transparent);
  pointer-events: none;
}

/* --- text/ghost buttons (about-more, science-more, etc.):
       glass plane + soft shadow; the border becomes a faint halo --- */
.about-more,
.science-more,
.cannes-more {
  border: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(243,245,252,0.82)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 0 0 1px rgba(230,0,21,0.14),
    0 12px 26px -14px rgba(155,15,30,0.45) !important;
  padding: .85rem 1.9rem !important;
  transition: transform .25s cubic-bezier(.16,.7,.3,1), box-shadow .25s, color .2s, background .2s !important;
}
.about-more:hover,
.science-more:hover,
.cannes-more:hover {
  color: #fff !important;
  background: linear-gradient(180deg, var(--blue), var(--navy)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px rgba(155,15,30,0.0),
    0 18px 34px -14px rgba(155,15,30,0.6) !important;
  transform: translateY(-2px);
}

/* --- content cards (.point, comparison cards): borderless,
       lifted plane with a hairline top highlight --- */
.point,
.compare-card,
.lineup-card,
.product-card {
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,248,253,0.9)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 14px 40px -20px rgba(155,15,30,0.30) !important;
}

/* --- dividers / bottom rules: hairline that fades at both ends,
       never a solid edge-to-edge line --- */
.sec-eyebrow {
  position: relative;
}
.about-text { position: relative; }

/* generic horizontal rules used as section dividers */
hr,
.divider,
.sec-divider {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(230,0,21,0.35) 22%, rgba(155,15,30,0.45) 50%, rgba(230,0,21,0.35) 78%, transparent) !important;
}

/* --- price box: keep structure but trade the flat outline for a
       glass plane with depth (it anchors the FV CTA) --- */
.fv-price {
  border: 0 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,246,252,0.92)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 0 0 1px rgba(230,0,21,0.12),
    0 22px 50px -26px rgba(155,15,30,0.45) !important;
}

/* --- FAQ items: separate with space + soft plane, not divider lines --- */
.faq details {
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,247,253,0.82)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 30px -18px rgba(155,15,30,0.26) !important;
  margin-bottom: .9rem !important;
  overflow: hidden;
}

/* ============================================================
   WATER VISIBILITY - let the motion canvas read through the page.
   Content keeps a glass plane; the body itself is a still water
   surface so rising bubbles + ripples stay perceptible at the edges
   and through the pale sections.
============================================================ */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(248,236,238,0.0) 0%, rgba(244,228,232,0.35) 60%, rgba(238,214,220,0.55) 100%),
    linear-gradient(180deg, #fbeef0 0%, #f6e2e6 100%) !important;
}
/* default white sections become a faint glass so water reads through */
main > .sec:not(.sec-pale) {
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(5px) saturate(1.04);
  -webkit-backdrop-filter: blur(5px) saturate(1.04);
}
/* keep the hero crisp (image needs full clarity) */
.fv .fv-hero { background: transparent !important; }

/* ============================================================
   PRICE PRODUCT HEADER - name + serum thumbnail, balanced
============================================================ */
.fv-price-product {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: .9rem;
  padding-bottom: .85rem;
  position: relative;
}
.fv-price-product::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,0,21,0.30) 50%, transparent);
}
.fv-price-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 16px -6px rgba(155,15,30,0.45), 0 0 0 1px rgba(230,0,21,0.10);
  flex-shrink: 0;
}
.fv-price-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .03em;
  color: var(--navy);
  line-height: 1.2;
}
.fv-price-name small {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .04em;
  color: #996b6f;
  margin-top: .2rem;
}

/* ============================================================
   NOTE BOX - gradient border renders identically on SP/PC;
   no protruding accent bar to fix anymore
============================================================ */
.fv-disclaimer,
.about-note,
.cannes-note,
.science-note,
.note-box {
  isolation: isolate;
}

/* ============================================================
   FOOTER - "settling into water". A deep cool plane the page
   sinks into, a single drop-ripple ornament, generous air,
   and a clear typographic hierarchy. No flat divider rule.
============================================================ */
.ftr {
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(155,15,30,0.0) 0%, rgba(38,46,92,0.06) 55%, rgba(34,42,82,0.14) 100%),
    linear-gradient(180deg, rgba(251,238,240,0) 0%, rgba(244,225,230,0.9) 22%, rgba(242,216,222,0.96) 100%) !important;
  border-top: none !important;
  padding: 4.5rem 1.3rem 3rem !important;
  position: relative;
  overflow: hidden;
}
/* drop + concentric ripple ornament, centered above the links */
.ftr::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 64px; height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(230,0,21,0.0) 30%, rgba(230,0,21,0.18) 32%, rgba(230,0,21,0.0) 34%),
    radial-gradient(circle at 50% 50%, rgba(230,0,21,0.0) 48%, rgba(230,0,21,0.12) 50%, rgba(230,0,21,0.0) 52%),
    radial-gradient(circle at 50% 42%, rgba(155,15,30,0.55) 0%, rgba(155,15,30,0.0) 14%);
  opacity: .9;
}
.ftr-links {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin: 2.2rem 0 1.8rem;
  flex-wrap: wrap;
}
.ftr-links a {
  position: relative;
  color: var(--navy) !important;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .06em;
  text-decoration: none;
  padding-bottom: .25rem;
}
.ftr-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.16,.7,.3,1);
}
.ftr-links a:hover::after { transform: scaleX(1); }
.ftr-operator,
.ftr-company {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #633a3f;
  margin: 0 auto .8rem;
  max-width: 640px;
  line-height: 1.8;
}
.ftr-copy {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #a67a7f !important;
  margin-top: 1.6rem !important;
}

/* ============================================================
   GRADIENT-BORDER SYSTEM (v2) - apply the framed, tonal-edge
   treatment consistently. Border carries a light->dark shift so
   every box reads as a clear frame, still stylish and glassy.
============================================================ */

/* content cards: clear gradient frame, medium strength */
.point,
.compare-card,
.lineup-card,
.product-card {
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 60%, #f2f5fc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -8px 18px -16px rgba(155,15,30,0.4) inset,
    0 0 0 1px rgba(200,10,25,0.08),
    0 3px 8px -3px rgba(155,15,30,0.26),
    0 20px 42px -20px rgba(130,10,22,0.4) !important;
  position: relative;
  transition: transform .3s cubic-bezier(.16,.7,.3,1), box-shadow .3s !important;
}
.point:hover,
.compare-card:hover,
.lineup-card:hover,
.product-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -8px 18px -16px rgba(155,15,30,0.4) inset,
    0 0 0 1px rgba(200,10,25,0.10),
    0 5px 12px -4px rgba(155,15,30,0.3),
    0 30px 56px -22px rgba(130,10,22,0.5) !important;
}

/* price box: the hero frame - lifted off the page by light physics.
   light comes from above: bright top edge, dark bottom edge, and a
   real directional drop-shadow so the card floats above the surface. */
.fv-price {
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfdff 55%, #f4f6fc 100%) !important;
  box-shadow:
    /* top inner highlight (light hits the top face) */
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 6px 10px -8px rgba(255,255,255,0.9) inset,
    /* bottom inner shade (face curves away from light) */
    0 -10px 22px -18px rgba(155,15,30,0.5) inset,
    /* hairline definition so the edge never vanishes into the bg */
    0 0 0 1px rgba(200,10,25,0.10),
    /* tight contact shadow (close, crisp) */
    0 3px 8px -3px rgba(155,15,30,0.30),
    /* mid lift */
    0 14px 26px -12px rgba(155,15,30,0.38),
    /* wide ambient float (far, soft) */
    0 34px 60px -24px rgba(130,10,22,0.45) !important;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16,.7,.3,1), box-shadow .3s !important;
}
/* glossy top sheen across the upper third */
.fv-price::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  border-radius: 20px 20px 50% 50% / 20px 20px 14% 14%;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0));
  pointer-events: none;
}
/* a crisp navy base edge anchors the bottom (where the shadow lives) */
.fv-price::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(155,15,30,0.55) 50%, transparent);
  pointer-events: none;
  z-index: 2;
}

/* FAQ items: lifted plane, light strength */
.faq details {
  border: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbff 60%, #f1f4fb 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 0 0 1px rgba(200,10,25,0.07),
    0 2px 6px -2px rgba(155,15,30,0.2),
    0 16px 32px -18px rgba(130,10,22,0.34) !important;
  margin-bottom: .9rem !important;
  overflow: hidden;
}

/* ghost buttons: gradient frame that intensifies, then fills on hover */
.about-more,
.science-more,
.cannes-more {
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,246,253,0.9)) padding-box,
    linear-gradient(150deg, rgba(225,125,140,0.9), rgba(155,15,30,0.95)) border-box !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 12px 26px -16px rgba(155,15,30,0.42) !important;
  transition: transform .25s cubic-bezier(.16,.7,.3,1), box-shadow .25s, color .2s, background .25s !important;
}
.about-more:hover,
.science-more:hover,
.cannes-more:hover {
  color: #fff !important;
  background:
    linear-gradient(180deg, var(--blue), var(--navy)) padding-box,
    linear-gradient(150deg, rgba(235,150,160,1), rgba(130,10,22,1)) border-box !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 20px 38px -16px rgba(155,15,30,0.62) !important;
  transform: translateY(-2px);
}

/* ============================================================
   SUBPAGE PARITY - apply the same elevation + footer design to
   about / science / lineup, which use a different class system
   (.feature .product .routine-block .cta-box .disclaimer, and a
   bare <footer> with .links/.operator/.copy).
============================================================ */

/* lifted cards (medium) - feature, product, routine */
.feature,
.product,
.routine-block,
.related {
  border: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 60%, #f2f5fc 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -8px 18px -16px rgba(155,15,30,0.4) inset,
    0 0 0 1px rgba(200,10,25,0.08),
    0 3px 8px -3px rgba(155,15,30,0.26),
    0 20px 42px -20px rgba(130,10,22,0.4) !important;
  position: relative;
  transition: transform .3s cubic-bezier(.16,.7,.3,1), box-shadow .3s !important;
}
.feature:hover,
.product:hover,
.routine-block:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -8px 18px -16px rgba(155,15,30,0.4) inset,
    0 0 0 1px rgba(200,10,25,0.10),
    0 5px 12px -4px rgba(155,15,30,0.3),
    0 30px 56px -22px rgba(130,10,22,0.5) !important;
}

/* disclaimer note (subpages): lifted plane, light from above */
.disclaimer {
  border: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbff 60%, #f1f4fb 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -8px 18px -16px rgba(155,15,30,0.45) inset,
    0 0 0 1px rgba(200,10,25,0.08),
    0 2px 6px -2px rgba(155,15,30,0.22),
    0 16px 30px -16px rgba(130,10,22,0.36) !important;
  padding: 1.2rem 1.5rem !important;
  position: relative;
  overflow: hidden;
}

/* comparison table (science): lift the whole table as one plane */
.compare {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #ffffff, #f4f6fc) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 0 0 1px rgba(200,10,25,0.08),
    0 4px 10px -3px rgba(155,15,30,0.24),
    0 22px 44px -20px rgba(130,10,22,0.42) !important;
}
.compare th,
.compare td { border: 0 !important; box-shadow: inset 0 -1px 0 rgba(200,10,25,0.08); }

/* ---- subpage footer: same "settling into water" treatment ---- */
footer:not(.ftr) {
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(155,15,30,0.0) 0%, rgba(38,46,92,0.06) 55%, rgba(34,42,82,0.14) 100%),
    linear-gradient(180deg, rgba(251,238,240,0) 0%, rgba(244,225,230,0.9) 22%, rgba(242,216,222,0.96) 100%) !important;
  border-top: none !important;
  padding: 4.5rem 1.3rem 3rem !important;
  position: relative;
  overflow: hidden;
}
footer:not(.ftr)::before {
  content: "";
  position: absolute;
  top: 30px; left: 50%;
  width: 64px; height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(230,0,21,0.0) 30%, rgba(230,0,21,0.18) 32%, rgba(230,0,21,0.0) 34%),
    radial-gradient(circle at 50% 50%, rgba(230,0,21,0.0) 48%, rgba(230,0,21,0.12) 50%, rgba(230,0,21,0.0) 52%),
    radial-gradient(circle at 50% 42%, rgba(155,15,30,0.55) 0%, rgba(155,15,30,0.0) 14%);
  opacity: .9;
}
footer:not(.ftr) .links {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin: 2.2rem 0 1.8rem;
  flex-wrap: wrap;
}
footer:not(.ftr) .links a {
  position: relative;
  color: var(--navy) !important;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .06em;
  text-decoration: none;
  padding-bottom: .25rem;
}
footer:not(.ftr) .links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.16,.7,.3,1);
}
footer:not(.ftr) .links a:hover::after { transform: scaleX(1); }
footer:not(.ftr) .operator {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #633a3f;
  margin: 0 auto .8rem;
  max-width: 640px;
  line-height: 1.8;
}
footer:not(.ftr) .copy {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #a67a7f !important;
  margin-top: 1.6rem !important;
}

/* ============================================================
   CTA PURCHASE CARD - the cta-box is a transparent spacer; the
   inner .wrap becomes a compact, centered, lifted purchase card.
   Generous vertical rhythm; clear gap before the disclaimer.
============================================================ */
.cta-box {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 3.5rem 1.3rem 2.2rem !important;
  text-align: center;
}
.cta-box .wrap {
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 2.6rem 2rem !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 55%, #f2f5fc 100%) !important;
  box-shadow:
    0 1.5px 0 rgba(255,255,255,1) inset,
    0 -10px 22px -18px rgba(155,15,30,0.5) inset,
    0 0 0 1px rgba(200,10,25,0.10),
    0 3px 8px -3px rgba(155,15,30,0.28),
    0 16px 30px -14px rgba(155,15,30,0.36),
    0 34px 60px -26px rgba(130,10,22,0.46) !important;
  position: relative;
  overflow: hidden;
}
/* top sheen on the purchase card */
.cta-box .wrap::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}
.cta-box .btn-primary { position: relative; z-index: 1; }
.cta-box .btn-note { position: relative; z-index: 1; margin-top: 1rem !important; }

/* breathing room before the disclaimer that follows the CTA */
.cta-box + .disclaimer,
.cta-box + .wrap.disclaimer,
.disclaimer {
  margin-top: 1.5rem !important;
}

/* ============================================================
   FOOTER LINKS - SP: force a clean 2x2 grid (was uneven 3+1)
============================================================ */
@media (max-width: 767px) {
  .ftr-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.2rem;
    row-gap: 1.1rem;
    justify-items: center;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: initial;
  }
  .ftr-links a { white-space: nowrap; }
}