/* Precursor Signal — the hero's grammar, continued down the page
   The hero establishes two things the sections below were not speaking:
     1. a 26px dot ground (radial-gradient #E3DED4 1.4px over Bone)
     2. a bone-glass panel — 60% bone, blur(16px) saturate(1.1), a white
        hairline, an inset white highlight, a green ring, 8px corners
   Everything here restates those two ideas further down, so the page reads as
   one surface rather than a hero followed by unrelated blocks. */

/* ---------- 1. the ground continues ---------- */
#page-landing > .wrap,
#page-landing > .light-section,
#page-method, #page-product, #page-analytics, #page-newsletter, #page-issue {
  background-color: var(--bone);
  background-image: radial-gradient(#E3DED4 1.4px, rgba(0,0,0,0) 1.5px);
  background-size: 26px 26px;
  background-position: -1px -1px;
}
/* the mesh sections carry the same dots, not a line grid */
.mesh-grid {
  background-image: radial-gradient(#E3DED4 1.4px, rgba(0,0,0,0) 1.5px) !important;
  background-size: 26px 26px !important;
  background-position: -1px -1px !important;
  opacity: 0.9 !important;
}
/* dark bands already use the inverse dots — keep them in step */
.dark-section::before { background-size: 26px 26px !important; }

/* ---------- 2. the glass panel, restated ---------- */
.az-panel,
.login-card,
.sa-detail-figures,
.gate-teaser {
  background: rgba(247, 244, 238, 0.60) !important;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 0 0 1px rgba(124, 217, 107, 0.16),
    0 18px 40px -22px rgba(27, 34, 56, 0.30),
    0 40px 80px -50px rgba(79, 107, 44, 0.35) !important;
}

/* the FAQ sits directly on the ground — no panel, no border, so the mesh wash
   behind it blends instead of being boxed in by a card edge */
.faq-list { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; }
.faq-list details { border-bottom: 1px solid rgba(27, 34, 56, 0.09); background: transparent !important; }
.faq-list details:last-child { border-bottom: none; }

/* dark-band panels get the inverse of the same treatment */
.dark-section .tier {
  background: rgba(35, 43, 68, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(124, 217, 107, 0.14),
    0 24px 50px -24px rgba(0, 0, 0, 0.55) !important;
}

/* ---------- 3. the veil, restated at every band edge ----------
   The hero fades its video into Bone at the bottom; each band below fades into
   the next the same way instead of butting against it. */
#page-landing > .wrap,
#page-landing > .light-section { position: relative; }
#page-landing > .wrap::before,
#page-landing > .light-section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, var(--bone), rgba(245,242,237,0));
}

@media (prefers-reduced-motion: reduce) {
  .az-panel, .tier { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- layer cards keep their original solid surfaces ----------
   Reverted from the glass restatement: over the mesh wash the translucent
   fill read as a grey slab rather than a card. */
#method .sa-card:not(.dark) {
  background: var(--card) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
#method .sa-card.dark {
  background: var(--navy) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--navy) !important;
  box-shadow: none !important;
}

/* tiers shown on a light band (analytics / newsletter paywalls) keep the
   navy card, not the dark-glass variant meant for the dark pricing band */
.light-section .tier { background: var(--navy) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--navy) !important; box-shadow: 0 18px 40px -22px rgba(27,34,56,0.35) !important; }