/* ============================================================================
   Landing page v2 — layout only. Every colour, face and radius comes from
   styles-v2.css, so the marketing page and the app cannot drift apart: change a
   token once and both move. Nothing here redefines a token.
   ========================================================================= */

.lp-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 15px clamp(18px, 5vw, 52px);
  background: rgba(5, 7, 6, .72); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.lp-brandlink { display: flex; align-items: center; gap: 13px; color: var(--ink); }
.lp-navlinks { display: none; align-items: center; gap: 26px; font-size: 11.5px; letter-spacing: .05em; }
.lp-navlinks a { color: var(--ink-3); }
.lp-navlinks a:hover { color: var(--ink); }
@media (min-width: 900px) { .lp-navlinks { display: flex; } }

/* ------------------------------- hero ---------------------------------- */
.lp-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.lp-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: crosshair; }
/* Two veils, not one: a radial that sinks the field behind the text and a
   left-to-right wash that guarantees contrast on the headline whatever the
   particles are doing underneath. */
.lp-hero-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(115% 90% at 72% 48%, rgba(5,7,6,0) 0%, rgba(5,7,6,.5) 52%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(5,7,6,.32) 44%, rgba(5,7,6,0) 72%);
}
.lp-hero-inner {
  position: relative; z-index: 3; width: 100%;
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 52px);
  pointer-events: none;
}
.lp-hero-inner .v2-pill, .lp-cta { pointer-events: auto; }
#lpH1 { margin: 34px 0 0; line-height: .9; letter-spacing: -.02em; }
.lp-h1a { display: block; font-size: clamp(38px, 7.6vw, 104px); will-change: transform; }
/* Instrument Serif italic drops 0.216em below the baseline (measured with
   TextMetrics, not guessed). A 0.84 line-height does NOT reserve that, so the
   descenders of "Copiable trading." were landing 7px INSIDE the kicker below —
   the tail of the g crossing the accent line. padding-bottom puts the ink back
   inside the box so normal flow can do its job; it is in em, so it holds at
   every clamp() size instead of only at the width I happened to test. */
.lp-h1b {
  display: inline-block; font-size: clamp(50px, 10.4vw, 140px); line-height: .84;
  padding-bottom: .14em;
  color: #c9c1ac; opacity: .85;
  /* Left edge: the italic C carries more side bearing than the sans N
     (0.055em vs 0.040em at their own sizes), so an x-nudge on top of that
     pushed the second line visibly right of the first. What has to line up is
     the INK, not the boxes: pull the box left by the bearing difference,
     0.055 − 0.040×(104/140) ≈ 0.025em, and keep only the optical y/rotation
     the design asked for. The value is the one that MEASURED flush: rasterising
     both lines and comparing their first non-transparent column, the computed
     0.025em over-shot to 2.5px of overhang, so it is tuned to 0.014em — which
     leaves the round C about 1px proud of the flat N, the standard optical
     overhang for a round glyph rather than a mathematical zero. */
  margin-left: -.014em;
  transform: translateY(2px) rotate(-2.5deg);
  transform-origin: left center;
}
.lp-kicker { margin-top: 14px; font-size: clamp(15px, 1.8vw, 20px); color: var(--acc); }
.lp-sub { max-width: 520px; margin: 30px 0 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--ink-2); }
.lp-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.lp-hint { margin-top: 24px; font-size: 10.5px; letter-spacing: .14em; color: var(--ink-4); }

/* ----------------------------- sections -------------------------------- */
.lp-sec { max-width: 1180px; margin: 0 auto; padding: clamp(80px, 12vh, 150px) clamp(18px, 5vw, 52px); }
/* Full-bleed section: the tint and the rule run edge to edge, the CONTENT
   still lines up with the constrained sections above and below.

   It used to centre each child with `.lp-alt > * { max-width: 1180px;
   margin-inline: auto }`. That silently failed on exactly the two children
   that set their own margin — .lp-h2 (`margin: 0`) and .lp-lead — so in
   sections 02 and 04 the headline and its lead sat 78px LEFT of their own
   eyebrow and of the cards under them, while 01/03/05 were fine. A child
   that declares `margin` is not a bug; relying on auto-margins surviving it
   is. So the content BOX is centred here instead, once, and no child can
   opt out of it. */
.lp-alt {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
  max-width: none;
  /* The content box must match what a .lp-sec ENDS UP with, which is 1180
     minus its own padding — not 1180. Centring on 1180 alone left the
     full-bleed sections 52px to the left of every constrained one: each
     section was internally consistent, so it only shows when you measure
     across them. */
  padding-left: calc(max(0px, (100% - 1180px) / 2) + clamp(18px, 5vw, 52px));
  padding-right: calc(max(0px, (100% - 1180px) / 2) + clamp(18px, 5vw, 52px));
}
.lp-eyebrow { font-size: 10.5px; letter-spacing: .2em; color: var(--acc); margin-bottom: 22px; }
.lp-h2 { font-size: clamp(30px, 5vw, 64px); line-height: .98; margin: 0; max-width: 900px; }
.lp-em { color: #c9c1ac; font-size: 1.06em; }
.lp-lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 24px 0 0; max-width: 600px; }

.lp-kpis {
  margin-top: 44px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.lp-kpis .v { font-size: clamp(26px, 3.2vw, 38px); }

.lp-2col { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: stretch; }
.lp-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 899px) { .lp-2col, .lp-3col { grid-template-columns: 1fr; } }

.lp-pillar { border-top: 1px solid var(--acc-line); padding-top: 22px; }
.lp-pillar-t { font-weight: 700; font-size: 18px; }
.lp-pillar-d { color: var(--ink-3); font-size: 14px; line-height: 1.5; margin-top: 12px; }

.lp-step { display: flex; gap: 14px; }
.lp-step > span {
  font-weight: 700; font-size: 13px; color: var(--acc-ink); background: var(--acc);
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-step b { font-size: 15px; }
.lp-step p { color: var(--ink-3); font-size: 13px; line-height: 1.5; margin: 5px 0 0; }

/* ------------------------------- final --------------------------------- */
.lp-final {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(90px, 15vh, 180px) clamp(18px, 5vw, 52px);
  border-top: 1px solid var(--line);
}
.lp-final canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; z-index: 0; cursor: crosshair; }
.lp-final-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 90% at 50% 50%, rgba(5,7,6,.1), var(--bg) 76%);
}
.lp-final-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; pointer-events: none; }
.lp-final-inner a { pointer-events: auto; }
.lp-final-inner h2 { line-height: .92; margin: 0; font-size: clamp(30px, 6vw, 78px); }

.lp-foot { border-top: 1px solid var(--line); padding: 44px clamp(18px, 5vw, 52px); }
.lp-foot-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: flex-start; justify-content: space-between;
}
.lp-foot a { color: var(--ink-3); }
.lp-foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .lp-h1a, .lp-h1b { transform: none !important; }
}