/* Stockmeta — landing page, self-contained.
   Token values and component styling follow the Stockmeta Design System, but this
   file has NO dependency on it: upload index.html + styles.css and nothing else.
   Class names match the design system's (.topbar, .brand, .card, .badge, .chip,
   .counter, .panel, .status-dot) so this can be swapped onto the real DS later. */

/* ============ TOKENS ============ */
:root {
  /* surfaces */
  --bg-stage:#0b0b0d; --bg-panel:#161619; --bg-panel-2:#131316;
  --bg-elevated:#1e1e23; --bg-hover:#26262c;
  /* borders */
  --border:#2a2a30; --border-strong:#3a3a43; --border-faint:#222227;
  /* text */
  --text:#e9e9ec; --text-muted:#9a9aa4; --text-faint:#6a6a73;
  /* accent — terracotta */
  --accent:#d97757; --accent-hover:#e2876a;
  --accent-soft:rgba(217,119,87,.16); --accent-line:rgba(217,119,87,.45);
  /* status */
  --ok:#56d68a; --ok-bg:rgba(86,214,138,.14);
  --warn:#e0b341; --warn-bg:rgba(224,179,65,.14);
  --neutral-bg:rgba(255,255,255,.07);
  /* type */
  --font-ui:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* layout */
  --measure:1080px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-stage:#d9d9dd; --bg-panel:#f4f4f6; --bg-panel-2:#eeeef1;
    --bg-elevated:#ffffff; --bg-hover:#e6e6ea;
    --border:#c9c9d0; --border-strong:#b2b2bb; --border-faint:#dcdce1;
    --text:#1b1b1f; --text-muted:#55555e; --text-faint:#7a7a84;
    --accent:#c8643f; --accent-hover:#b0552f;
    --accent-soft:rgba(200,100,63,.14); --accent-line:rgba(200,100,63,.45);
    --ok:#1f8a5b; --ok-bg:rgba(31,138,91,.13);
    --warn:#9a6a00; --warn-bg:rgba(154,106,0,.13);
    --neutral-bg:rgba(0,0,0,.05);
  }
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--bg-stage);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

:focus-visible {
  outline:none;
  border-radius:3px;
  box-shadow:0 0 0 1px var(--accent-line), 0 0 0 4px var(--accent-soft);
}

.mono  { font-family:var(--font-mono); }
.faint { color:var(--text-faint); }
.dim   { color:var(--text-muted); }

.skip {
  position:absolute; left:-9999px; top:8px; z-index:10;
  background:var(--bg-elevated); border:1px solid var(--border-strong);
  padding:8px 12px; border-radius:5px; color:var(--text);
}
.skip:focus { left:12px; }

/* ============ COMPONENTS (design system subset) ============ */

/* top bar */
.topbar {
  display:flex; align-items:center; gap:14px;
  min-height:56px; padding:8px 20px;
  background:var(--bg-panel-2);
  border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:11px; color:var(--text); }
.brand:hover { color:var(--text); text-decoration:none; }
.brand-mark {
  width:30px; height:30px; flex:0 0 30px;
  border-radius:8px;
  background:linear-gradient(150deg, var(--accent), #b85638);
  display:grid; place-items:center; color:#fff;
}
.brand-mark svg { width:17px; height:17px; }
.brand-text { display:flex; flex-direction:column; line-height:1.25; }
.brand-title { font-size:17px; font-weight:600; letter-spacing:-0.01em; }
.brand-sub { font-size:11.5px; color:var(--text-faint); }
.topbar-end { margin-left:auto; }

/* badge */
.badge {
  display:inline-block;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.03em;
  padding:3px 9px; border-radius:999px;
  background:var(--neutral-bg); color:var(--text-muted);
  border:1px solid transparent;
  white-space:nowrap;
}
.badge--ok   { background:var(--ok-bg);   color:var(--ok); }
.badge--warn { background:var(--warn-bg); color:var(--warn); }

/* status dot */
.status-dot {
  width:7px; height:7px; flex:0 0 7px;
  border-radius:999px; background:var(--ok);
  animation:pulse 2.4s ease-in-out infinite;
}

/* panel */
.panel {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:7px;
  overflow:hidden;
}
.panel-head {
  padding:11px 14px;
  background:var(--bg-panel-2);
  border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text-muted);
}

/* card */
.card {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:7px;
  padding:18px 18px 20px;
}
.card-title {
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
  margin:0 0 6px;
}
.card p { margin:0; font-size:14px; color:var(--text-muted); }

/* chip */
.chip {
  font-family:var(--font-mono); font-size:11px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent-line);
  padding:2px 8px; border-radius:999px;
}

/* counter — teaches the limit inline; green when valid */
.counter {
  font-family:var(--font-mono); font-size:11px;
  color:var(--text-faint);
}
.counter.ok { color:var(--ok); }

/* ============ LAYOUT ============ */

.eyebrow {
  font-family:var(--font-mono);
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-faint);
  margin:0 0 16px;
}

.band { padding:64px 20px; border-top:1px solid var(--border-faint); }
.band--alt { background:var(--bg-panel-2); }
.band > * { max-width:var(--measure); margin-left:auto; margin-right:auto; }
.band h2 {
  font-size:clamp(22px, 3vw, 28px);
  font-weight:600; letter-spacing:-0.02em;
  margin:0 0 28px;
}

/* hero */
.hero {
  max-width:var(--measure); margin:0 auto;
  padding:72px 20px 64px;
  display:grid; gap:44px; grid-template-columns:1fr;
  align-items:start;
}
.hero h1 {
  font-size:clamp(31px, 5.2vw, 47px);
  line-height:1.08; letter-spacing:-0.03em; font-weight:600;
  margin:0 0 20px;
}
.hero .lede {
  font-size:17px; color:var(--text-muted);
  margin:0 0 20px; max-width:52ch;
}
.hero .note { font-size:14px; color:var(--text-faint); margin:0; }

@media (min-width:900px) {
  .hero {
    grid-template-columns:1.05fr .95fr;
    gap:48px; align-items:center;
    padding-top:88px; padding-bottom:80px;
  }
  .hero h1 { max-width:16ch; }
}

/* signature: the metadata record */
.record { margin:0; border-left:2px solid var(--accent-line); }
.record-head {
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
}
.record-state { margin-left:auto; }

.record-body { margin:0; padding:4px 0; }
.row {
  display:grid; grid-template-columns:88px 1fr; gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-faint);
}
.row:last-child { border-bottom:0; }
.row dt {
  font-family:var(--font-mono);
  font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-faint);
  padding-top:3px;
}
.row dd { margin:0; font-size:14px; }

.chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px; }

.record-foot {
  padding:10px 16px;
  border-top:1px solid var(--border);
  background:var(--bg-panel-2);
  font-size:11px; color:var(--text-faint);
}
.record-foot .mono { color:var(--text-muted); }

/* one-shot page-load reveal: the record filling itself in */
.row, .record .chip { animation:reveal .5s ease-out backwards; }
.row.r1 { animation-delay:.15s; }
.row.r2 { animation-delay:.45s; }
.row.r3 { animation-delay:.75s; }
.record .k1 { animation-delay:.85s; }
.record .k2 { animation-delay:.90s; }
.record .k3 { animation-delay:.95s; }
.record .k4 { animation-delay:1.00s; }
.record .k5 { animation-delay:1.05s; }
.record .k6 { animation-delay:1.10s; }
.record .k7 { animation-delay:1.15s; }
.record .k8 { animation-delay:1.20s; }
.record .k9 { animation-delay:1.25s; }
.record .k10 { animation-delay:1.30s; }

@keyframes reveal {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:none; }
}
@keyframes pulse {
  0%, 100% { opacity:1; }
  50%      { opacity:.35; }
}

/* steps */
.steps {
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px; grid-template-columns:1fr;
}
.steps li { padding-top:16px; border-top:1px solid var(--border-strong); }
.step-n {
  display:block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--accent); margin-bottom:10px;
}
.steps h3 {
  font-size:16px; font-weight:600; letter-spacing:-0.01em;
  margin:0 0 6px;
}
.steps p { margin:0; font-size:14px; color:var(--text-muted); }

@media (min-width:760px) {
  .steps { grid-template-columns:repeat(3, 1fr); gap:24px; }
}

/* feature grid */
.grid {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}

/* faq */
.faq { display:grid; gap:22px; grid-template-columns:1fr; }
.qa h3 {
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
  margin:0 0 5px;
}
.qa p { margin:0; font-size:14px; color:var(--text-muted); max-width:56ch; }

@media (min-width:760px) {
  .faq { grid-template-columns:1fr 1fr; gap:26px 40px; }
}

/* footer */
.footer {
  border-top:1px solid var(--border);
  background:var(--bg-panel-2);
  padding:28px 20px 40px;
  display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline;
  font-size:13px;
}
.footer > * { margin:0; }
.footer p:first-child { color:var(--text); font-weight:500; }
.footer .faint { margin-left:auto; }

/* ============ MOTION PREFERENCE ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}