/* ============================================================
   cMOS IMMERSIVE  —  dark "living systems" theme + interactivity
   Loaded AFTER product.css; overrides the light product styles.
   ============================================================ */
.cmos-immersive {
  --c-bg: #07061a;
  --c-bg2: #0d0b28;
  --c-card: rgba(255, 255, 255, .045);
  --c-line: rgba(255, 255, 255, .11);
  --c-text: #edebf8;
  --c-muted: #a6a3c8;
  background: var(--c-bg);
  color: var(--c-text);
  position: relative;
}

/* ---- custom spark cursor styles now live in style.css (site-wide) ---- */

/* ---- hero living mesh ---- */
.cmos-immersive .pdp-hero { background: radial-gradient(125% 105% at 72% -10%, #1a1748 0%, #0a0822 52%, #07061a 100%); overflow: hidden; }
.cmos-mesh { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cmos-immersive .pdp-hero .container { position: relative; z-index: 3; }
.cmos-immersive .pdp-hero .grid-bg { opacity: .22; z-index: 0; }
.cmos-immersive .pdp-hero .orb { z-index: 0; }
.cmos-immersive .pdp-hero .pdp-hero-mock { z-index: 3; }

/* ---- section backgrounds ---- */
.cmos-immersive .pdp-intro,
.cmos-immersive .pdp-dash,
.cmos-immersive .pdp-faqx,
.cmos-immersive .cmos-tiers { background: var(--c-bg); }
.cmos-immersive .pdp-benefits,
.cmos-immersive .cmos-cmp,
.cmos-immersive .pdp-steps,
.cmos-immersive .cmos-alive { background: var(--c-bg2); }

/* ---- generic text / headings ---- */
.cmos-immersive h2, .cmos-immersive h3, .cmos-immersive h4, .cmos-immersive h5,
.cmos-immersive .big, .cmos-immersive .tagline { color: var(--c-text); }
.cmos-immersive h2 em, .cmos-immersive .big em { color: var(--mint); }
.cmos-immersive .pdp-eyebrow { color: var(--mint); }
.cmos-immersive .pdp-intro .sub,
.cmos-immersive .head p, .cmos-immersive .pdp-step-row p,
.cmos-immersive .pdp-benefit .b-copy p { color: var(--c-muted); }
.cmos-immersive .pdp-hero .subtag { color: var(--mint); }
.cmos-immersive .pdp-hero .lead { color: rgba(255,255,255,.78); }
.cmos-immersive .breadcrumbs, .cmos-immersive .breadcrumbs a, .cmos-immersive .breadcrumbs span { color: rgba(255,255,255,.6); }

/* ---- anchor nav ---- */
.cmos-immersive .pdp-anchornav { background: rgba(10, 8, 30, .82); backdrop-filter: blur(12px); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.cmos-immersive .pdp-anchornav a { color: var(--c-muted); }
.cmos-immersive .pdp-anchornav a.active, .cmos-immersive .pdp-anchornav a:hover { color: var(--mint); }

/* ---- stat block keeps its gradient, fine on dark ---- */

/* ---- benefit media frames ---- */
.cmos-immersive .pdp-benefit .b-media { border: 1px solid var(--c-line); border-radius: 18px; overflow: hidden; }
.cmos-immersive .pdp-benefit .chip { background: rgba(127,224,171,.1); color: var(--mint); border: 1px solid rgba(127,224,171,.3); }
.cmos-immersive .pdp-benefit .ico { background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; }

/* ---- "alive" narrative band ---- */
.cmos-alive { padding: clamp(80px,10vw,120px) 0; text-align: center; }
.cmos-alive h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px,4vw,52px); margin-top: 12px; }
.cmos-alive .ca-intro { max-width: 640px; margin: 16px auto 0; color: var(--c-muted); font-size: clamp(15px,1.5vw,18px); line-height: 1.6; }
.ca-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 50px; }
.ca-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 20px; padding: 40px 30px 32px; backdrop-filter: blur(8px); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; position: relative; overflow: hidden; }
.ca-card:hover { transform: translateY(-8px); border-color: rgba(127,224,171,.4); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.ca-card h3 { font-family: var(--serif); font-style: italic; font-size: 24px; margin: 26px 0 10px; }
.ca-card p { color: var(--c-muted); font-size: 14.5px; line-height: 1.65; }
/* animated orbs */
.ca-orb { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; position: relative; }
.ca-orb::before, .ca-orb::after { content: ""; position: absolute; border-radius: 50%; }
.ca-orb.u::before { inset: 0; border: 2px solid var(--blue); animation: caRadar 2.6s ease-out infinite; }
.ca-orb.u::after { inset: 38%; background: var(--blue); box-shadow: 0 0 18px var(--blue); animation: caCore 2.6s ease-in-out infinite; }
.ca-orb.a::before { inset: 20%; background: var(--green); box-shadow: 0 0 22px var(--green); animation: caBeat 1.5s ease-in-out infinite; }
.ca-orb.a::after { inset: 0; border: 2px solid var(--green); opacity: .4; animation: caRadar 1.5s ease-out infinite; }
.ca-orb.e::before { inset: 6%; border: 2px solid var(--violet); border-radius: 50% 50% 50% 12px; box-shadow: 0 0 16px rgba(106,92,255,.6); animation: caGrow 5s linear infinite; }
.ca-orb.e::after { inset: 33%; background: var(--violet); border-radius: 50% 50% 50% 22%; animation: caGrow 5s linear infinite reverse; }
@keyframes caRadar { 0% { transform: scale(.35); opacity: .9; } 80% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes caCore { 0%,100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes caBeat { 0%,100% { transform: scale(.8); } 18% { transform: scale(1.2); } 32% { transform: scale(.9); } }
@keyframes caGrow { 0% { transform: rotate(0) scale(.9); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(.9); } }
@media (max-width: 820px) { .ca-grid { grid-template-columns: 1fr; } }

/* ---- tier explorer (dark) ---- */
.cmos-immersive .cmos-seg { background: rgba(255,255,255,.05); border-color: var(--c-line); box-shadow: none; }
.cmos-immersive .cmos-seg .lab { color: var(--c-muted); }
.cmos-immersive .cmos-hint { color: var(--c-muted); }
.cmos-immersive .cmos-hint b { color: var(--mint); }
.cmos-immersive .feat-card { background: var(--c-card); border-color: var(--c-line); backdrop-filter: blur(8px); }
.cmos-immersive .feat-card h4 { color: var(--c-text); }
.cmos-immersive .feat-card .fc-num { color: var(--blue); }
.cmos-immersive .feat-card .fc-lead { color: var(--mint); }
.cmos-immersive .feat-card .fc-desc { color: var(--c-muted); }
.cmos-immersive .feat-card li { color: #d8d6ec; }
.cmos-immersive .tier-plus { background: rgba(127,224,171,.1); border-color: rgba(127,224,171,.36); color: var(--mint); }
.cmos-immersive .tier-who .tw { background: var(--c-card); border-color: var(--c-line); }
.cmos-immersive .tier-who .tw h5 { color: var(--c-text); }
.cmos-immersive .tier-who .tw p { color: var(--c-muted); }

/* ---- comparison table (dark) ---- */
.cmos-immersive .cmp th, .cmos-immersive .cmp td { border-bottom-color: var(--c-line); }
.cmos-immersive .cmp thead th, .cmos-immersive .cmp td.feat { color: var(--c-text); }
.cmos-immersive .cmp thead .tier-pr { color: var(--c-muted); }
.cmos-immersive .cmp td.adv { background: rgba(127,224,171,.07); }
.cmos-immersive .cmp .no { color: rgba(255,255,255,.25); }
.cmos-immersive .cmp tfoot td.col { color: var(--c-text); }
.cmos-immersive .cmp tfoot td.adv { color: var(--mint); }

/* ---- getting-started steps ---- */
.cmos-immersive .pdp-step-row { border-color: var(--c-line); }
.cmos-immersive .pdp-step-row h3 { color: var(--c-text); }
.cmos-immersive .pdp-step-row .idx { color: rgba(255,255,255,.16); }

/* ---- FAQ chat (dark) ---- */
.cmos-immersive .pdp-faqx .faqx-q .bubble { background: rgba(255,255,255,.07); color: var(--c-text); }
.cmos-immersive .pdp-faqx .faqx-q .who { color: var(--c-muted); }
.cmos-immersive .pdp-faqx .faqx-a .bubble { background: linear-gradient(135deg, rgba(127,224,171,.14), rgba(27,157,217,.14)); border: 1px solid var(--c-line); color: #e7e6f4; }
.cmos-immersive .pdp-faqx .faqx-a .bubble strong { color: var(--mint); }
.cmos-immersive .pdp-faqx .faqx-a .ai { background: linear-gradient(135deg, var(--green), var(--blue)); color: #fff; }
.cmos-immersive .faqx-foot p { color: var(--c-muted); }

/* dashboards: keep the white mock (reads like a screenshot on dark) */
.cmos-immersive .pdp-dash .dash-copy h3 { color: var(--c-text); }
.cmos-immersive .pdp-dash .dash-copy p { color: var(--c-muted); }
.cmos-immersive .pdp-dash .dash-copy li { color: #d8d6ec; }
.cmos-immersive .pdp-dash .dash-copy .tag { background: rgba(127,224,171,.12); color: var(--mint); }

/* ---- sticky CTA bar ---- */
.cmos-stickycta {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%);
  z-index: 9000; display: flex; align-items: center; gap: 22px;
  background: rgba(16, 13, 40, .9); backdrop-filter: blur(14px);
  border: 1px solid rgba(127,224,171,.3); border-radius: 100px;
  padding: 12px 12px 12px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transition: transform .55s var(--ease); max-width: calc(100vw - 28px);
}
.cmos-stickycta.show { transform: translate(-50%, 0); }
.cmos-stickycta span { color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
.cmos-stickycta .btn { flex: 0 0 auto; }
@media (max-width: 620px) {
  .cmos-stickycta { gap: 12px; padding: 10px 10px 10px 18px; }
  .cmos-stickycta span { font-size: 12.5px; white-space: normal; }
}

/* ============================================================
   PROMINENT PRICING
   ============================================================ */
.cmos-immersive .tier-banner .tb-price .amt {
  display: inline-block; color: #fff; font-size: clamp(42px,5.2vw,62px);
  background: rgba(0,0,0,.32); border: 1px solid rgba(127,224,171,.42);
  border-radius: 16px; padding: 10px 20px; line-height: 1;
  box-shadow: 0 0 30px rgba(127,224,171,.28), inset 0 0 24px rgba(127,224,171,.06);
}
.cmos-immersive .tier-banner .tb-price .amt small { color: var(--mint); font-weight: 800; font-size: 15px; }
.cmos-immersive .tier-banner .tb-price .pn { color: rgba(255,255,255,.85); font-weight: 600; margin-top: 12px; }
/* toggle tick prices */
.cmos-immersive .cmos-seg .lab .tick { opacity: 1; color: var(--mint); font-weight: 800; }
.cmos-immersive .cmos-seg .lab.on .tick { color: #fff; }
/* comparison header + footer prices */
.cmos-immersive .cmp thead .tier-lbl { color: var(--c-text); font-size: 17px; }
.cmos-immersive .cmp thead th.adv .tier-lbl { color: #fff; }
.cmos-immersive .cmp thead .tier-pr { color: var(--mint); font-weight: 800; font-size: 13.5px; }
.cmos-immersive .cmp thead th.adv .tier-pr { color: #fff; }
.cmos-immersive .cmp tfoot td.col { font-size: 21px; color: #fff; }
.cmos-immersive .cmp tfoot td.adv { color: var(--mint); }

/* ============================================================
   FEATURE CARDS — alive
   ============================================================ */
/* accent bar always lit + shimmering */
.cmos-immersive .feat-card::before {
  transform: scaleX(1); height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--violet), var(--green));
  background-size: 220% 100%; animation: cmosShimmer 5s linear infinite;
}
@keyframes cmosShimmer { to { background-position: -220% 0; } }
/* cursor-tracked spotlight glow */
.cmos-immersive .feat-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(127,224,171,.16), transparent 62%);
}
.cmos-immersive .feat-card:hover::after { opacity: 1; }
.cmos-immersive .feat-card { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.cmos-immersive .feat-card:hover {
  transform: translateY(-8px); border-color: rgba(127,224,171,.5);
  box-shadow: 0 30px 66px rgba(0,0,0,.55), 0 0 0 1px rgba(127,224,171,.22);
}
.cmos-immersive .feat-card:hover .fc-num { color: var(--mint); text-shadow: 0 0 16px rgba(127,224,171,.8); }
.cmos-immersive .feat-card .fc-num { transition: color .35s, text-shadow .35s; }
/* checklist items light up in sequence on hover */
.cmos-immersive .feat-card li svg { transition: transform .3s var(--ease), filter .3s; }
.cmos-immersive .feat-card:hover li svg { filter: drop-shadow(0 0 6px rgba(127,224,171,.8)); }
.cmos-immersive .feat-card:hover li:nth-child(2) svg { transition-delay: .05s; }
.cmos-immersive .feat-card:hover li:nth-child(3) svg { transition-delay: .1s; }
.cmos-immersive .feat-card:hover li:nth-child(4) svg { transition-delay: .15s; }
/* staggered entrance */
.cmos-immersive .feat-grid .feat-card:nth-child(2) { transition-delay: .07s; }
.cmos-immersive .feat-grid .feat-card:nth-child(3) { transition-delay: .14s; }
.cmos-immersive .feat-grid .feat-card:nth-child(4) { transition-delay: .21s; }
.cmos-immersive .feat-grid .feat-card:nth-child(5) { transition-delay: .28s; }

/* ============================================================
   COMPARISON TABLE — alive
   ============================================================ */
/* Advanced column glows and pulses */
.cmos-immersive .cmp thead th.adv {
  box-shadow: 0 0 22px rgba(127,224,171,.3); animation: advPulse 2.8s ease-in-out infinite;
}
@keyframes advPulse { 0%,100% { box-shadow: 0 0 18px rgba(127,224,171,.22); } 50% { box-shadow: 0 0 34px rgba(127,224,171,.5); } }
.cmos-immersive .cmp td.adv { box-shadow: inset 1px 0 0 rgba(127,224,171,.18), inset -1px 0 0 rgba(127,224,171,.18); }
/* row hover highlight */
.cmos-immersive .cmp tbody tr td { transition: background .25s; }
.cmos-immersive .cmp tbody tr:hover td { background: rgba(255,255,255,.045); }
.cmos-immersive .cmp tbody tr:hover td.adv { background: rgba(127,224,171,.14); }
.cmos-immersive .cmp tbody tr:hover td.feat { color: #fff; }
/* rows slide in on scroll, checks pop */
.cmos-immersive .cmp tbody tr { opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.cmos-immersive .cmp.lit tbody tr { opacity: 1; transform: none; }
.cmos-immersive .cmp .yes svg, .cmos-immersive .cmp .no svg { transform: scale(0); transition: transform .45s cubic-bezier(.34,1.7,.5,1); }
.cmos-immersive .cmp.lit .yes svg, .cmos-immersive .cmp.lit .no svg { transform: scale(1); }
.cmos-immersive .cmp .yes { filter: drop-shadow(0 0 7px rgba(127,224,171,.7)); }

/* ============================================================
   ALL CARDS ALIVE  (alive-band cards + who-it's-for cards)
   ============================================================ */
.cmos-immersive .ca-card, .cmos-immersive .tier-who .tw { position: relative; overflow: hidden; }
.cmos-immersive .ca-card::before, .cmos-immersive .tier-who .tw::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .85;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--violet), var(--green));
  background-size: 220% 100%; animation: cmosShimmer 6s linear infinite;
}
.cmos-immersive .ca-card::after, .cmos-immersive .tier-who .tw::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(127,224,171,.15), transparent 62%);
}
.cmos-immersive .ca-card:hover::after, .cmos-immersive .tier-who .tw:hover::after { opacity: 1; }
.cmos-immersive .tier-who .tw { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.cmos-immersive .tier-who .tw:hover { transform: translateY(-6px); border-color: rgba(127,224,171,.42); box-shadow: 0 26px 56px rgba(0,0,0,.5); }
/* benefit media frames glow on hover */
.cmos-immersive .pdp-benefit .b-media { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.cmos-immersive .pdp-benefit:hover .b-media { border-color: rgba(127,224,171,.4); box-shadow: 0 30px 70px rgba(0,0,0,.5); }

/* ============================================================
   FLOATING ACTIVITY WIDGETS (hero)
   ============================================================ */
.cmos-floaties { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.floaty { position: absolute; will-change: transform; }
.floaty-in {
  display: flex; align-items: center; gap: 11px;
  background: rgba(18,16,44,.74); backdrop-filter: blur(12px);
  border: 1px solid rgba(127,224,171,.28); border-radius: 14px; padding: 11px 15px;
  box-shadow: 0 18px 42px rgba(0,0,0,.45); animation: floatBob 5s ease-in-out infinite;
}
.floaty-in b { display: block; font-size: 12.5px; color: #fff; font-weight: 800; line-height: 1.2; }
.floaty-in .sub { display: block; font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.floaty-in .fi-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.fi-ic.green { background: linear-gradient(135deg, var(--green), var(--blue)); }
.fi-ic.blue { background: linear-gradient(135deg, var(--blue), var(--indigo)); }
.fi-ic.violet { background: linear-gradient(135deg, var(--violet), var(--blue)); }
.floaty.f1 { top: 7%; right: 5%; }
.floaty.f2 { top: 41%; right: 30%; }
.floaty.f2 .floaty-in { animation-delay: 1.2s; }
.floaty.f3 { bottom: 9%; right: 8%; }
.floaty.f3 .floaty-in { animation-delay: .6s; }
@keyframes floatBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 1180px) { .cmos-floaties { display: none; } }

/* ============================================================
   DASHBOARDS ALIVE  (animate on reveal + live feel)
   ============================================================ */
.cmos-immersive .dash .body { position: relative; overflow: hidden; }
/* live scan sweep */
.cmos-immersive .dash.live .body::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(127,224,171,.1), transparent); animation: dashScan 5.5s ease-in-out infinite;
}
@keyframes dashScan { 0% { left: -60%; } 55%,100% { left: 130%; } }
/* bar chart grows from bottom */
.cmos-immersive .dash .chart i { transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); }
.cmos-immersive .dash.live .chart i { transform: scaleY(1); }
.cmos-immersive .dash.live .chart i:nth-child(2) { transition-delay: .06s; }
.cmos-immersive .dash.live .chart i:nth-child(3) { transition-delay: .12s; }
.cmos-immersive .dash.live .chart i:nth-child(4) { transition-delay: .18s; }
.cmos-immersive .dash.live .chart i:nth-child(5) { transition-delay: .24s; }
.cmos-immersive .dash.live .chart i:nth-child(6) { transition-delay: .3s; }
.cmos-immersive .dash.live .chart i:nth-child(7) { transition-delay: .36s; }
/* donut draws in */
.cmos-immersive .dash .donut .m { transition: stroke-dashoffset 1.5s var(--ease); }
.cmos-immersive .dash:not(.live) .donut .m { stroke-dashoffset: 283; }
.cmos-immersive .dash.live .donut .m { stroke-dashoffset: 70; }
/* attribution bars grow from left */
.cmos-immersive .dash .lrow .bar i { transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.cmos-immersive .dash.live .lrow .bar i { transform: scaleX(1); }
.cmos-immersive .dash.live .lrow:nth-child(3) .bar i { transition-delay: .12s; }
.cmos-immersive .dash.live .lrow:nth-child(4) .bar i { transition-delay: .24s; }
/* pulsing live pill */
.cmos-immersive .dash .greet .pill { position: relative; }
.cmos-immersive .dash.live .greet .pill::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(0,161,75,.6); animation: pillPulse 1.8s ease-out infinite;
}
@keyframes pillPulse { 0% { box-shadow: 0 0 0 0 rgba(0,161,75,.55); } 70% { box-shadow: 0 0 0 7px rgba(0,161,75,0); } 100% { box-shadow: 0 0 0 0 rgba(0,161,75,0); } }

@media (prefers-reduced-motion: reduce) {
  .ca-orb::before, .ca-orb::after,
  .cmos-immersive .feat-card::before,
  .cmos-immersive .ca-card::before, .cmos-immersive .tier-who .tw::before,
  .cmos-immersive .cmp thead th.adv,
  .cmos-immersive .floaty-in,
  .cmos-immersive .dash.live .body::after,
  .cmos-immersive .dash.live .greet .pill::before { animation: none !important; }
  .cmos-immersive .cmp tbody tr { opacity: 1; transform: none; }
  .cmos-immersive .cmp .yes svg, .cmos-immersive .cmp .no svg { transform: scale(1); }
  .cmos-immersive .dash .chart i, .cmos-immersive .dash .lrow .bar i { transform: none; }
  .cmos-immersive .dash .donut .m { stroke-dashoffset: 70; }
}

/* ============================================================
   STANDARD PDP COMPONENTS — dark + alive
   (applies to iCTS / iAccounts / iLCM and any template page)
   ============================================================ */
.cmos-immersive .pdp-areas, .cmos-immersive .pdp-who, .cmos-immersive .pdp-pricing { background: var(--c-bg); }
.cmos-immersive .pdp-plans, .cmos-immersive .pdp-why { background: var(--c-bg2); }

/* application-area cards */
.cmos-immersive .pdp-area { background: var(--c-card); border-color: var(--c-line); backdrop-filter: blur(8px); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s, background .4s; }
.cmos-immersive .pdp-area::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--blue), var(--violet), var(--green)); background-size: 220% 100%; animation: cmosShimmer 6s linear infinite; }
.cmos-immersive .pdp-area::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(127,224,171,.14), transparent 62%); }
.cmos-immersive .pdp-area:hover { transform: translateY(-6px); background: rgba(255,255,255,.06); border-color: rgba(127,224,171,.42); box-shadow: 0 28px 60px rgba(0,0,0,.55); }
.cmos-immersive .pdp-area:hover::after { opacity: 1; }
.cmos-immersive .pdp-area .ah h3 { color: var(--c-text); }
.cmos-immersive .pdp-area li { color: #d8d6ec; }
.cmos-immersive .pdp-area .tip { background: rgba(27,157,217,.1); color: var(--c-muted); border-left-color: var(--blue); }
.cmos-immersive .pdp-area .tip b { color: var(--mint); }

/* who-is-it-for cards */
.cmos-immersive .pdp-who-card { background: var(--c-card); border-color: var(--c-line); backdrop-filter: blur(8px); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.cmos-immersive .pdp-who-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(127,224,171,.14), transparent 62%); }
.cmos-immersive .pdp-who-card:hover { transform: translateY(-6px); border-color: rgba(127,224,171,.42); box-shadow: 0 26px 56px rgba(0,0,0,.5); }
.cmos-immersive .pdp-who-card:hover::after { opacity: 1; }
.cmos-immersive .pdp-who-card h4 { color: var(--c-text); }

/* plans: switch + tier cards */
.cmos-immersive .pdp-switch .lab { color: var(--c-muted); }
.cmos-immersive .pdp-switch .lab.on { color: #fff; }
.cmos-immersive .pdp-plan { background: var(--c-card); border-color: var(--c-line); backdrop-filter: blur(8px); position: relative; overflow: hidden; }
.cmos-immersive .pdp-plan::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(127,224,171,.12), transparent 62%); }
.cmos-immersive .pdp-plan:hover::after { opacity: 1; }
.cmos-immersive .pdp-plan .tier-name { color: var(--c-text); }
.cmos-immersive .pdp-plan .tier-name .badge { background: rgba(127,224,171,.14); color: var(--mint); }
.cmos-immersive .pdp-plan .tier-head { color: var(--c-text); }
.cmos-immersive .pdp-plan p { color: var(--c-muted); }
.cmos-immersive .pdp-plan .ideal { color: var(--c-muted); }
/* advanced card already has a bright gradient, keep it */

/* pricing cards */
.cmos-immersive .pdp-price { background: var(--c-card); border-color: var(--c-line); backdrop-filter: blur(8px); }
.cmos-immersive .pdp-price .pname { color: var(--c-text); }
.cmos-immersive .pdp-price .amount { color: var(--c-text); }
.cmos-immersive .pdp-price .note { color: var(--c-muted); }

/* why traits */
.cmos-immersive .pdp-why-traits span { background: var(--c-card); border-color: var(--c-line); color: var(--c-text); }

@media (prefers-reduced-motion: reduce) {
  .cmos-immersive .pdp-area::before { animation: none !important; }
}

/* readability: ghost buttons on dark */
.cmos-immersive .btn-ghost { border-color: rgba(127,224,171,.55); color: var(--mint); }
.cmos-immersive .btn-ghost:hover { background: rgba(127,224,171,.12); color: #fff; border-color: var(--mint); }