body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) {
  --catalog-glass: rgba(255, 255, 255, .18);
  --catalog-glass-strong: rgba(255, 255, 255, .34);
  --catalog-edge: rgba(255, 255, 255, .88);
  --catalog-shadow: 0 10px 32px rgba(20,25,30,.055), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.24);
  --catalog-active: rgba(100,105,110,.085);
  --catalog-hover: rgba(255,255,255,.44);
  --catalog-base: #f1f2f3;
  --catalog-light: rgba(255,255,255,.80);
  --catalog-sheen: rgba(255,255,255,.24);
  --catalog-control: rgba(255,255,255,.12);
  --catalog-control-hover: rgba(255,255,255,.36);
  --catalog-top-purple: rgba(125,112,205,.055);
  --catalog-top-teal: rgba(78,159,167,.035);
  --catalog-neutral: linear-gradient(120deg, #f7f8f9, #e9edf0 42%, #f5f6f7 72%, #edf0f2);
}
.dark body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) {
  --catalog-glass: rgba(37,38,40,.36);
  --catalog-glass-strong: rgba(37,38,40,.55);
  --catalog-edge: rgba(255,255,255,.10);
  --catalog-shadow: 0 10px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12);
  --catalog-active: rgba(255,255,255,.09);
  --catalog-hover: rgba(48,49,51,.68);
  --catalog-base: #161719;
  --catalog-light: rgba(255,255,255,.025);
  --catalog-sheen: rgba(255,255,255,.035);
  --catalog-control: rgba(255,255,255,.025);
  --catalog-control-hover: rgba(255,255,255,.075);
  --catalog-top-purple: rgba(125,112,205,.065);
  --catalog-top-teal: rgba(78,159,167,.04);
  --catalog-neutral: linear-gradient(120deg, #17191c, #22262b 42%, #191b1e 72%, #202328);
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) #root > .bg-background {
  background:
    radial-gradient(ellipse 550px 220px at 25% 0, var(--catalog-top-purple), transparent 100%),
    radial-gradient(ellipse 450px 180px at 80% 0, var(--catalog-top-teal), transparent 100%),
    var(--catalog-neutral);
  background-attachment: scroll, scroll, fixed;
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) div.relative > div[aria-hidden="true"][class~="inset-x-0"][style*="radial-gradient"] {
  display: none;
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) :is(aside.bg-card, main > .bg-card, main [data-slot="card"], main [data-slot="table-container"], header input) {
  background: var(--catalog-glass);
  border-color: var(--catalog-edge);
  box-shadow: var(--catalog-shadow);
  -webkit-backdrop-filter: blur(36px) saturate(120%);
  backdrop-filter: blur(36px) saturate(120%);
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) :is(aside.bg-card, main > .bg-card) {
  background: var(--catalog-glass-strong);
}
/* Keep the search icon above the input's new backdrop stacking context. */
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) header div:has(> input) > :is(svg, div) {
  z-index: 1;
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) [data-slot="sheet-content"] {
  background: var(--catalog-glass-strong);
  border-color: var(--catalog-edge);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main [data-slot="card"] {
  --tw-ring-color: var(--catalog-edge);
  background: linear-gradient(125deg, var(--catalog-sheen), transparent 45%), var(--catalog-glass);
  border: 1px solid var(--catalog-edge);
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main [data-slot="card"]:hover {
  background: var(--catalog-hover);
  border-color: rgba(130, 135, 140, .24);
  box-shadow: 0 10px 30px rgba(20, 25, 30, .08), inset 0 1px 0 rgba(255,255,255,.25);
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) :is(aside button[aria-pressed="true"], main [data-slot="toggle-group-item"][aria-pressed="true"]) {
  background: var(--catalog-active);
}
@supports not (backdrop-filter: blur(1px)) {
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) :is(aside.bg-card, main > .bg-card, main [data-slot="card"], main [data-slot="table-container"], header input) {
    background: var(--catalog-base);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main [data-slot="card"] { transition: none; }
}

/* Neutral frosted surface: fine grain, edge reflection and real backdrop blur. */
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main [data-slot="card"] {
  background-image: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.015) 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23888' opacity='.045' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  background-size: auto, 160px 160px;
}
.dark body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main [data-slot="card"] {
  background-image: linear-gradient(145deg, rgba(255,255,255,.035), transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23888' opacity='.045' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}

/* A decorative image moves beneath the frosted surfaces, leaving text still. */
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) #root > .bg-background::before {
  content: "";
  position: fixed;
  inset: -15vh -12vw;
  pointer-events: none;
  background: url("/brand/catalog-ambient-silk.svg?v=2") center / cover no-repeat;
  opacity: .80;
}
.dark body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) #root > .bg-background::before {
  opacity: .85;
}
@media (max-width: 767.98px) {
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) #root > .bg-background::before {
    opacity: .66;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) #root > .bg-background::before {
    background-image: url("/brand/catalog-ambient-still.svg?v=2");
  }
}

/* Carry the same translucent material through the remaining outline controls. */
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) :is(main, aside, [data-slot="sheet-content"]) button.bg-background,
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main > .bg-card [role="group"],
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) header kbd {
  background: var(--catalog-control);
  border-color: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--catalog-edge) 65%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) :is(main, aside, [data-slot="sheet-content"]) button.bg-background:hover {
  background: var(--catalog-control-hover);
}

/* Balance incomplete rows without hiding models or adding placeholder cards. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main .grid:has(> [data-slot="card"]) > [data-slot="card"]:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}
@media (min-width: 1280px) {
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main .grid:has(> [data-slot="card"]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main .grid > [data-slot="card"] {
    grid-column: span 2;
  }
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main .grid > [data-slot="card"]:nth-last-child(2):nth-child(3n + 1),
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main .grid > [data-slot="card"]:nth-last-child(2):nth-child(3n + 1) + [data-slot="card"] {
    grid-column: span 3;
  }
  body:has(header.pointer-events-none a[href="/pricing"][aria-current="page"]) main .grid > [data-slot="card"]:last-child:nth-child(3n + 1) {
    grid-column: span 6;
  }
}