/*
 * Site-wide studio refinement.
 * Shared across public pages while preserving the underlying studio design.
 */

html {
  --studio-sans: 'Syne', 'Arial Black', sans-serif;
  --studio-mono: 'Manrope', Arial, sans-serif;
  --font-sans: 'Manrope', Arial, sans-serif;
  --font-mono: 'Manrope', Arial, sans-serif;
  --studio-accent: #cfff41;
  --studio-acid: #9eea2f;
}

html body {
  font-family: 'Manrope', Arial, sans-serif !important;
  background:
    linear-gradient(90deg, rgba(207, 255, 65, 0.022) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(180deg, rgba(207, 255, 65, 0.018) 1px, transparent 1px) 0 0 / 84px 84px,
    var(--studio-black) !important;
}

html body::after {
  opacity: 0.18 !important;
  background:
    linear-gradient(transparent 0 49%, rgba(207, 255, 65, 0.026) 50%, transparent 51%) 0 0 / 100% 12px,
    radial-gradient(circle at var(--studio-cursor-x, 50%) var(--studio-cursor-y, 50%), rgba(207, 255, 65, 0.055), transparent 22vw),
    linear-gradient(115deg, transparent 0 44%, rgba(207, 255, 65, 0.022) 49%, transparent 54% 100%);
  animation: refined-body-scan 42s linear infinite !important;
}

html :is(
  .hero h1,
  .section-title,
  .cta-card h2,
  .pricing-name,
  .pricing-price,
  .pricing-explorer-name,
  .pricing-explorer-sentence,
  .hero-summary-card h3,
  .hero-diagnostic strong,
  .output-console-side h3,
  .visibility-map-core strong,
  .visibility-node strong,
  .feature-card h3,
  .diagnostic-card h3,
  .step h3,
  .trust-item h3,
  .operation-card h3,
  .faq-question,
  .footer-logo
) {
  font-family: 'Syne', sans-serif !important;
  font-weight: 550 !important;
}

html :is(
  p,
  li,
  .btn,
  .section-label,
  .hero-badge,
  .hero-summary-label,
  .hero-summary-card p,
  .hero-diagnostic span,
  .hero-diagnostic p,
  .pricing-tier,
  .pricing-badge,
  .pricing-desc,
  .pricing-one-time,
  .pricing-features li,
  .pricing-best-for,
  .faq-answer,
  .footer h4,
  .footer-links a,
  .footer-tagline,
  .footer-disclaimer
) {
  font-family: 'Manrope', Arial, sans-serif !important;
}

html .hero h1 {
  font-size: clamp(4rem, 6.55vw, 7.35rem) !important;
  font-weight: 600 !important;
  line-height: 0.84 !important;
  letter-spacing: -0.06em !important;
  transform: translate3d(
    calc(var(--studio-pointer-x, 0) * 0.28),
    calc(var(--studio-pointer-y, 0) * 0.28),
    0
  ) !important;
  filter: none !important;
  text-shadow: 0 0 36px rgba(207, 255, 65, 0.045) !important;
}

html .section-title,
html .cta-card h2 {
  max-width: 1160px !important;
  font-size: clamp(3.45rem, 6.35vw, 7.1rem) !important;
  font-weight: 500 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.052em !important;
}

html .section-subtitle,
html .pricing-intro {
  max-width: 66ch !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.72 !important;
}

html .article-container .post-cta {
  padding: clamp(2rem, 4vw, 3.5rem) !important;
}

html .section-label,
html .hero-badge,
html .hero-summary-label,
html .pricing-tier,
html .pricing-badge {
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

html .btn {
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
}

html main:not(.article-container) > section:not(.hero) {
  padding-top: clamp(104px, 9vw, 152px) !important;
  padding-bottom: clamp(104px, 9vw, 152px) !important;
}

/* Keep the hero's signal language, but let it sit behind the message. */
html .hero::before {
  opacity: 0.28 !important;
  transform: translate3d(
    calc(var(--studio-pointer-x, 0) * -0.24),
    calc(var(--studio-pointer-y, 0) * -0.24),
    0
  ) !important;
  animation-duration: 24s !important;
}

html .studio-signal-panel {
  opacity: 0.32 !important;
  transform: translate3d(
    calc(var(--studio-pointer-x, 0) * -0.22),
    calc(var(--studio-pointer-y, 0) * -0.18),
    0
  ) !important;
}

html .studio-signal-panel::before {
  animation-duration: 15s !important;
}

html .studio-signal-panel::after {
  animation-duration: 14s !important;
}

html .studio-signal-panel span {
  animation-duration: 10s !important;
}

html .studio-signal-panel i {
  animation-duration: 9s !important;
}

html .studio-flow-field {
  opacity: 0.3 !important;
}

html .studio-flow-field span {
  animation-name: refined-flow-line !important;
  animation-duration: 24s !important;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) !important;
  animation-delay: calc(var(--flow-index, 0) * -2.7s) !important;
}

html .studio-flow-field span:nth-child(3n) {
  animation-duration: 29s !important;
}

html .studio-flow-field span:nth-child(4n) {
  animation-duration: 21s !important;
}

html .studio-flow-field span:nth-child(n + 7) {
  display: none !important;
}

html .hero h1 .hero-kinetic-word {
  animation-duration: 0.72s !important;
  animation-delay: calc(0.12s + (var(--line-index, 0) * 105ms) + (var(--word-index, 0) * 58ms)) !important;
}

html .studio-marquee-track {
  animation-duration: 78s !important;
}

html .studio-section-sweep {
  opacity: 0.24 !important;
  animation-duration: 30s !important;
}

html .hero-summary-card::after {
  opacity: 0.08 !important;
  animation-duration: 30s !important;
}

html :is(.feature-card, .step, .trust-item, .support-card)::after {
  opacity: 0.13 !important;
  animation-duration: 26s !important;
}

html :is(.feature-card, .step, .trust-item, .support-card):hover::after {
  opacity: 0.46 !important;
}

html .studio-card-art::before {
  opacity: 0.5 !important;
  animation-duration: 18s !important;
}

html .studio-card-art::after {
  opacity: 0.56 !important;
}

html .output-console::before {
  opacity: 0.28 !important;
  animation-duration: 24s !important;
}

html .output-console::after {
  opacity: 0.1 !important;
  animation-duration: 18s !important;
}

html .pricing-card.is-explorer-active {
  animation-duration: 9s !important;
}

html .visibility-map::before {
  opacity: 0.48 !important;
  animation-duration: 28s !important;
}

html .visibility-map::after {
  opacity: 0.34 !important;
  animation-duration: 26s !important;
}

html .visibility-orbit-one {
  animation-duration: 46s !important;
}

html .visibility-orbit-two {
  animation-duration: 38s !important;
}

html .visibility-scanline {
  animation-duration: 15s !important;
}

html .studio-scene-rail {
  opacity: 0.38 !important;
}

@media (min-width: 981px) {
  html .studio-flagship-scene {
    min-height: 140svh !important;
  }
}

/* Four-part stories become deliberate rails instead of compressed grids. */
html .refined-rail-cue {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: clamp(2.2rem, 4vw, 4rem) 0 1rem;
  color: var(--studio-muted);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html .offer-stack-cue.refined-replaced-cue {
  display: none !important;
}

html .section-inner:has(> .refined-story-rail) > .offer-stack-cue {
  display: none !important;
}

html .refined-rail-cue strong {
  color: var(--studio-accent);
  font-weight: 700;
}

html .refined-rail-progress {
  height: 1px;
  overflow: hidden;
  background: rgba(207, 255, 65, 0.16);
}

html .refined-rail-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--studio-accent);
  transform: scaleX(var(--refined-rail-progress, 0.18));
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

html .refined-story-rail {
  display: flex !important;
  gap: 16px !important;
  margin-top: 0 !important;
  padding: 0 12vw 22px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--studio-accent) rgba(207, 255, 65, 0.1);
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 0 calc(100% - 72px), transparent 100%);
}

html .refined-story-rail::-webkit-scrollbar {
  height: 3px;
}

html .refined-story-rail::-webkit-scrollbar-track {
  background: rgba(207, 255, 65, 0.08);
}

html .refined-story-rail::-webkit-scrollbar-thumb {
  background: var(--studio-accent);
}

html .refined-story-rail > :is(.feature-card, .diagnostic-card, .card, .pricing-card, .support-card, .trust-item, .step, .panel) {
  flex: 0 0 min(46vw, 660px) !important;
  width: auto !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html #features .refined-story-rail > .feature-card {
  flex-basis: min(50vw, 720px) !important;
}

html #use-cases .refined-story-rail > .feature-card {
  min-height: 420px !important;
}

html .diagnostic-grid.refined-story-rail > .diagnostic-card {
  min-height: 440px !important;
}

@media (max-width: 980px) {
  html .hero h1 {
    transform: none !important;
  }

  html .refined-story-rail > :is(.feature-card, .diagnostic-card, .card, .pricing-card, .support-card, .trust-item, .step, .panel),
  html #features .refined-story-rail > .feature-card {
    flex-basis: min(78vw, 640px) !important;
  }
}

@media (max-width: 768px) {
  html main:not(.article-container) > section:not(.hero) {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }

  html .visibility-map-section .section-inner,
  html .pricing-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html :is(.visibility-map-copy, .pricing-header) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html .hero h1 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-block: 0.06em !important;
    font-size: clamp(3.05rem, 15vw, 4.35rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html .section-title,
  html .cta-card h2 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-block: 0.04em !important;
    font-size: clamp(2.4rem, 10.5vw, 3.75rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html :is(
    .feature-card h3,
    .diagnostic-card h3,
    .step h3,
    .trust-item h3,
    .support-card h2,
    .support-card h3,
    .panel h2,
    .panel h3,
    .pricing-name,
    .operation-card h3
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-block: 0.06em !important;
    line-height: 1.02 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html .refined-rail-cue {
    grid-template-columns: auto minmax(54px, 1fr) auto;
    gap: 0.7rem;
  }

  html .refined-story-rail {
    padding-right: 14vw !important;
    mask-image: linear-gradient(90deg, #000 0 calc(100% - 38px), transparent 100%);
  }

  html .refined-story-rail > :is(.feature-card, .diagnostic-card, .card, .pricing-card, .support-card, .trust-item, .step, .panel),
  html #features .refined-story-rail > .feature-card {
    flex-basis: 85vw !important;
  }

  html .studio-drag-strip > :first-child {
    animation: none !important;
  }

  html .offer-stack-cue::before,
  html .offer-stack-cue-motion span {
    animation-duration: 7s !important;
  }
}

@media (max-width: 360px) {
  html :is(.card h2, .card h3, .panel h2, .panel h3) {
    font-size: clamp(1.5rem, 7.4vw, 1.75rem) !important;
    letter-spacing: -0.035em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body::after,
  html .studio-flow-field span,
  html .studio-signal-panel::before,
  html .studio-signal-panel::after,
  html .studio-signal-panel span,
  html .studio-signal-panel i,
  html .visibility-map::before,
  html .visibility-map::after,
  html .visibility-orbit,
  html .visibility-scanline {
    animation: none !important;
  }
}

@keyframes refined-body-scan {
  to {
    background-position: 0 96px, 0 0, 240px 0;
  }
}

@keyframes refined-flow-line {
  0% {
    opacity: 0;
    transform: translate3d(-8vw, 0, 0) scaleX(0.52);
  }

  14% {
    opacity: 0.28;
  }

  70% {
    opacity: 0.34;
  }

  100% {
    opacity: 0;
    transform: translate3d(112vw, calc((var(--flow-index, 0) - 4) * 0.12rem), 0) scaleX(0.9);
  }
}