/* ==========================================================================
   TradeKernel / Headlong Forge — shared site style
   Graphite + Safety-Orange "job-ticket" system.
   Source of truth lives at tradekernel/style.css — copied (not linked) into
   every folder that needs it. Edit the one canonical copy, then re-copy it
   out to each deploy target before redeploying.
   ========================================================================== */

:root {
  --graphite: #1f2421;
  --graphite-soft: #2c332e;
  --safety: #ff6b1a;
  --safety-dim: #d4580f;
  --concrete: #e8e4db;
  --paper: #f6f3ec;
  --steel: #5c6670;
  --rust: #a8390f;
  --line: rgba(31,36,33,0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--graphite);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.6;
}
h1, h2, h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; }

/* ===== LAYOUT PRIMITIVES ===== */
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.section { padding: 56px 0; border-bottom: 1px dashed var(--line); }
.section:last-of-type { border-bottom: none; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  display: inline-block;
  margin-bottom: 14px;
}

h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 20px; line-height: 1.15; }
.lede { font-size: 18px; max-width: 71ch; }
.lede strong { color: var(--rust); }
p + p { margin-top: 14px; }
.body-copy { max-width: 76ch; font-size: 18px; }

/* ===== NAV (used by multi-page sites like the TradeKernel homepage) ===== */
nav {
  background: var(--graphite);
  color: var(--paper);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 3px solid var(--safety);
}
nav .wordmark { font-family: 'Oswald', sans-serif; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
nav .wordmark a { color: inherit; text-decoration: none; }
nav .links { display: flex; gap: 20px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
nav .links a { text-decoration: none; opacity: 0.8; color: var(--paper); }
nav .links a:hover { opacity: 1; text-decoration: underline; }
nav .links a.active { opacity: 1; border-bottom: 1px solid var(--safety); padding-bottom: 2px; }

/* ===== HERO (base — pages add their own inner layout on top) ===== */
.hero {
  background: var(--graphite);
  color: var(--paper);
  padding: 68px 0 52px;
  border-bottom: 6px solid var(--safety);
  position: relative;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  color: var(--paper);
}
.hero h1 span { color: var(--safety); }
.hero p.sub {
  margin-top: 22px;
  font-size: 17px;
  color: rgba(246,243,236,0.8);
  max-width: 50ch;
}

/* ===== CTA BUTTON ===== */
.cta {
  display: inline-block;
  margin-top: 32px;
  background: var(--safety);
  color: var(--graphite);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 26px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.cta:hover { background: #ff7f38; transform: translateY(-1px); }

/* ===== NUMBERED STEPS ===== */
.steps { margin-top: 34px; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .num { font-family: 'IBM Plex Mono', monospace; color: var(--safety); font-weight: 600; font-size: 15px; }
.step .txt { font-size: 15.5px; }

/* ===== CARD GRID (product/feature cards) ===== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
}
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: #fff;
  border: 1.5px solid var(--graphite);
  padding: 20px;
}
.card h3 { font-family: 'Oswald', sans-serif; font-size: 15px; margin-bottom: 8px; text-transform: uppercase; }
.card .status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
}
.card .status.live { background: var(--graphite); color: var(--paper); }
.card .status.soon { background: var(--paper); color: var(--rust); border: 1px solid var(--rust); }

/* ===== FAQ ACCORDION ===== */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  text-transform: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: var(--safety);
  transition: transform 0.15s ease;
  flex: none;
  margin-left: 16px;
}
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 4px 20px; font-size: 15px; color: #333; max-width: 62ch; }

/* ===== FOOTER ===== */
footer {
  background: var(--graphite);
  color: rgba(246,243,236,0.55);
  padding: 40px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  text-align: center;
}
footer .cta { margin: 0 0 18px; }
footer .legal-links { margin-top: 18px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
footer .legal-links a { color: rgba(246,243,236,0.55); text-decoration: underline; }
footer .legal-links a:hover { color: var(--paper); }