/* Precursor Signal — elevation pass
   Loaded last. Seven concerns, each addressed against what the audit actually
   found rather than applied blanket:

   1 HIERARCHY      body copy was 13.6px under a 29.6px h2 — too flat a step to
                    guide the eye; section rhythm was 0px on some bands and 65px
                    on others. Both are now a single scale.
   2 TYPOGRAPHY     measure capped near 65ch, looser leading on prose, tighter
                    tracking as size grows, tabular numerals everywhere numbers
                    are compared.
   3 COLOR          Stone Dark on Bone is 5.5:1 — fine for body, thin for 13px
                    labels, so small text steps to Navy-tinted ink. Signal Green
                    stays a 2% accent.
   4 MOTION         one shared easing + duration vocabulary, and a single focus
                    treatment across every interactive element.
   5 DS CONSISTENCY radii, hairlines, eyebrow and section-rule unified to tokens.
   6 PERFORMANCE    offscreen sections skip layout/paint; media decodes async.
   7 TRUST          sourced claims, dates and disclosures given real legibility;
                    the primary action reads as the only primary action.
*/

/* ============================================================ 1 · HIERARCHY */
:root {
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.14rem, 1.06rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem);
  --band: clamp(3.6rem, 7vw, 6.4rem);
}

/* one rhythm for every band, light or dark */
#page-landing > .wrap > section,
#page-landing > .light-section > .wrap,
#page-landing > .dark-section > .wrap { padding-top: var(--band); padding-bottom: var(--band); }
#page-landing > .dark-section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* the step from heading to body is what carries the hierarchy */
.section-head h2 { font-size: var(--step-2) !important; line-height: 1.12; letter-spacing: -0.03em; }
.section-head p, .mono-sub { font-size: var(--step-0) !important; line-height: 1.62; }
.hero h1 { font-size: var(--step-4) !important; line-height: 1.06; letter-spacing: -0.035em; }
.hero .lede { font-size: var(--step-1) !important; line-height: 1.55; }

/* ============================================================ 2 · TYPOGRAPHY */
.section-head p, .mono-sub, .nl-sum, .az-panel-sub, .recur-sub, .sa-desc {
  max-width: 66ch; margin-left: auto; margin-right: auto; text-wrap: pretty;
}
.newsletter-content p, .legal-body p, .product-body p { max-width: 68ch; line-height: 1.72; }
.section-head h2, .hero h1, .login-hero-line { text-wrap: balance; }
/* numbers that get compared must align */
.tier-price, .trust-item .num, .az-bar-value, .az-lb-up, .az-lb-down,
.recur-table td, .az-table td, .sa-df-val, .rt-hits, .rt-date {
  font-variant-numeric: tabular-nums;
}

/* ============================================================= 3 · COLOR */
/* Stone Dark holds 5.5:1 at body size; below ~14px it thins out, so small
   supporting text steps toward the Navy ink instead of going lighter. */
.eyebrow { color: #5A5449 !important; }
.rt-sub, .az-note, .login-demo-note, .paywall-meta, .foot-bottom, .sig-src {
  color: #5A5449;
}
.dark-section .eyebrow, .tier .tier-sub { color: #B9BECD !important; }

/* ============================================================= 4 · MOTION */
:root { --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
/* one focus treatment, everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--signal-dark) !important;
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* never animate a property that can strand content invisible */
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ==================================================== 5 · DS CONSISTENCY */
.az-panel, .recur-card, .login-card, .sa-card, .tier, .faq-list details,
.paywall-block, .checkout-summary, .gate-teaser { border-radius: var(--radius-lg); }
input, select, textarea, .btn, .pill, .rt-chip, .az-lb-tag { border-radius: var(--radius-md); }
/* the section rule is the brand's one repeated ornament — same everywhere */
.section-head::after { width: 34px; height: 2px; border-radius: 1px; margin-top: 1.1rem; }

/* =================================================== 6 · PERFORMANCE */
/* NOTE: content-visibility:auto was tried here and removed. Skipped subtrees
   stop the reveal IntersectionObserver from resolving, which left revealed
   blocks stranded at opacity 0 — a paint saving is not worth invisible
   content. The reveals already avoid work offscreen via their own observer. */
.hero-video, .login-video { will-change: transform; }
img { max-width: 100%; height: auto; }

/* ================================================ 7 · TRUST / CONVERSION */
/* a sourced number and its citation should read as one unit, and the date
   should never be the first thing to disappear */
.sig-src, .rt-date, .az-note { letter-spacing: 0.01em; }
.az-note { max-width: 74ch; margin-left: auto; margin-right: auto; }
/* one primary action per view: ghost buttons stay quiet next to it */
.btn-ghost { background: transparent; }
.btn-primary { font-weight: 700; }
/* the paywall is an honest statement, not a nag — give it room to be read */
.paywall-block { padding: clamp(1.6rem, 4vw, 2.4rem); }
.paywall-block p { max-width: 56ch; margin-left: auto; margin-right: auto; line-height: 1.65; }
/* exclusions and corrections carry the warn colour the spec reserves for them */
.gate.g-warn, .pill.warn { color: var(--warn); }

/* ===================================================== responsive polish */
@media (max-width: 640px) {
  :root { --band: clamp(2.6rem, 9vw, 3.6rem); }
  .section-head p, .mono-sub { font-size: var(--step--1) !important; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- solid buttons keep their label on hover ----------
   The global a:hover turns links Navy, which on a Navy button made the label
   disappear into the fill. Anchor-buttons pin their own text colour. */
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active,
a.btn-primary:visited, .hero-cta, .hero-cta:hover, .hero-cta:focus, .hero-cta:active {
  color: var(--bone) !important;
}
a.btn-primary span, .hero-cta span,
a.btn-primary:hover span, .hero-cta:hover span { color: var(--bone) !important; }
a.btn-primary svg, .hero-cta svg,
a.btn-primary:hover svg, .hero-cta:hover svg { stroke: var(--bone) !important; color: var(--bone) !important; }
/* the green tier CTA on the dark band behaves the same way */
.tier a.btn, .tier a.btn:hover, .tier a.btn span, .tier a.btn:hover span { color: var(--bone) !important; }
/* ghost buttons invert to the ink colour, never to the accent */
a.btn-ghost, a.btn-ghost:hover, a.btn-ghost span, a.btn-ghost:hover span { color: var(--navy) !important; }

/* ---------- member login sits on the landing page's dot ground ---------- */
#page-login.login-page {
  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;
}

/* ---------- wordmark: the supplied lockup ----------
   Rounded geometric sans, "Precursor" in Navy and "Signal" in the brand green,
   matching the artwork provided. Overrides the earlier grotesque treatment. */
/* the supplied lockup, used as provided: the mark and the wordmark are the
   original artwork files, with only their paper background knocked out so they
   sit on the header rather than in a pale box. */
.wordmark img { display: block; width: auto; }
.wm-mark { height: 44px !important; }
.wm-word { height: 30px !important; }
.wordmark a:hover .wm-mark { filter: drop-shadow(0 0 6px rgba(124, 217, 107, 0.45)); }
.wordmark a img { transition: filter var(--dur-base) var(--ease-standard); }
@media (max-width: 1024px) { .wm-mark { height: 38px !important; } .wm-word { height: 26px !important; } }
@media (max-width: 640px) { .wm-mark { height: 32px !important; } .wm-word { height: 22px !important; } }

/* ---------- landing signal panels: the reference treatment ---------- */
.recur-card { padding: 1.7rem 1.6rem 1.5rem !important; }
.recur-head { gap: 0.7rem !important; margin-bottom: 0.55rem !important; }
.recur-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--signal-dim); border: 1px solid rgba(124,217,107,0.5);
}
.recur-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--signal-dark); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.recur-title { font-size: 1.24rem !important; font-weight: 800 !important; letter-spacing: -0.025em !important; }
.recur-sub { font-size: 0.9rem !important; line-height: 1.55 !important; margin-bottom: 1.25rem !important; max-width: 52ch; }

.recur-table th {
  font-size: 0.72rem !important; letter-spacing: 0.09em !important;
  color: var(--signal-dark) !important; padding-bottom: 0.7rem !important;
  border-bottom: 1px solid var(--line) !important;
}
.recur-table td { padding: 0.95rem 0.55rem !important; vertical-align: middle; }
/* alternating tint, as in the reference */
.recur-table tbody tr:nth-child(even) { background: rgba(27, 34, 56, 0.028); }
.recur-table tbody tr:hover { background: rgba(124, 217, 107, 0.10); }

/* layer cell: green rule, icon, name */
.rt-layer { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; padding-left: 0.7rem; }
.rt-layer svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rt-layer::before { width: 3px; border-radius: 2px; opacity: 1; background: var(--signal-dark); }

/* ticker chips: a proper grid of outlined pills */
.rt-chips { display: grid; grid-template-columns: repeat(4, max-content); gap: 0.5rem 0.6rem; justify-content: start; }
.rt-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; border: 1px solid rgba(124,217,107,0.55) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.42rem 0.8rem !important; font-size: 0.9rem !important; font-weight: 700;
  color: var(--navy); letter-spacing: -0.01em;
}
.rt-chip:hover { background: var(--signal-dim) !important; border-color: var(--signal-dark) !important; transform: none; }
.rt-more { display: block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }

/* right-hand column */
.rt-date { display: block; font-size: 0.95rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rt-sub { display: block; font-size: 0.85rem !important; color: var(--muted); margin-top: 0.15rem; }
.rt-ticker { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); display: block; }
.rt-hits { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--signal-dark) !important; }
#repeat-cross-body td { line-height: 1.45; }
@media (max-width: 900px) { .rt-chips { grid-template-columns: repeat(3, max-content); } }
@media (max-width: 640px) { .rt-chips { grid-template-columns: repeat(2, max-content); } }

/* panel titles and layer names use the rounded face from the supplied artwork */
.recur-title, .rt-layer, .rt-ticker {
  font-family: 'Quicksand', 'Google Sans Flex', system-ui, sans-serif !important;
}
.recur-title { font-weight: 700 !important; font-size: 1.3rem !important; letter-spacing: -0.01em !important; }
.rt-layer { font-weight: 700 !important; font-size: 1.02rem !important; letter-spacing: -0.005em !important; }
.rt-ticker { font-weight: 700 !important; letter-spacing: -0.005em !important; }
.recur-ico { width: 36px; height: 36px; flex-basis: 36px; }
.recur-ico svg { width: 19px; height: 19px; }