/* ---------- routed views keep their side breathing room ----------
   renderAnalytics()/renderNewsletterIndex()/renderNewsletterIssue() each set
   an inline style="padding: clamp(...) 0" on their own outer .wrap, which
   zeroes the LEFT/RIGHT padding .wrap's own class rule normally provides --
   only the class's vertical padding was meant to be overridden. An inline
   style always wins over a plain CSS rule regardless of selector specificity,
   so only !important can restore it. Most visible on a narrow phone, where
   .wrap's max-width no longer does the job of keeping text off the screen
   edge on its own -- but this is unconditional (not one breakpoint) since
   the same zeroed padding is wrong at every width. */
#page-analytics .wrap, #page-newsletter .wrap, #page-issue .wrap {
  padding-left: clamp(1.25rem, 4vw, 3rem) !important;
  padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}

/* ---------- anchored sections land directly under the sticky header ----------
   scroll-padding was 92px against a ~133px header, and #sectors carried its own
   top padding on top of that, so a nav click left a band of empty ground above
   the heading. The padding is measured from the header's real height. */
/* Scroll padding = header height + a hair. The breathing room under the bar is
   the SECTION's own top padding, not extra scroll offset -- offsetting further
   would scroll past the section's top edge and reveal the marquee above it. */
html { scroll-padding-top: 142px !important; }
#method, #sectors, #signals { scroll-margin-top: 142px !important; }
#method { padding-top: 3.2rem !important; }
#sectors { padding-top: 3.2rem !important; }
#sectors .section-head { margin-top: 0 !important; margin-bottom: 0.6rem !important; }
/* pull the orbit up under the heading so the ring sits centred in the section
   rather than pushed to the bottom edge */
/* the ring's own box is square, but the labels sit BELOW each node, so the
   visual mass hangs low. A negative bottom margin pulls the block up and
   re-centres the ring in the section without crowding the heading. */
#sectors .sector-map { margin-top: 1.1rem !important; margin-bottom: -2.4rem !important; }
#sectors { padding-bottom: 6.2rem !important; }
@media (max-width: 1024px) { html { scroll-padding-top: 126px !important; } #method, #sectors, #signals { scroll-margin-top: 126px !important; } }
@media (max-width: 640px) { html { scroll-padding-top: 104px !important; } #method, #sectors, #signals { scroll-margin-top: 104px !important; } #method, #sectors, #signals { padding-top: 2.2rem !important; } }

/* ---------- member login: hero line beside the sign-in card ---------- */
.login-page { max-width: 68rem !important; text-align: left !important; }
/* showPage() writes display:block inline on the routed container, so the grid
   needs !important to win over it -- without this the two columns stack. */
/* :not([style*="none"]) matters -- the router hides routed pages with an inline
   display:none, and a bare "display:grid !important" beat it, leaving the login
   page rendered underneath every other view. */
#page-login.login-page:not([style*="none"]) {
  display: grid !important;
  grid-template-columns: 1.05fr 25rem;
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
  justify-content: center;
  max-width: 78rem !important;
  min-height: calc(100vh - 190px);
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem) !important;
}
#page-login .login-hero { text-align: left; }
.login-hero-line { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 1.2rem; color: var(--ink); }
.login-hero-line em { font-style: normal; color: var(--signal-dark); }
.login-hero-sub { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 44ch; margin: 0; }
#page-login .login-card { margin: 0; max-width: 25rem; padding: 2.1rem 1.8rem !important; }
#page-login .login-card h1 { font-size: 1.5rem; }
.login-google { width: 100%; justify-content: center; margin-bottom: 1.4rem; font-weight: 600; }
#page-login .login-back { display: none; }
@media (max-width: 900px) {
  #page-login.login-page { grid-template-columns: 1fr !important; }
  #page-login .login-hero { text-align: center; }
  #page-login .login-hero-sub { margin: 0 auto; }
  #page-login .login-card { max-width: 23rem; margin: 0 auto; }
}

/* Full-bleed blocks were sized with 100vw, which includes the scrollbar and
   so overhangs the content box by its width on every desktop browser. Their
   parents are already full-width, so 100% gives the same bleed with no
   overhang and no sideways scroll. */
#page-landing > .atmosphere,
#page-landing > .marquee,
#page-landing > .light-section,
#page-landing > .dark-section,
.hero-veil {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}
/* .wrap is the CONTENT container, not a bleed band — it must keep its
   max-width and centring, or every section stretches to the window edge. */
#page-landing > .wrap { margin-left: auto !important; margin-right: auto !important; }

/* the mesh wash bleeds well past its section by design; clip horizontally so
   it can never widen the document and create a sideways scroll on any device.
   overflow-x: clip (not hidden) leaves position: sticky working. */
/* NOTE: do not clip the mesh host sections (#faq/#method/#sectors). The wash
   is meant to bleed past them; clipping it there cuts hard vertical edges and
   the gradient stops reading as background. Clipping at body level alone is
   enough to stop any sideways scroll. */
body { overflow-x: clip; }

/* Precursor Signal — phone & tablet refinement
   Loaded last so it can correct the desktop-first rules in every earlier file.
   Two breakpoints: tablet at 1024px, phone at 640px, with a narrow-phone pass
   at 400px. Touch targets are kept at 44px minimum throughout. */

/* ============================================================ TABLET */
@media (max-width: 1024px) {
  /* header: nav drops to its own scrollable row under the wordmark */
  header.site {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-top: 0.6rem; padding-bottom: 0.6rem;
  }
  header.site .wordmark { flex: 1 1 auto; }
  header.site .header-auth { flex: 0 0 auto; margin-left: auto; }
  nav.primary {
    order: 3; flex: 1 0 100%;
    overflow-x: auto; overflow-y: hidden;
    gap: 1.25rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  nav.primary::-webkit-scrollbar { display: none; }
  nav.primary a { white-space: nowrap; padding-top: 0.5rem; padding-bottom: 0.5rem; }

  /* two-up grids collapse */
  .az-grid, .recur-wrap, .tiers { grid-template-columns: 1fr !important; }
  .trust, .az-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* the sector map gives back its outer margin */
  #sectors .sec-left { max-width: 100% !important; }
  .sector-map {
    --map-radius: clamp(185px, 36vw, 300px) !important;
    --map-radius-inner: clamp(114px, 22vw, 180px) !important;
    max-width: 700px !important;
  }
  .sm-node-label { font-size: 0.72rem !important; max-width: 7.4rem !important; }

  /* any wide table scrolls rather than forcing the page wide */
  .recur-scroll, .az-table-wrap, .signals-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .recur-table, .az-table { min-width: 520px; }

  .ghost-word { font-size: clamp(3.5rem, 13vw, 6rem) !important; }
}

/* ============================================================= PHONE */
@media (max-width: 640px) {
  /* the auth cluster keeps only its primary action */
  header.site .auth-email, header.site .auth-signout { display: none !important; }
  header.site .btn { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
  .wordmark-text { font-size: 0.95rem !important; }

  /* hero */
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important; line-height: 1.12 !important; }
  .h1-l1 { white-space: normal !important; }
  .hero .lede { font-size: 0.95rem; }
  .hero-cta { width: 100%; max-width: 340px; min-height: 48px; }

  /* every grid to a single column */
  .trust, .az-kpi-row, .sa-cards, .feature-grid, .method-grid, .research-grid, .cards {
    grid-template-columns: 1fr !important;
  }
  .stats-strip { grid-template-columns: 1fr 1fr !important; }

  /* panels lose their generous desktop padding */
  .recur-card, .az-panel, .faq-list, .login-card { padding: 1.1rem 1rem !important; }
  .faq-list { padding: 0.2rem 1rem !important; }
  .wrap { padding-left: 1.1rem; padding-right: 1.1rem; }
  section { padding: clamp(2.2rem, 8vw, 3rem) 0; }

  /* section headings */
  .section-head h2 { font-size: clamp(1.5rem, 6.5vw, 1.95rem) !important; }
  .section-head p { font-size: 0.9rem; }

  /* sticky CTA fits the screen and never covers a tap target */
  .cine-cta {
    left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
    transform: translateY(140%); max-width: none; width: auto;
    border-radius: var(--radius-lg);
    padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  }
  .cine-cta.is-visible { transform: translateY(0); }
  .cine-cta .btn { min-height: 44px; }

  /* charts keep a usable height */
  .az-cadence, .az-eq { height: 9rem; }

  /* the marquee is decorative — let it be quieter on a small screen */
  .marquee-track { font-size: 0.78rem; }

  /* footer */
  .ghost-word { font-size: clamp(2.6rem, 16vw, 4rem) !important; }
  .footer-nav { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .footer-nav a, .foot-bottom a { min-height: 44px; display: inline-flex; align-items: center; }

  /* every interactive row is thumb-sized */
  .faq-list summary { min-height: 48px; display: flex; align-items: center; }
  nav.primary a { min-height: 44px; display: inline-flex; align-items: center; }

  /* the mesh wash is heavy on mobile GPUs for what it adds */
  .mesh-bg { display: none !important; }
}

/* ====================================================== NARROW PHONE */
@media (max-width: 400px) {
  .stats-strip { grid-template-columns: 1fr !important; }
  .cine-cta-copy span { display: none; }
  .cine-cta-copy { font-size: 0.78rem; }
  .hero h1 { font-size: clamp(1.7rem, 9vw, 2.1rem) !important; }
  .recur-table, .az-table { min-width: 440px; }
}

/* ================================================== TOUCH, ANY WIDTH */
@media (hover: none) {
  /* hover-only affordances would otherwise stay stuck on after a tap */
  .sa-card:hover, .az-panel:hover, .feature:hover, .r-card:hover, .tier:hover,
  .recur-card:hover { transform: none !important; }
  .marquee:hover .marquee-track { animation-play-state: running; }
}

/* the two footer links sit at opposite ends of the card */
#page-login .login-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }

/* ---------- routed pages sit on one even ground ----------
   .light-section paints Sunken (#EDE9E1) while the page ground is Bone
   (#F5F2ED), so the section's bottom edge showed as a hard line across the
   middle of any short page. Same ground, and tall enough to fill the viewport. */
#page-newsletter > .light-section,
#page-issue > .light-section,
#page-analytics > .light-section,
#page-pricing > .light-section {
  background: var(--bone) !important;
  min-height: calc(100vh - 150px);
}

/* ---------- newsletter cards: the issue lifts and opens on hover ----------
   A green rule wipes in from the left, the card rises and gains a Signal-Green
   glow, and an arrow slides out of the date row — the card reads as a door,
   not a static block. Mechanical timings, no bounce. */
#page-newsletter a.az-panel {
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
#page-newsletter a.az-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--signal-dark);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.34s var(--ease-out);
}
#page-newsletter a.az-panel::after {
  content: "\2192"; position: absolute; right: 1.3rem; top: 1.15rem;
  font-weight: 700; color: var(--signal-dark);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out);
}
#page-newsletter a.az-panel:hover,
#page-newsletter a.az-panel:focus-visible {
  transform: translateY(-4px);
  border-color: var(--signal-dark) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 22px 44px -22px rgba(27, 34, 56, 0.34), var(--glow-signal) !important;
}
#page-newsletter a.az-panel:hover::before,
#page-newsletter a.az-panel:focus-visible::before { transform: scaleY(1); }
#page-newsletter a.az-panel:hover::after,
#page-newsletter a.az-panel:focus-visible::after { opacity: 1; transform: translateX(0); }
#page-newsletter a.az-panel:active { transform: translateY(-1px) scale(0.997); }
/* the title picks up the accent as the card opens */
#page-newsletter a.az-panel .az-panel-title { transition: color var(--dur-base) var(--ease-standard); }
#page-newsletter a.az-panel:hover .az-panel-title { color: var(--signal-dark); }
@media (prefers-reduced-motion: reduce) {
  #page-newsletter a.az-panel,
  #page-newsletter a.az-panel::before,
  #page-newsletter a.az-panel::after { transition: none !important; }
  #page-newsletter a.az-panel:hover { transform: none; }
}

/* ---------- method layer cards: same hover motion as the newsletter issues ---------- */
#method .sa-card {
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
#method .sa-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--signal-dark);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.34s var(--ease-out);
  z-index: 2;
}
#method .sa-card::after {
  content: "\2192"; position: absolute; right: 1.1rem; top: 1rem;
  font-weight: 700; color: var(--signal-dark);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out);
  z-index: 2;
}
#method .sa-card:hover,
#method .sa-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--signal-dark) !important;
  box-shadow: 0 22px 44px -22px rgba(27, 34, 56, 0.34), var(--glow-signal) !important;
}
#method .sa-card:not(.dark):hover { background: #FFFFFF !important; }
#method .sa-card:hover::before, #method .sa-card:focus-within::before { transform: scaleY(1); }
#method .sa-card:hover::after, #method .sa-card:focus-within::after { opacity: 1; transform: translateX(0); }
#method .sa-card:active { transform: translateY(-1px) scale(0.997); }
/* the layer name picks up the accent, like the issue title does */
#method .sa-card .sa-name, #method .sa-card h3 { transition: color var(--dur-base) var(--ease-standard); }
#method .sa-card:not(.dark):hover .sa-name, #method .sa-card:not(.dark):hover h3 { color: var(--signal-dark); }
/* on the navy card the accent has to be the light green to stay legible */
#method .sa-card.dark::before, #method .sa-card.dark::after { color: var(--signal); background-color: var(--signal); }
#method .sa-card.dark::after { background: none; color: var(--signal); }
#method .sa-card.dark:hover .sa-name, #method .sa-card.dark:hover h3 { color: var(--signal); }
@media (prefers-reduced-motion: reduce) {
  #method .sa-card, #method .sa-card::before, #method .sa-card::after { transition: none !important; }
  #method .sa-card:hover { transform: none; }
}