/* ETFPulseIQ — public landing page (etfpulseiq.com).
   Loaded after advisor.css, which is the single source of truth for colour,
   radius and depth: every value below spends a token from its :root. The app
   itself is dense by design; this page is the opposite — an editorial, wide-
   gutter marketing surface — so it owns its own type scale rather than reusing
   the app's --fs-* ramp (which bottoms out at 11px for data tables).

   Everything here is prefixed .lp- so no rule can leak into the app shell. */

.lp {
  --lp-max: 72rem;
  --lp-gutter: clamp(1.25rem, 5vw, 2.5rem);
  /* Serif display face for headlines: the warm-paper palette reads editorial,
     and a system serif gets that with zero webfont bytes (and no external
     request, which the CSP would block anyway). */
  --lp-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;

  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

.lp__inner {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* ---- Typography ---------------------------------------------------------- */

.lp h1,
.lp h2,
.lp h3 {
  font-family: var(--lp-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--color-text);
  text-wrap: balance;
}

.lp-h1 { font-size: clamp(2.125rem, 4.4vw, 3.25rem); }
.lp-h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.lp-h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }

.lp-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 40rem;
  text-wrap: pretty;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-ring);
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.75rem;
}

.lp-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.lp-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-muted-light);
  margin-bottom: var(--s3);
}

.lp-body { color: var(--color-muted); line-height: 1.6; }

/* ---- Buttons ------------------------------------------------------------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .15s ease;
}

.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:disabled { transform: none; }

.lp-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.lp-btn--primary:hover { background: var(--color-primary-hover); }

.lp-btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.lp-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.lp-btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.lp-btn--block { width: 100%; }

/* ---- Nav ----------------------------------------------------------------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-appbar);
  background: rgba(244, 242, 234, 0.88);
  /* Safari (a primary target — this app is used on iPhone) still needs the
     prefixed property; without it the bar reads as flat translucent paper. */
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-nav.is-stuck {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 64px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
}
.lp-brand img { display: block; width: 26px; height: 26px; }
.lp-brand em { font-style: normal; color: var(--color-primary); }

.lp-nav__links { display: flex; align-items: center; gap: var(--s5); }

.lp-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
}
.lp-nav__link:hover { color: var(--color-primary); }

@media (max-width: 760px) {
  .lp-nav__links { display: none; }
}

/* ---- Sections ------------------------------------------------------------ */

.lp-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.lp-section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.lp-section--paper { background: var(--color-surface); border-block: 1px solid var(--color-border); }

.lp-section__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lp-section__head .lp-lede { margin-top: var(--s4); }

/* ---- Hero ---------------------------------------------------------------- */

.lp-hero {
  padding-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  background:
    radial-gradient(ellipse 60rem 32rem at 15% -10%, var(--color-primary-soft), transparent 70%),
    var(--color-bg);
}

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}

.lp-hero__copy > * + * { margin-top: var(--s5); }
.lp-hero__h1 em { font-style: italic; color: var(--color-primary); }

.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }

.lp-hero__note {
  font-size: 0.8125rem;
  color: var(--color-muted-light);
}

@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The Brief mock (hero visual) ---------------------------------------
   A faithful, static rendering of the product's morning Brief — built from the
   same tokens the real screen uses, so it can't drift into looking like a
   different product. Illustrative figures only; marked as such in the caption
   and hidden from assistive tech via the surrounding <figure>. */

.lp-mock {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.lp-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}
.lp-mock__dots { display: flex; gap: 6px; }
.lp-mock__dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-border-strong); display: block;
}
.lp-mock__url {
  font-size: var(--fs-hint);
  color: var(--color-muted-light);
  letter-spacing: 0.02em;
}

.lp-mock__body { padding: var(--s5); }

.lp-mock__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}
.lp-mock__title { font-family: var(--font-sans); font-size: var(--fs-title); font-weight: 700; }
.lp-mock__date { font-size: var(--fs-hint); color: var(--color-muted-light); }

.lp-mock__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
  margin-bottom: var(--s4);
}
.lp-mock__stat {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--s3);
}
.lp-mock__stat b { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.lp-mock__stat span { font-size: var(--fs-hint); color: var(--color-muted-light); }

.lp-mock__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--color-border);
}
.lp-mock__tag {
  font-size: var(--fs-hint); font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.lp-mock__tag--buy { background: var(--color-success-soft); color: var(--color-success); }
.lp-mock__tag--sell { background: var(--color-danger-soft); color: var(--color-danger); }
.lp-mock__tag--new { background: var(--color-warning-soft); color: var(--color-warning); }

.lp-mock__what { min-width: 0; }
.lp-mock__what b { display: block; font-size: var(--fs-body); font-weight: 600; }
.lp-mock__what span { font-size: var(--fs-hint); color: var(--color-muted-light); }

.lp-mock__delta { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-mock__delta--up { color: var(--color-success); }
.lp-mock__delta--down { color: var(--color-danger); }

.lp-figcaption {
  margin-top: var(--s3);
  font-size: var(--fs-hint);
  color: var(--color-muted-light);
  text-align: center;
}

/* ---- Latency ladder ------------------------------------------------------
   Replaces the old four-column proof strip, which listed features where the
   page needed an argument. Each row's bar is sized by `--w` in proportion to
   how stale that disclosure is, so the ETFPulseIQ row renders as a sliver
   against the others — the comparison IS the pitch, and it has to survive being
   skimmed. Figures are sourced in docs/disclosure-latency-rules.md. */

.lp-ladder {
  border-block: 1px solid var(--color-border);
  padding-block: var(--s8);
}

.lp-ladder__head { max-width: 46rem; margin-bottom: var(--s8); }

.lp-ladder__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}

.lp-ladder__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 11rem);
  align-items: center;
  gap: var(--s5);
}

.lp-ladder__label b {
  display: block;
  font-family: var(--lp-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lp-ladder__label span {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-meta);
  color: var(--color-muted-light);
  text-wrap: pretty;
}

/* The track is the full span of "worst case"; the fill is this row's share. */
.lp-ladder__track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  overflow: hidden;
}
.lp-ladder__track i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  /* Floor the fill wide enough to read as a stub of a bar. Below ~14px the
     pill radius rounds it into a dot, which looks like a rendering fault
     rather than "almost no delay at all". */
  min-width: 14px;
  border-radius: var(--radius-pill);
  /* Not --color-faint: these bars carry the section's argument, so they are
     content under WCAG 1.4.11 and need 3:1 against the track. faint (#a8a08e)
     on neutral-soft manages only 2.2:1; advisor.css marks it decorative-only. */
  background: var(--color-muted-light);
}

.lp-ladder__val {
  font-size: var(--fs-small);
  color: var(--color-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Staleness, to scale against a ~150-day worst case — see the table in
   docs/disclosure-latency-rules.md, which is the only place these are sourced.
   The three filing routes cluster together because they genuinely do: all are
   quarterly, and all land months after the positions they describe. That the
   bars are nearly equal is the finding, not a flaw in the scale. */
.lp-ladder__row--13f   { --w: 93%; }   /* ~139 days */
.lp-ladder__row--nport { --w: 100%; }  /* ~150 days */
.lp-ladder__row--sheet { --w: 80%; }   /* ~120 days */
.lp-ladder__row--now   { --w: 0.7%; }  /* 1 business day; min-width floors it */

/* The payoff row: the only coral on the ladder, so the eye lands there last. */
.lp-ladder__row--now .lp-ladder__label b { color: var(--color-primary); }
.lp-ladder__row--now .lp-ladder__track { background: var(--color-primary-soft); }
.lp-ladder__row--now .lp-ladder__track i { background: var(--color-primary); }
.lp-ladder__row--now .lp-ladder__val { color: var(--color-primary); font-weight: 600; }

.lp-ladder__foot {
  margin-top: var(--s8);
  max-width: 52rem;
  font-size: var(--fs-meta);
  line-height: 1.65;
  color: var(--color-muted-light);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  /* Label over bar, figure pinned right of the bar. Each row is its own grid,
     so the value column must be a FIXED width — sizing it to content (auto)
     lets "4–5 months old" and "yesterday's close" set different widths per row,
     which shifts each bar's start and destroys the shared baseline the whole
     comparison is read against. */
  .lp-ladder__row {
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    gap: var(--s2) var(--s4);
  }
  .lp-ladder__label { grid-column: 1 / -1; }
  .lp-ladder__val { text-align: right; }
}

/* ---- Steps --------------------------------------------------------------- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  counter-reset: lp-step;
}

.lp-step { border-top: 2px solid var(--color-text); padding-top: var(--s4); }
.lp-step__n {
  font-family: var(--lp-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--s2);
}
.lp-step h3 { margin-bottom: var(--s2); }
.lp-step p { font-size: var(--fs-body); color: var(--color-muted); line-height: 1.6; }

@media (max-width: 900px) { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- Feature grid -------------------------------------------------------- */

.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.lp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s5);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.lp-section--paper .lp-card { background: var(--color-surface-soft); }

.lp-card__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--s4);
}
.lp-card__icon svg { width: 19px; height: 19px; }
.lp-card h3 { margin-bottom: var(--s2); }
.lp-card p { font-size: var(--fs-body); color: var(--color-muted); line-height: 1.6; }

@media (max-width: 900px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lp-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Split (access request) ---------------------------------------------- */

.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .lp-split { grid-template-columns: minmax(0, 1fr); } }

.lp-list { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.lp-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-body);
  color: var(--color-muted);
  line-height: 1.55;
}
.lp-list li + li { margin-top: var(--s4); }
.lp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
}
.lp-list li b { color: var(--color-text); font-weight: 600; }

/* ---- Form ---------------------------------------------------------------- */

.lp-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.lp-section--paper .lp-form { background: var(--color-surface-soft); }

.lp-field { display: block; margin-bottom: var(--s4); }
.lp-field__label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: var(--s2);
}
.lp-field__label span { font-weight: 400; color: var(--color-faint); }

.lp-input {
  width: 100%;
  padding: 0.625rem 0.8125rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-input::placeholder { color: var(--color-faint); }
.lp-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}
textarea.lp-input { min-height: 6.5rem; resize: vertical; }

.lp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 520px) { .lp-field-row { grid-template-columns: 1fr; } }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lp-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.lp-form__foot { font-size: var(--fs-hint); color: var(--color-muted-light); margin-top: var(--s3); }

.lp-alert {
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-body);
  line-height: 1.5;
  margin-bottom: var(--s4);
}
.lp-alert--error { background: var(--color-danger-soft); color: var(--color-danger); }

.lp-success { text-align: center; padding: var(--s6) var(--s4); }
.lp-success__mark {
  width: 46px; height: 46px; margin: 0 auto var(--s4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
}
.lp-success__mark svg { width: 24px; height: 24px; }
.lp-success h3 { margin-bottom: var(--s2); }
.lp-success p { font-size: var(--fs-body); color: var(--color-muted); line-height: 1.6; }

/* ---- Closing CTA --------------------------------------------------------- */

.lp-cta {
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.lp-cta h2 { color: var(--color-bg); }
.lp-cta p {
  color: rgba(244, 242, 234, 0.72);
  margin: var(--s4) auto 0;
  max-width: 34rem;
  line-height: 1.6;
}
.lp-cta__row {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; margin-top: var(--s6);
}
.lp-cta .lp-btn--ghost {
  background: transparent;
  color: var(--color-bg);
  border-color: rgba(244, 242, 234, 0.4);
}
.lp-cta .lp-btn--ghost:hover { border-color: var(--color-bg); color: var(--color-bg); }

/* ---- Footer -------------------------------------------------------------- */

.lp-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--s8);
  background: var(--color-surface);
}
.lp-footer__top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4); justify-content: space-between;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--color-border);
}
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--s5); }
.lp-footer__links a {
  font-size: var(--fs-body); color: var(--color-muted); text-decoration: none;
}
.lp-footer__links a:hover { color: var(--color-primary); }

.lp-footer__legal { margin-top: var(--s5); }
.lp-footer__legal p {
  font-size: var(--fs-hint);
  color: var(--color-muted-light);
  line-height: 1.6;
  max-width: 58rem;
}
.lp-footer__copy { margin-top: var(--s4); font-size: var(--fs-hint); color: var(--color-faint); }

/* ---- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .lp-btn:hover, .lp-card:hover { transform: none; }
}