/* PixelLedger — Design DNA
   Direction : Dark techno / HUD dashboard, data-driven analyst desk — deep dark ground,
               neon data accents used only for figures & CTAs, technical display + mono numerics.
   Layout    : bento/dashboard spine — top-story hero with a live data panel, a dense news LIST
               (rows, mono timestamps, not cards), a numbered sections index, analysts as
               two-column hanging labels, a full-bleed "state of the market" band with big mono
               numbers + CSS-drawn mini charts, pricing, newsletter, order form. Widths vary;
               ≥2 asymmetric sections; ≤1 card grid.
   Type      : Chakra Petch (techy display) / IBM Plex Sans (body) / IBM Plex Mono (all figures) — fluid clamp scale.
   Color     : base #0A0E1A / surface #121829 / ink #E6ECF5 / muted #8A97B0 / accent lime #A3E635 / cyan #38BDF8 (60-30-10)
   Motion    : counters tick up + CSS chart bars/lines draw in on scroll (width/transform/opacity), reduced-motion stills all.
   Signature : corner-bracket panels (thin partial corner borders) + CSS-drawn mini bar/line charts + mono tickers.
   Hero-bg   : faint two-gradient tech grid + soft lime glow + a subtle drawn line-chart (SVG), never flat. */

:root {
  /* palette (OKLCH-reasoned, contrast-checked) */
  --base:      #0A0E1A;
  --surface:   #121829;
  --surface-2: #182036;
  --line:      #26304a;
  --ink:       #E6ECF5;
  --muted:     #8A97B0;
  --muted-2:   #63708c;
  --accent:    #A3E635;   /* lime — data + CTA */
  --accent-ink:#0A0E1A;
  --cyan:      #38BDF8;   /* second data series, sparing */
  --up:        #A3E635;
  --down:      #f472b6;

  /* fluid type scale */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.6vw, 5rem);
  --step-5:  clamp(3.2rem, 2.2rem + 5.5vw, 7rem);

  /* spacing rhythm */
  --s1: 0.5rem;  --s2: 0.85rem; --s3: 1.4rem; --s4: 2.2rem;
  --s5: 3.4rem;  --s6: 5rem;    --s7: 7rem;

  --maxw: 1180px;
  --radius: 4px;
  --bracket: 14px; /* corner bracket arm length */

  --font-disp: "Chakra Petch", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-disp); line-height: 1.08; margin: 0; text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.narrow { width: min(100% - 2.4rem, 720px); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- mono figure helpers ---- */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tick { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; }
.up   { color: var(--up); }
.down { color: var(--down); }
.cy   { color: var(--cyan); }

/* ---- eyebrow / kicker ---- */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; }

/* ---- signature: corner-bracket panel ---- */
.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
}
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: var(--bracket); height: var(--bracket);
  border: 1.5px solid var(--accent); pointer-events: none;
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bracket::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* full four-corner bracket via extra spans */
.brk-tr, .brk-bl { position: absolute; width: var(--bracket); height: var(--bracket); border: 1.5px solid var(--cyan); pointer-events: none; }
.brk-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.brk-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-disp); font-weight: 600; font-size: var(--step-0);
  letter-spacing: .01em;
  padding: .72em 1.4em; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
  cursor: pointer; transition: transform .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); background: color-mix(in oklch, var(--accent) 85%, white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent); }
.btn--lg { padding: .9em 1.8em; font-size: var(--step-1); }
.btn::after { content: "→"; font-family: var(--font-mono); }

/* ================= HEADER / NAV ================= */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklch, var(--base) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s3); padding-block: .85rem; }
.brand {
  font-family: var(--font-disp); font-weight: 700; font-size: 1.2rem; color: var(--ink);
  letter-spacing: .01em; display: inline-flex; align-items: center; gap: .1rem;
}
.brand:hover { text-decoration: none; }
.brand b { color: var(--accent); font-weight: 700; }
.brand .dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: .5rem; box-shadow: 0 0 8px var(--accent); }
.nav-links { display: flex; gap: var(--s3); margin-left: auto; align-items: center; }
.nav-links a { color: var(--muted); font-size: var(--step--1); font-family: var(--font-mono); letter-spacing: .02em; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); text-decoration: none; }
.nav-links a.active { color: var(--accent); }
.nav-cta { margin-left: var(--s3); }
.nav-toggle {
  display: none; margin-left: auto; background: transparent; border: 1px solid var(--line);
  color: var(--ink); width: 44px; height: 44px; border-radius: var(--radius); cursor: pointer; font-size: 1.2rem;
}

@media (max-width: 900px) {
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--s2) var(--s3); margin-left: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 420px; padding-block: var(--s3); }
  .nav-links a { padding: .7rem 0; width: 100%; font-size: var(--step-0); }
}

/* ================= HERO ================= */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(color-mix(in oklch, var(--cyan) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--cyan) 7%, transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 78%);
}
.hero-bg .glow {
  position: absolute; width: 55vw; height: 55vw; right: -8vw; top: -18vw;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 24%, transparent), transparent 62%);
  filter: blur(20px);
}
.hero-bg .line-chart { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; width: 100%; opacity: .55; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--base) 40%, transparent), var(--base) 92%);
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s5);
  align-items: end;
  padding-block: clamp(3.5rem, 6vw, 7rem);
}
.hero-lead .flag {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted);
  letter-spacing: .04em; margin-bottom: var(--s3);
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}
.hero-lead .flag b { color: var(--accent); font-weight: 600; }
.hero-lead h1 {
  font-size: var(--step-4); font-weight: 700; margin: 0 0 var(--s3);
  letter-spacing: -.01em;
}
.hero-lead h1 em { font-style: normal; color: var(--accent); }
.hero-lead .dek { color: var(--muted); font-size: var(--step-1); max-width: 40ch; margin-bottom: var(--s4); }
.hero-cta { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* hero data panel */
.data-panel { align-self: stretch; display: flex; flex-direction: column; gap: var(--s3); }
.data-panel .panel { padding: var(--s3); }
.dp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); }
.dp-head .lbl { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dp-head .st  { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--line); }
.stat-row:first-of-type { border-top: 0; }
.stat-row .k { color: var(--muted); font-size: var(--step--1); }
.stat-row .v { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500; }

/* mini bar chart (CSS drawn) */
.minichart { display: flex; align-items: flex-end; gap: 5px; height: 66px; margin-top: var(--s2); }
.minichart .bar {
  flex: 1; background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 40%, transparent));
  border-radius: 2px 2px 0 0; height: var(--h, 40%);
  transform-origin: bottom; transform: scaleY(0); transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.minichart .bar.cy { background: linear-gradient(180deg, var(--cyan), color-mix(in oklch, var(--cyan) 40%, transparent)); }
.in .minichart .bar { transform: scaleY(1); }

/* ================= NEWS FEED (list rows, not cards) ================= */
.section { padding-block: var(--s6); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--muted); max-width: 46ch; margin: .4rem 0 0; }

.feed { border-top: 1px solid var(--line); }
.feed-row {
  display: grid; grid-template-columns: 128px 1fr auto; gap: var(--s3);
  align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  transition: background .2s ease, padding-left .2s ease;
}
.feed-row:hover { background: color-mix(in oklch, var(--surface) 55%, transparent); padding-left: var(--s2); }
.feed-row .meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.feed-row .meta .cat { color: var(--cyan); display: block; }
.feed-row .body h3 { font-size: var(--step-1); font-weight: 600; margin-bottom: .3rem; }
.feed-row .body h3 a { color: var(--ink); }
.feed-row .body h3 a:hover { color: var(--accent); text-decoration: none; }
.feed-row .body p { color: var(--muted); font-size: var(--step-0); margin: 0; max-width: 60ch; }
.feed-row .fig { font-family: var(--font-mono); text-align: right; font-size: var(--step-0); white-space: nowrap; }
.feed-row .fig small { display: block; color: var(--muted-2); font-size: .72em; }
.feed-lead { grid-column: 1 / -1; }
/* lead story in feed spans wider with an image */
.feed-lead-in {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s4); align-items: center;
  padding: var(--s4) 0 var(--s5);
}
.feed-lead-in .media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }
.feed-lead-in .media img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.feed-lead-in .tag { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; }
.feed-lead-in h3 { font-size: var(--step-2); margin: var(--s2) 0; }
.feed-lead-in h3 a { color: var(--ink); }
.feed-lead-in p { color: var(--muted); }

/* ================= SECTIONS INDEX (numbered) ================= */
.index-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.index-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.index-item .num { font-family: var(--font-mono); font-size: var(--step-3); color: var(--line); font-weight: 500; }
.index-item:hover .num { color: var(--accent); }
.index-item h3 { font-size: var(--step-2); }
.index-item .desc { color: var(--muted); margin: .35rem 0 0; max-width: 56ch; }
.index-item .count { font-family: var(--font-mono); color: var(--cyan); font-size: var(--step-0); text-align: right; }
.index-item .count small { display: block; color: var(--muted-2); font-size: .7em; }

/* ================= ANALYSTS (two-column hanging labels) ================= */
.analysts { display: grid; grid-template-columns: 1fr; gap: 0; }
.analyst {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s4);
  padding-block: var(--s4); border-top: 1px solid var(--line);
}
.analyst:first-child { border-top: 0; }
.analyst .label { position: relative; }
.analyst .label .name { font-family: var(--font-disp); font-size: var(--step-1); font-weight: 600; }
.analyst .label .role { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: .04em; margin-top: .3rem; }
.analyst .label .beat { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); margin-top: .6rem; }
.analyst .say p { margin: 0 0 var(--s2); color: var(--ink); font-size: var(--step-1); }
.analyst .say .quote::before { content: "“"; color: var(--accent); font-family: var(--font-disp); margin-right: .1rem; }
.analyst .say .quote::after  { content: "”"; color: var(--accent); font-family: var(--font-disp); }
.analyst .say small { color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); }

/* ================= TESTIMONIALS (subscriber data-feed) ================= */
.subfeed { padding: 0; }
.subfeed-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.subfeed-head .lbl { font-size: var(--step--1); color: var(--muted); letter-spacing: .1em; }
.subfeed-head .st { font-size: var(--step--1); }
.sub-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-areas: "av id verified" "quote quote quote";
  gap: .3rem var(--s3); align-items: center;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.sub-row:last-child { border-bottom: 0; }
.sub-row:hover { background: color-mix(in oklch, var(--surface-2) 55%, transparent); }
.sub-av {
  grid-area: av; width: 48px; height: 48px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--base); object-fit: cover;
}
.sub-id { grid-area: id; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.sub-id .handle { font-size: var(--step-0); color: var(--accent); font-weight: 500; }
.sub-id .role { font-size: var(--step--1); color: var(--muted); font-family: var(--font-mono); }
.verified {
  grid-area: verified; justify-self: end; white-space: nowrap;
  font-size: var(--step--1); color: var(--accent); letter-spacing: .02em;
  border: 1px solid color-mix(in oklch, var(--accent) 45%, var(--line));
  border-radius: 999px; padding: .2rem .6rem;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.verified .ck { font-weight: 600; }
.sub-quote { grid-area: quote; margin: .4rem 0 0; color: var(--ink); font-size: var(--step-0); max-width: 72ch; }
.sub-quote::before { content: "“"; color: var(--accent); font-family: var(--font-disp); margin-right: .12rem; }
.sub-quote::after  { content: "”"; color: var(--accent); font-family: var(--font-disp); }

@media (max-width: 560px) {
  .subfeed-head, .sub-row { padding-inline: var(--s3); }
  .sub-row {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "av id" "verified verified" "quote quote";
    align-items: center;
  }
  .verified { justify-self: start; margin-top: .3rem; white-space: normal; }
}

/* ================= STATE OF THE MARKET (full-bleed band) ================= */
.market {
  background: var(--surface); border-block: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.market::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px);
  background-size: 40px 40px; opacity: .6; pointer-events: none;
  mask-image: radial-gradient(90% 90% at 20% 30%, #000, transparent 75%);
}
.market .container { position: relative; z-index: 1; }
.market-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s5); align-items: center; }
.market-copy h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.market-copy p { color: var(--muted); max-width: 46ch; }
.bignums { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.bignum { border-left: 2px solid var(--accent); padding-left: var(--s3); }
.bignum.cy-b { border-left-color: var(--cyan); }
.bignum .n { font-family: var(--font-mono); font-size: var(--step-3); font-weight: 500; letter-spacing: -.02em; }
.bignum .n .pre, .bignum .n .suf { color: var(--muted); font-size: .5em; }
.bignum .lbl { color: var(--muted); font-size: var(--step--1); margin-top: .3rem; }

/* line chart drawn via clip-path reveal on a css gradient area */
.linechart {
  grid-column: 1 / -1; margin-top: var(--s4);
  height: 150px; position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in oklch,var(--line) 60%,transparent) calc(10% - 1px) 10%);
  overflow: hidden;
}
.linechart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.linechart .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2s ease; }
.in .linechart .draw { stroke-dashoffset: 0; }

/* ================= PRICING (Pro) ================= */
.pricing-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s5); align-items: center; }
.price-card { padding: var(--s5); }
.price-card .plan { font-family: var(--font-mono); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; font-size: var(--step--1); }
.price-card .amount { font-family: var(--font-mono); font-size: var(--step-4); font-weight: 500; margin: var(--s2) 0 0; letter-spacing: -.02em; }
.price-card .amount .cur { font-size: .4em; color: var(--muted); vertical-align: super; }
.price-card .amount .per { font-size: .28em; color: var(--muted); font-family: var(--font-body); }
.price-card .sub { color: var(--muted); margin: .3rem 0 var(--s4); }
.price-card .btn { width: 100%; justify-content: center; }
.price-copy h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.plan-feats { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.plan-feats li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--ink); }
.plan-feats li::before { content: "▸"; color: var(--accent); font-family: var(--font-mono); }
.plan-feats li span { color: var(--muted); font-size: var(--step--1); }

/* ================= NEWSLETTER ================= */
.news-band { background: var(--surface-2); border-block: 1px solid var(--line); }
.news-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.news-inner h2 { font-size: var(--step-2); margin-bottom: var(--s2); }
.news-inner p { color: var(--muted); }
.news-form { display: flex; gap: var(--s2); flex-wrap: wrap; }
.news-form input {
  flex: 1 1 240px; background: var(--base); border: 1px solid var(--line); color: var(--ink);
  padding: .8rem 1rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--step-0);
}
.news-form input:focus { border-color: var(--accent); outline: none; }
.form-note { color: var(--muted); font-size: var(--step--1); }

/* ================= ORDER FORM ================= */
.order { position: relative; }
.order-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s5); align-items: start; }
.order-copy h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.order-copy p { color: var(--muted); }
.order-copy .recap { margin-top: var(--s4); display: grid; gap: var(--s2); }
.order-copy .recap .r { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: .5rem; font-family: var(--font-mono); font-size: var(--step--1); }
.order-copy .recap .r span:first-child { color: var(--muted); }
.order-copy .recap .r .v { color: var(--accent); }

form.order-form { display: grid; gap: var(--s3); }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  background: var(--base); border: 1px solid var(--line); color: var(--ink);
  padding: .8rem 1rem; border-radius: var(--radius); font-family: var(--font-body); font-size: var(--step-0);
  width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#formStatus { font-family: var(--font-mono); font-size: var(--step--1); margin: 0; }
#formStatus.error { color: var(--down); }

/* order: form left, copy + image right */
.order-copy .order-visual {
  margin-top: var(--s4); padding: var(--s2); overflow: hidden;
}
.order-visual img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); display: block;
}
.order-visual figcaption {
  margin: var(--s2) 0 0; font-size: var(--step--1); color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.order-visual figcaption::before { content: "▸ "; color: var(--accent); }

/* ================= FAQ (two-column data-panel Q&A) ================= */
.faq-panel { padding: 0; }
.faq-panel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.faq-panel-head .lbl { font-size: var(--step--1); color: var(--muted); letter-spacing: .1em; }
.faq-panel-head .st { font-size: var(--step--1); }
.faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;
}
.faq-item {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background .2s ease;
}
.faq-item:hover { background: color-mix(in oklch, var(--surface-2) 55%, transparent); }
.faq-item:nth-child(2n) { border-right: 0; }
.faq-item:nth-last-child(-n+2) { border-bottom: 0; }
.faq-item .q {
  display: flex; gap: .6rem; align-items: baseline; margin: 0 0 var(--s2);
  font-size: var(--step-0); font-weight: 500; color: var(--ink); letter-spacing: -.01em;
}
.faq-item .q .qn {
  flex: none; font-size: var(--step--1); color: var(--accent-ink);
  background: var(--accent); border-radius: 3px; padding: .12rem .4rem;
  letter-spacing: .04em; align-self: flex-start; margin-top: .12rem;
}
.faq-item .a { margin: 0; color: var(--muted); font-size: var(--step--1); max-width: 52ch; }

@media (max-width: 720px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-item { border-right: 0; }
  .faq-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .faq-item:last-child { border-bottom: 0; }
  .faq-panel-head, .faq-item { padding-inline: var(--s3); }
}

/* ================= FOOTER ================= */
.site-footer { border-top: 1px solid var(--line); background: var(--base); }
.foot-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
  border-bottom: 1px solid var(--line); padding-block: var(--s4);
}
.foot-strip .fs { text-align: left; }
.foot-strip .fs .n { font-family: var(--font-mono); font-size: var(--step-2); color: var(--accent); }
.foot-strip .fs .n.cy { color: var(--cyan); }
.foot-strip .fs .l { color: var(--muted); font-size: var(--step--1); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s4); padding-block: var(--s5); }
.foot-brand p { color: var(--muted); max-width: 34ch; margin: var(--s2) 0; }
.foot-brand address { font-style: normal; color: var(--muted); font-size: var(--step--1); line-height: 1.7; }
.foot-brand address a { color: var(--muted); }
.foot-brand address a:hover { color: var(--accent); }
.foot-col h4 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s2); }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.foot-col a { color: var(--muted); font-size: var(--step--1); }
.foot-col a:hover { color: var(--accent); text-decoration: none; }
.foot-bottom { border-top: 1px solid var(--line); padding-block: var(--s3); display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.foot-bottom span { color: var(--muted-2); font-size: var(--step--1); font-family: var(--font-mono); }

/* ================= LEGAL / DOC PAGES ================= */
.doc { padding-block: var(--s6); }
.doc h1 { font-size: var(--step-3); margin-bottom: var(--s2); }
.doc .updated { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--1); margin-bottom: var(--s4); }
.doc h2 { font-size: var(--step-1); margin: var(--s4) 0 var(--s2); color: var(--accent); }
.doc p, .doc li { color: var(--muted); max-width: 68ch; }
.doc > p:first-of-type, .doc .lede { color: var(--ink); }
.doc a { color: var(--accent); }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 1.2rem; }
.doc .back-home { display: inline-block; margin-top: var(--s5); font-family: var(--font-mono); color: var(--accent); }

/* corner-bracket doc header + mono kicker */
.doc-head {
  position: relative; padding: var(--s4); margin-bottom: var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.doc-head .kicker { margin-bottom: var(--s2); }
.doc-head h1 { margin: 0; }
.doc-head .updated { margin: var(--s2) 0 0; }
.doc-head .lede { margin: var(--s3) 0 0; }

/* contact page: geo + form panels */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s5); align-items: start;
  margin-top: var(--s2);
}
.contact-info { display: grid; gap: var(--s3); }
.contact-card { position: relative; padding: var(--s4); }
.contact-card h2 { margin: 0 0 var(--s3); font-size: var(--step-1); color: var(--accent); }
.contact-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.contact-rows li { display: grid; gap: .25rem; border-top: 1px solid var(--line); padding-top: var(--s2); }
.contact-rows li:first-child { border-top: 0; padding-top: 0; }
.contact-rows .rk { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.contact-rows .rv { color: var(--ink); font-size: var(--step-0); }
.contact-rows .rv a { color: var(--accent); }
.contact-geo {
  margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative; background: var(--base);
}
.contact-geo .geo-grid {
  height: 150px; position: relative;
  background:
    linear-gradient(color-mix(in oklch, var(--cyan) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--cyan) 8%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
.contact-geo .pin {
  position: absolute; left: 46%; top: 52%; width: 12px; height: 12px;
  background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 22%, transparent), 0 0 14px var(--accent);
  transform: translate(-50%, -50%);
}
.contact-geo .coords {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: .5rem .8rem; font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted); background: color-mix(in oklch, var(--base) 80%, transparent);
  border-top: 1px solid var(--line);
}
.contact-geo .coords .cy { color: var(--cyan); }
.contact-form { position: relative; padding: var(--s4); display: grid; gap: var(--s3); }
.contact-form h2 { margin: 0; font-size: var(--step-1); color: var(--accent); }
.contact-form p.hint { margin: 0; color: var(--muted); font-size: var(--step--1); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ================= THANK YOU ================= */
.ty { padding-block: var(--s7); text-align: center; }
.ty .mark { font-family: var(--font-mono); font-size: var(--step-4); color: var(--accent); }
.ty h1 { font-size: var(--step-3); margin: var(--s3) 0; }
.ty p { color: var(--muted); max-width: 52ch; margin-inline: auto; }

/* ================= REVEAL ================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s4); }
  .market-grid, .pricing-wrap, .order-grid, .news-inner, .feed-lead-in { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .analyst { grid-template-columns: 1fr; gap: var(--s2); }
  .analyst .label .role { display: inline-block; }
  .bignums { grid-template-columns: 1fr 1fr; }
  .foot-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .feed-row { grid-template-columns: 1fr auto; }
  .feed-row .meta { grid-column: 1 / -1; }
  .index-item { grid-template-columns: 54px 1fr; }
  .index-item .count { grid-column: 2; text-align: left; margin-top: .4rem; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .price-card .amount { font-size: var(--step-3); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .minichart .bar { transform: scaleY(1); }
  .linechart .draw { stroke-dashoffset: 0; }
}