/* The landing page, and only the landing page.
 *
 * Ported from the approved preview board, which placed every section
 * absolutely on a 1440px canvas. Here the sections flow, so the page works at
 * any width; the desktop numbers (gaps, column widths, offsets) are the
 * board's, measured from its coordinates.
 *
 * Phone first. Everything stacks; the hero card sits below the pitch; the
 * chrome field shrinks behind the headline; tiles scroll sideways. min-width
 * queries add the tablet (720), the multi-column layout (1000) and the
 * two-column hero (1180). */

.lp, .lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
/* The landing page is brand chrome (spec 2026-09-27 §2), so its page hue is
 * the brand teal - it never takes an app page's hue. */
html[data-page="landing"] { --page-hue: var(--accent); }
/* `hidden` must win over `.btn { display: inline-flex }` - landing.js hides
 * the nav's Sign in that way when there is nothing to sign in to. */
.lp [hidden] { display: none !important; }

.lp { position: relative; overflow: hidden; }
/* Content-box so max-width is the board's 1200px of content, gutters extra.
 * Positioned so each section paints above the grain and ambient layers, as
 * every element on the absolutely-placed board did. */
.lp-sec { position: relative; box-sizing: content-box; max-width: 1200px;
  margin: 88px auto 0; padding: 0 24px; }

/* ------------------------------------------------------------------ nav */
.lp-navwrap { position: absolute; top: 22px; left: 0; right: 0; z-index: 5; }
.lp-navwrap .lp-sec { margin-top: 0; }
.lp-nav { height: 60px; border-radius: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 10px 0 14px; }
.lp-logo { display: flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none;
  color: var(--ink); }
.lp-logo:hover { color: var(--ink); }
.lp-links { display: none; gap: 30px; }
.nav a.lk { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a.lk:hover { color: var(--ink); }

/* ----------------------------------------------------------------- hero */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px;
  padding-top: 112px; margin-top: 0; }
.lp-field { position: absolute; inset: 0; pointer-events: none; }
.chrome { position: absolute; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, black 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, black 55%, transparent 100%); }
/* Nothing loops (spec 2026-09-27 §5): the field drifts out and back once,
 * and the light sweeps across it once, then stays gone (`both` holds the
 * last frame, opacity 0, rather than snapping the band back into view). */
.chrome svg { animation: drift 46s ease-in-out both; transform-origin: 50% 50%; will-change: transform; }
.sweep { position: absolute; top: -20%; height: 140%; width: 120px; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  animation: sweep 11s ease-in-out both; mix-blend-mode: screen; }
/* On a phone the field sits behind the headline, smaller and quieter, so the
 * words stay readable over it. */
.lp-chrome { top: 40px; right: -170px; width: 480px; height: 480px; opacity: .5; }
.lp-glow { position: absolute; right: -80px; top: 180px; width: 360px; height: 300px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(82, 227, 206, .20), transparent);
  filter: blur(40px); }

.lp-pitch { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lp-h1 { margin: 0; font-size: 44px; line-height: 1.0; font-weight: 600; letter-spacing: -.045em; }
/* The one serif word per display headline, sized off its heading so the
 * board's 80/92, 46/54 and 40/46 pairs survive every breakpoint. */
.lp-em { font-size: 1.16em; }
.lp-sub { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
/* The pitch's badge: counts alone, no status dot - nothing on it is a price,
 * so nothing on it is fresh or stale. One line where it fits, and where it
 * does not (320) its words wrap inside the pill rather than run past the
 * screen. */
.lp-badge { align-self: flex-start; max-width: 100%; height: auto; min-height: 30px; padding: 6px 14px;
  font-size: 13px; line-height: 1.35; white-space: normal; }
.lp-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lp-promise { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* A wrapped line must not start with a separator dot. */
.lp-promise > [aria-hidden] { display: none; }

.lp-heroR { position: relative; z-index: 1; min-width: 0; }
/* Below 1180 the card stacks under the pitch at the column's full width -
 * at 512px it left the right half of a tablet blank - and the range card
 * follows it in the flow. From 1180 the hero's right column (512px) holds
 * both, the range card floating over the card's corner. */
.lp-card { width: 100%; }
.lp .row > .bdg { flex-shrink: 0; }
/* The hero card's status light (spec 2026-09-27 §2-3): shown only while
 * gold's bar is forming, always beside its age in words ("bar 3m old").
 * The status green, as the app's price pill draws it, not the teal, which
 * means a measured figure. Still: it never pulses. */
.lp-fdot { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--st-ok); box-shadow: 0 0 0 3px var(--st-ok-soft); }
.lp-chart { position: relative; height: 190px; }
/* landing.js draws the candles at the width shown here (the viewBox follows
 * it), so they are never stretched: a wide card spreads them apart, each
 * body as wide as in the 372px card. The height is fixed; strokes keep 1px. */
.lp-chart-svg { position: absolute; left: 0; top: 0; width: calc(100% - 96px); height: 190px; overflow: visible; }
.lp-chart-svg line { vector-effect: non-scaling-stroke; }
.lp-marks { position: absolute; right: 0; top: 0; width: 88px; height: 190px; }
.zl-dn { background: var(--down-soft); }
.zl-up { background: var(--up-soft); }
.zl-ink2 { background: rgba(166, 178, 189, .08); }
.zl-now { background: var(--accent); color: var(--bg); font-weight: 600; }
.lp-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.hero-in { font-size: 13px; margin-top: 5px; color: var(--ink-2); }
.hero-in-strong { color: var(--ink); }
/* The range card floats over the hero card's corner on a wide screen only;
 * anywhere narrower it would sit on the chart, so there it comes after the
 * card, not out of the page. */
.lp-range { margin-top: 12px; }
.is-unavailable #heroChart { opacity: .3; }

/* ----------------------------------------------------------- live strip */
.lp-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 34px; }
.lp-h2 { font-size: 34px; }
/* Tiles scroll sideways on a phone, edge to edge, snapping to a tile. */
.lp-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 8px; margin: 0 -24px;
  scroll-padding: 0 24px; }
.lp-tiles > * { scroll-snap-align: start; }
/* The strip scrolls sideways on a phone, so a tile's focus ring (the one
 * ring, components.css) is drawn inside it, where the strip cannot cut it. */
.lp-tiles :focus-visible { outline-offset: -2px; }
.lp-tiles.is-off { display: block; margin: 0; padding: 0; }
.lp .tile { padding: 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  color: var(--ink); min-height: 268px; }
@media (hover: hover) {
  .tiles:hover .tile { opacity: .5; }
  .tiles .tile:hover { opacity: 1; transform: translateY(-3px); border-color: rgba(82, 227, 206, .3); }
}
.sb { justify-content: space-between; }
.g6 { gap: 6px; }
.t-name { font-size: 14.5px; font-weight: 600; }
.t-sym { font-size: 12px; }
.t-px { font-size: 21px; letter-spacing: -.02em; }
.t-ch { font-size: 12.5px; }
.t-48 { font-size: 12px; }
.t-spark { width: 100%; height: 40px; }
.t-badge { align-self: flex-start; }
.t-state { font-size: 12px; line-height: 1.35; }
/* Engine status and freshness share a row when they fit (a closed market)
 * and stack cleanly when they do not, rather than each breaking mid-phrase. */
.t-foot { font-size: 12px; margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 6px; }
.t-foot > span { white-space: nowrap; }
.lp-unavail { padding: 24px; color: var(--ink-2); }
.lp-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
/* A thumb's 40px tall, the words where they were. */
.lp-more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px;
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* ------------------------------------------------------- three questions */
.lp-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lp-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lp-q { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
/* A card's eyebrow: its number and its date, each whole - on a narrow card
 * the date goes under the number rather than "2026" alone on a line. */
.lp-qh { flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.lp-qh > * { white-space: nowrap; }
/* The positioning figure: beside its name where both fit, under it,
 * right-aligned, where they do not - never past the box's edge. */
.lp-pos { flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; font-size: 13px; }
.lp-pos > :last-child { margin-left: auto; }
.lp-guard { margin-top: 16px; padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.lp-guard-t { flex: 1 1 260px; min-width: 0; }

/* ------------------------------------------------------------ the method */
.lp-method { position: relative; margin-top: 88px; padding-top: 72px; }
.lp-method-line { position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82, 227, 206, .35), transparent); }
.lp-method-glow { position: absolute; left: 50%; top: -120px; width: 800px; height: 300px; margin-left: -400px;
  pointer-events: none; background: radial-gradient(closest-side, rgba(82, 227, 206, .09), transparent); }
.lp-method-in { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.lp-method-l { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.lp-method-r { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* What Tradox is, in one sentence, and the link to the page this section
 * summarises, held together: the link's own 40px carries its spacing. */
.lp-defn { display: flex; flex-direction: column; gap: 2px; }
.lp-def { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--ink), var(--ink-2)); }
.li > svg { flex-shrink: 0; margin-top: 2px; }
/* .funnel-row itself moved to components.css: the Method page draws the same
 * funnel and must not maintain a second copy of its geometry. */
.lp-record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.rec-v { font-size: 22px; margin-top: 8px; }

/* ------------------------------------------------------- getting started */
.lp-step { position: relative; overflow: hidden; padding: 28px; min-height: 200px; }
/* The numeral sits above the title, never behind it: the board's 130px
 * reached the title's line, and on a narrow card ran behind its words. */
.lp-step .ghost { position: absolute; right: 14px; top: 14px; font-size: 104px; }
.lp-step-t { position: relative; margin-top: 84px; font-size: 19px; font-weight: 600; }
.lp-step-d { position: relative; font-size: 14.5px; margin-top: 8px; line-height: 1.55; }

/* --------------------------------------------------------------- pricing */
.lp-price { padding: 24px; border-radius: 20px; display: flex; flex-direction: column; }
/* An item that names a page links to it (spec 2026-10-05 §6.3). A line of
 * text in size, in the list's own ink; its hit area is a 40px band across
 * it, reaching into the 12px gaps above and below, where nothing else is a
 * control. */
.lp-price .li a { position: relative; color: inherit; text-decoration: underline;
  text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.lp-price .li a:hover { color: var(--ink); text-decoration-color: currentColor; }
.lp-price .li a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 40px;
  transform: translateY(-50%); }
/* Pro has no sign-up to offer yet, so its button is a statement, not a link. */
.lp-btn-off, .lp-btn-off:hover { cursor: default; filter: none; color: var(--ink-2); }

/* ------------------------------------------------------------------- faq */
.fq { padding: 24px 26px; }
.fq h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.fq p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ------------------------------------------------------ closing CTA band */
.lp-cta { position: relative; overflow: hidden; border-radius: 24px; min-height: 230px; padding: 40px 24px; }
.lp-cta-chrome { right: -330px; top: -240px; width: 700px; height: 700px; opacity: .45; }
.lp-cta-in { position: relative; max-width: 620px; }
.lp-h2-sm { font-size: 30px; }

/* ---------------------------------------------------------------- footer */
.lp-footer { padding: 28px 0 64px; border-top: 1px solid var(--line-soft); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lp-flinks { display: flex; flex-wrap: wrap; gap: 0 26px; align-items: flex-start; font-size: 13.5px; }
/* A thumb's 40px tall on a phone, and 40px wide however short the name
 * ("Policy" is 38px of text); a line's height from 720. */
.lp-flinks a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; color: var(--ink-2);
  text-decoration: none; }
.lp-flinks a:hover { color: var(--ink); }
/* Who makes it: the studio and how to reach the founder. */
.lp-maker { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.lp-maker a { color: var(--ink-2); }
.lp-maker a:hover { color: var(--ink); }

@media (min-width: 480px) {
  .lp-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .lp-record { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .lp-sec { margin-top: 120px; }
  .lp-navwrap .lp-sec, .lp-hero, .lp-method-in { margin-top: 0; }
  .lp-nav { padding: 0 12px 0 18px; }
  .lp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-h1 { font-size: 60px; }
  .lp-sub { font-size: 19px; }
  .lp-promise { gap: 6px 18px; }
  .lp-promise > [aria-hidden] { display: inline; }
  .lp-h2 { font-size: 40px; }
  .lp-h2-sm { font-size: 36px; }
  .lp-method { margin-top: 120px; padding-top: 110px; }
  .rec-v { font-size: 24px; }
  .lp-price { padding: 30px; }
  .lp-cta { padding: 54px 48px; }
  .lp-cta-chrome { right: -140px; top: -260px; opacity: .8; }
  .lp-flinks { gap: 12px 26px; }
  .lp-flinks a { min-height: 0; }
}

@media (min-width: 1000px) {
  .lp-links { display: flex; }
  .lp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-q { min-height: 430px; }
  /* Three a row until six fit: at 1024 a sixth of the row wrapped "Nasdaq
   * 100" onto two lines and dropped that tile's figures below the rest. */
  .lp-tiles { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible;
    padding: 0; margin: 0; }
  .lp-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .lp-foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
  .lp-h2 { font-size: 46px; }
  .lp-h2-lg { font-size: 50px; }
  .lp-h2-sm { font-size: 40px; }
  /* 13:15 of the 1200px row, less the 80px gap, is the board's 520 + 600. */
  .lp-method-in { grid-template-columns: minmax(0, 13fr) minmax(0, 15fr); gap: 80px; }
  .lp-footer { grid-template-columns: 1.3fr 1fr; gap: 40px; }
  .lp-flinks { justify-content: flex-end; }
}

@media (min-width: 1180px) {
  /* .lp-sec is content-box, so this min-height excludes the 170px above it:
   * 870px in all, which puts the live strip where the board has it (+30px
   * for the range card's longer note). */
  .lp-hero { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); padding-top: 170px; min-height: 700px; }
  /* The board sets this headline on one line and lets the aside wrap. */
  .lp-head { gap: 24px; }
  .lp-head > div { flex-shrink: 0; }
  .lp-head > p { flex: 0 1 400px; }
  .lp-h1 { font-size: 80px; }
  .lp-pitch { padding-top: 26px; }
  .lp-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-heroR { justify-self: end; align-self: start; width: 100%; max-width: 512px; }
  /* The board's field: 940x960 hanging off the right edge, 40px above the fold. */
  .lp-chrome { top: -40px; right: -196px; width: 940px; height: 960px; opacity: 1; }
  .lp-glow { right: -36px; top: 250px; width: 520px; height: 420px; }
  /* Hangs off the card's corner by up to the board's 66px, but never closer
   * than 24px to the window edge. It overlaps only the card's bottom padding:
   * the board let it cover the as-of line, which is a live figure. */
  .lp-range { position: absolute; margin-top: 0; width: 250px; top: calc(100% - 18px);
    right: calc(-1 * clamp(0px, (100vw - 1248px) / 2, 66px)); }
}

@media (prefers-reduced-motion: reduce) {
  .chrome svg, .sweep, .lp .rise, .lp .fill { animation: none; }
  .sweep { display: none; }
}

/* Accounts are off in production, so the page ships without a sign-in: the
 * Google mark and the Sign in link appear only once landing.js marks
 * <html data-accounts="on"> from /api/me - never a flash of a sign-in that
 * does not exist. */
html:not([data-accounts="on"]) [data-cta-google],
html:not([data-accounts="on"]) [data-cta="signin"] { display: none; }