/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* A11Y-PERF-2 (#111): the pricing page's section shell. Pricing loaded all of full-assessment.css (36 KB, 7.8 KB compressed, a
   render-blocking stylesheet) for these rules alone; Chrome's CSS coverage on /pricing at 390 and 1440 in both themes, with
   Help me choose clicked through, used nothing else from it (.sr-only is in styles.css). Copied verbatim from
   full-assessment.css, which keeps its own copy for /full-assessment; change both together. */

.gate {
  /* Stage 4 item 14 (Buying P2-18): min-height 100vh left an empty band of 170 to 330 px under the gate on /pricing and
     /full-assessment. The section is as tall as what it holds. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.gate::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 80%;
  background: radial-gradient(ellipse at center,
    rgba(var(--purple-rgb, 139,92,246), 0.08) 0%,
    rgba(245,158,11,0.04) 25%,
    rgba(16,185,129,0.04) 50%,
    rgba(var(--disc-c-rgb, 59,130,246), 0.06) 75%,
    transparent 100%
  );
  pointer-events: none;
  animation: ambient-shift 12s ease-in-out infinite alternate;
}

/* CLS 2026-09-12: on /pricing.html checkout.js fills #wdv-inline-pricing after first paint, which
   grows the section from one screen to ~9,000px. The glow above is sized in % of the section and
   the two links below the catalog were already painted, so all three jumped: CLS 0.94 mobile,
   0.98 desktop, on production and on the #87 preview alike. Holding them invisible until the
   catalog lands (about 50ms) removes the shift without changing the settled page. */
.gate:has(#wdv-inline-pricing:empty)::before,
#wdv-inline-pricing:empty ~ .gate__actions,
#wdv-inline-pricing:empty ~ .gate__free-link {
  visibility: hidden;
}

.gate__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.gate__content-wide {
  max-width: 1200px;
  width: 100%;
}


.gate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.gate__free-link {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.gate__free-link:hover {
  color: var(--text);
}

.gate__free-link svg {
  width: 14px;
  height: 14px;
  display: inline;
  vertical-align: -2px;
  margin-right: 4px;
}