/* A viewport-wide fade replaces the navigation while reading. The five masked
   blur layers adapt Osmo's progressive blur to the top edge of this page. */
.navigation-veil {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 88px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  transition: opacity .3s ease;
}
.navigation-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #060708 0%, rgba(6,7,8,.97) 24%, rgba(6,7,8,.68) 54%, rgba(6,7,8,0) 100%);
}
.navigation-veil > span {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--edge-blur));
  backdrop-filter: blur(var(--edge-blur));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--edge-stop), transparent var(--edge-end));
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--edge-stop), transparent var(--edge-end));
}
.navigation-veil > :nth-child(1) { --edge-blur: 1.5px; --edge-stop: 70%; --edge-end: 100%; }
.navigation-veil > :nth-child(2) { --edge-blur: 3px; --edge-stop: 52%; --edge-end: 84%; }
.navigation-veil > :nth-child(3) { --edge-blur: 6px; --edge-stop: 35%; --edge-end: 68%; }
.navigation-veil > :nth-child(4) { --edge-blur: 12px; --edge-stop: 18%; --edge-end: 50%; }
.navigation-veil > :nth-child(5) { --edge-blur: 24px; --edge-stop: 0%; --edge-end: 32%; }
.is-page-scrolled .navigation-veil { opacity: 1; }
.is-top-navigation-visible .navigation-veil,
.is-menu-open .navigation-veil { opacity: 0; transition: opacity .18s ease; }
.is-membership-reading .navigation-veil { opacity: 0; transition: none; }
.comparison-motion-enabled { overflow-anchor: none; }
.refined .topbar::before { display: none; }
.refined .topbar {
  transition: transform .24s cubic-bezier(.22,.7,.2,1), opacity .18s ease;
}
.refined .topbar.is-hidden {
  transform: translateY(calc(-100% - 26px));
  opacity: 0;
}
.refined .topbar.is-hidden > * { pointer-events: none; }
.refined .topbar:has(:focus-visible) { transform: none; opacity: 1; }
.refined .topbar:has(:focus-visible) > * { pointer-events: auto; }

/* The enhanced comparison stays inside a centred reading frame. The document
   scroll moves its rows; the frame itself never becomes a nested scroller. */
.refined.evolved .compare#compare {
  padding-top: clamp(64px, 5vw, 96px);
  scroll-margin-top: 24px;
}
.refined.evolved .compare-head { margin-bottom: 28px; }
.refined.evolved .comparison-meta { margin-bottom: 18px; }
.refined.evolved .comparison-centered .comparison-runway {
  position: relative;
  height: var(--compare-runway-height, auto);
}
.refined.evolved .comparison-centered .comparison-scene {
  position: sticky;
  top: var(--compare-stage-top, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--compare-stage-height, auto);
}
.refined.evolved .comparison-centered .table-wrap {
  position: relative;
  width: 100%;
  height: var(--compare-panel-height, auto);
  overflow: clip;
  border-radius: 24px;
  isolation: isolate;
}
.refined.evolved .comparison-centered .matrix {
  display: block;
  width: 100%;
}
.refined.evolved .comparison-centered .matrix thead {
  position: relative;
  top: auto;
  z-index: 2;
  display: block;
}
.refined.evolved .comparison-centered .matrix :is(thead tr, tbody tr.row) {
  display: grid;
  grid-template-columns: 29% repeat(4, minmax(0, 1fr));
}
.refined.evolved .comparison-centered .matrix :is(thead th, tbody th, tbody td) {
  width: auto;
  min-width: 0;
}
.refined.evolved .comparison-centered .matrix thead th {
  position: static;
  display: block;
}
.refined.evolved .comparison-centered .matrix tbody {
  display: block;
  height: var(--compare-body-height, auto);
  overflow: clip;
}
.refined.evolved .comparison-centered .matrix tbody tr.row {
  transform: translateY(calc(-1 * var(--compare-row-offset, 0px)));
}
.refined.evolved .comparison-centered .matrix tbody td {
  display: flex;
  align-items: center;
  justify-content: center;
}
.refined.evolved .comparison-centered .compare-footer {
  margin-top: calc(-1 * var(--compare-exit-inset, 0px));
}
.refined.evolved .comparison-centered.comparison-measuring .table-wrap,
.refined.evolved .comparison-centered.comparison-measuring .matrix tbody {
  height: auto;
  overflow: visible;
}
.refined.evolved .comparison-centered.comparison-measuring .matrix tbody tr.row {
  transform: none;
}

.refined.evolved .comparison-corner-title { max-width: none; }
.refined.evolved .comparison-corner-meta { display: flow-root; }
.refined.evolved .comparison-measuring .matrix :is(thead, thead th) {
  position: static;
  top: auto;
}
.refined.evolved .comparison-ready:not(.comparison-centered) .matrix thead {
  position: sticky;
  top: var(--compare-nav-space, 0px);
  z-index: 32;
}
.refined.evolved .comparison-ready .matrix thead th { position: static; }
.refined.evolved .comparison-ready .matrix thead th:first-child { padding: 0; vertical-align: top; }
.refined.evolved .comparison-ready :is(.comparison-plan, .comparison-corner-content) {
  height: var(--compare-visible-height);
  min-height: 0;
  overflow: clip;
}
.refined.evolved .comparison-ready .comparison-corner-content { position: relative; }
.refined.evolved .comparison-ready .comparison-corner-title {
  position: absolute;
  left: var(--compare-corner-inset);
  right: var(--compare-corner-inset);
  top: var(--compare-corner-top);
  max-width: none;
  margin: 0;
  font-size: var(--compare-corner-size);
  line-height: 1.1;
}
.refined.evolved .comparison-ready .comparison-corner-meta {
  position: absolute;
  left: var(--compare-corner-inset);
  right: var(--compare-corner-inset);
  top: var(--compare-corner-meta-top);
}
.refined.evolved .comparison-ready .matrix thead th:first-child {
  border-top-left-radius: calc(24px * (1 - var(--compare-progress, 0)));
}
.refined.evolved .comparison-ready .matrix thead th:last-child {
  border-top-right-radius: calc(24px * (1 - var(--compare-progress, 0)));
}
.refined.evolved .comparison-centered .matrix thead th:first-child {
  border-top-left-radius: 24px;
}
.refined.evolved .comparison-centered .matrix thead th:last-child {
  border-top-right-radius: 24px;
}
.refined.evolved .comparison-ready .comparison-name {
  position: relative;
  z-index: 1;
  transform: translateY(var(--compare-name-shift, 0px));
}
.refined.evolved .comparison-ready .comparison-name .col-name {
  transform: scale(var(--compare-name-scale, 1));
  transform-origin: left center;
}
.refined.evolved .comparison-ready :is(.col-eyebrow, .col-price, .comparison-benefit, .comparison-corner-meta) {
  opacity: var(--compare-detail-opacity, 1);
  transform: translateY(calc(-12px * var(--compare-progress, 0)));
}
.refined.evolved .included.recovery { padding-top: clamp(72px, 6vw, 112px); }
@media (min-width: 761px) {
  .refined.evolved .comparison-centered .matrix thead th:first-child {
    display: flex;
    align-items: flex-end;
  }
  .refined.evolved .comparison-centered .comparison-corner-content { width: 100%; }
}
@media (max-width: 760px) {
  .refined.evolved .compare#compare { padding-top: 64px; }
  .refined.evolved .compare-head { margin-bottom: 24px; }
  .navigation-veil { height: 72px; }
  .refined.evolved .comparison-centered .table-wrap { border-radius: 18px; }
  .refined.evolved .comparison-centered .matrix :is(thead tr, tbody tr.row) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .refined.evolved .comparison-centered .matrix thead th:first-child { display: none; }
  .refined.evolved .comparison-ready .matrix thead th:nth-child(2) {
    border-top-left-radius: calc(18px * (1 - var(--compare-progress, 0)));
  }
  .refined.evolved .comparison-centered .matrix thead th:nth-child(2) { border-top-left-radius: 18px; }
  .refined.evolved .comparison-centered .matrix thead th:last-child { border-top-right-radius: 18px; }
  .refined.evolved .comparison-ready .comparison-name .col-name { transform-origin: center; }
  .refined.evolved .included.recovery { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .navigation-veil, .refined .topbar { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .navigation-veil > span { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navigation-veil::after { background: linear-gradient(#060708 0 60%, transparent); }
}