/* Capitalism Lab Education — marketing site
   Design system: "scholarly paper frame, simulation-world viewports."
   Light academic base carries credibility; dark panels are literal windows
   into the sim (the product is a game — show it, don't stock-photo it).
   Palette: paper/ink + watch-brass accent + telemetry teal (dark panels only).
   Type: Newsreader (display serif) · Public Sans (body) · IBM Plex Mono (telemetry/data).
*/

:root {
  --paper: #f6f5f1;
  --paper-2: #eeece5;
  --ink: #1a1d23;
  --mut: #575e6a;
  --line: #d9d6cc;

  --night: #0f1218;      /* viewport background — matches the app's dark UI */
  --night-2: #171b24;
  --night-line: #2a3040;
  --night-txt: #e8e6df;
  --night-mut: #98a0ad;

  --brass: #a37420;      /* accent on paper (AA on --paper) */
  --brass-bright: #e3b45c; /* accent on night */
  --tel: #5bc8bc;        /* telemetry teal — dark panels only */
  --bad: #e2695f;

  --ff-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --w: 1120px;
  --r: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brass); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ── Type roles ─────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--ff-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.22rem; line-height: 1.3; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
}
.dark .eyebrow { color: var(--brass-bright); }

.lede { font-size: 1.16rem; color: var(--mut); max-width: 58ch; }
.dark .lede { color: var(--night-mut); }

.mono { font-family: var(--ff-mono); }

/* ── Nav ────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 245, 241, 0.92); /* fallback */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand b { font-family: var(--ff-display); font-size: 1.14rem; font-weight: 600; letter-spacing: -0.01em; }
.brand span { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.nav a.nl { text-decoration: none; color: var(--mut); font-size: 0.94rem; }
.nav a.nl:hover { color: var(--ink); }
.nav-toggle { display: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--ff-body); font-weight: 600; font-size: 0.97rem;
  padding: 12px 22px; border-radius: 999px;
  text-decoration: none; border: 1.5px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-pri { background: var(--ink); color: var(--paper); }
.btn-pri:hover { box-shadow: 0 6px 18px rgba(26, 29, 35, 0.28); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.dark .btn-pri { background: var(--brass-bright); color: var(--night); }
.dark .btn-ghost { border-color: var(--night-line); color: var(--night-txt); }

/* ── Sections ───────────────────────────────────────────────── */
.sec { padding: 84px 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { max-width: 62ch; margin-bottom: 44px; }
.sec-head p { margin-top: 12px; color: var(--mut); }

.dark { background: var(--night); color: var(--night-txt); }
.dark.sec + .sec, .sec + .dark.sec { border-top: none; }
.dark h1, .dark h2, .dark h3 { color: var(--night-txt); }
.dark p { color: var(--night-mut); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: 76px 0 84px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 em { font-style: italic; color: var(--brass); }
.hero .lede { margin: 20px 0 30px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.heritage {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; gap: 34px; flex-wrap: wrap;
}
.heritage div b { font-family: var(--ff-display); font-size: 1.35rem; display: block; }
.heritage div span { font-size: 0.82rem; color: var(--mut); }

/* ── Viewport panels (windows into the sim) ─────────────────── */
.viewport {
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: var(--r);
  padding: 26px;
  color: var(--night-txt);
  box-shadow: 0 24px 60px -28px rgba(15, 18, 24, 0.55);
  position: relative;
  overflow: hidden;
}
.viewport::before {
  /* faint latitude lines — the sim's world-map texture */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(91, 200, 188, 0.05) 34px 35px);
  pointer-events: none;
}
.vp-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.vp-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--night-line); }
.vp-bar .cap { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-mut); margin-left: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono); font-size: 0.74rem;
  color: var(--night-mut);
  border: 1px solid var(--night-line); border-radius: 7px;
  padding: 5px 10px; background: var(--night-2);
}
.chip b { color: var(--tel); font-weight: 500; }
.chip .up { color: var(--tel); }
.chip .dn { color: var(--bad); }

/* ── The signature: CSS smartwatch ──────────────────────────── */
.watch-scene { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; position: relative; }
.watch { width: 172px; margin: 8px auto; position: relative; }
.watch .strap {
  width: 62px; height: 46px; margin: 0 auto;
  background: linear-gradient(180deg, #232a36, #1a202b);
  border: 1px solid var(--night-line);
}
.watch .strap.top { border-radius: 12px 12px 4px 4px; }
.watch .strap.bot { border-radius: 4px 4px 12px 12px; }
.watch .case {
  width: 158px; height: 158px; margin: -6px auto; position: relative; z-index: 2;
  border-radius: 42px;
  background: linear-gradient(145deg, #3a3427, #191510);
  border: 1px solid #4d4433;
  box-shadow:
    inset 0 0 0 3px rgba(227, 180, 92, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center;
}
.watch .crown {
  position: absolute; right: -5px; top: 54px; width: 7px; height: 22px;
  border-radius: 3px; background: linear-gradient(90deg, #6b5a35, #a98b4a);
}
.watch .screen {
  width: 128px; height: 128px; border-radius: 32px;
  background:
    radial-gradient(90px 60px at 30% 20%, rgba(91, 200, 188, 0.18), transparent 70%),
    radial-gradient(80px 80px at 75% 85%, rgba(227, 180, 92, 0.14), transparent 70%),
    #0a0d12;
  border: 1px solid #060809;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.watch .sweep {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0 340deg, rgba(91, 200, 188, 0.25) 355deg, transparent 360deg);
  animation: sweep 6s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.watch .face { text-align: center; position: relative; z-index: 2; }
.watch .face .t { font-family: var(--ff-mono); font-size: 1.5rem; color: var(--night-txt); letter-spacing: 0.02em; }
.watch .face .hr { font-family: var(--ff-mono); font-size: 0.66rem; color: var(--tel); margin-top: 3px; }
.watch .face .seg { font-family: var(--ff-mono); font-size: 0.6rem; color: var(--brass-bright); margin-top: 7px; letter-spacing: 0.08em; }

.telemetry { display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 2; }
.telemetry .chip { justify-content: space-between; }

/* segment-fit meter rows */
.fitrow { display: grid; grid-template-columns: 86px 1fr 34px; gap: 10px; align-items: center; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--night-mut); }
.fitrow .bar { height: 5px; border-radius: 3px; background: var(--night-line); overflow: hidden; }
.fitrow .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--tel), var(--brass-bright)); border-radius: 3px; }
.fitrow b { color: var(--night-txt); font-weight: 500; text-align: right; }

/* ── Logo/heritage band ─────────────────────────────────────── */
.band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.band .q { font-family: var(--ff-display); font-style: italic; font-size: 1.06rem; max-width: 46ch; }
.band .q span { display: block; font-family: var(--ff-mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); margin-top: 6px; }

/* ── Cards & grids ──────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--mut); font-size: 0.96rem; }
.card .k { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 10px; }

.dark .card { background: var(--night-2); border-color: var(--night-line); }
.dark .card p { color: var(--night-mut); }

/* ── The quarter loop (sequence device — the game IS quarters) ── */
.qloop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: q; }
.qstep { position: relative; padding: 22px 20px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.qstep::before {
  counter-increment: q;
  content: "Q" counter(q);
  font-family: var(--ff-mono); font-size: 0.74rem; letter-spacing: 0.1em;
  color: var(--brass);
  display: block; margin-bottom: 10px;
}
/* .steps variant: stages within ONE quarter (not quarter numbers) */
.qloop.steps .qstep::before { content: "0" counter(q); }
.qstep h3 { font-size: 1.06rem; }
.qstep p { font-size: 0.9rem; color: var(--mut); margin-top: 7px; }
.dark .qstep { background: var(--night-2); border-color: var(--night-line); }
.dark .qstep::before { color: var(--brass-bright); }
.dark .qstep p { color: var(--night-mut); }

/* ── Catalog ────────────────────────────────────────────────── */
.cat { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.cat-hero {
  background: var(--night); color: var(--night-txt);
  border-radius: var(--r); border: 1px solid var(--night-line);
  padding: 34px; display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.cat-hero::after {
  content: ""; position: absolute; right: -70px; bottom: -70px; width: 260px; height: 260px;
  border-radius: 50%; border: 1px solid rgba(227, 180, 92, 0.35);
  box-shadow: inset 0 0 0 26px rgba(227, 180, 92, 0.05), inset 0 0 0 60px rgba(91, 200, 188, 0.04);
}
.cat-hero .k { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tel); }
.cat-hero h3 { font-size: 1.7rem; }
.cat-hero p { color: var(--night-mut); max-width: 52ch; }
.cat-hero .btn { align-self: flex-start; margin-top: 8px; position: relative; z-index: 2; }
.cat-side { display: flex; flex-direction: column; gap: 22px; }
.cat-soon { border-style: dashed; display: flex; flex-direction: column; justify-content: center; }
.cat-soon .k { color: var(--mut); }

/* ── Feature split (product page) ───────────────────────────── */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; padding: 64px 0; }
.feat + .feat { border-top: 1px solid var(--line); }
.dark .feat + .feat { border-top: 1px solid var(--night-line); }
.feat.rev .feat-copy { order: 2; }
.feat h3 { font-size: 1.5rem; margin-bottom: 12px; }
.feat p { color: var(--mut); }
.dark .feat p { color: var(--night-mut); }
.feat ul { margin: 14px 0 0 18px; color: var(--mut); font-size: 0.95rem; display: grid; gap: 7px; }
.dark .feat ul { color: var(--night-mut); }

/* mini chart bars inside viewports */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 88px; position: relative; z-index: 2; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--tel), rgba(91, 200, 188, 0.25)); border-radius: 3px 3px 0 0; opacity: 0.9; }
.bars i.gold { background: linear-gradient(180deg, var(--brass-bright), rgba(227, 180, 92, 0.25)); }

/* world dots */
.world { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; padding: 6px 2px; }
.world i { width: 7px; height: 7px; border-radius: 50%; background: var(--night-line); justify-self: center; }
.world i.on { background: var(--tel); box-shadow: 0 0 8px rgba(91, 200, 188, 0.6); }
.world i.gold { background: var(--brass-bright); box-shadow: 0 0 8px rgba(227, 180, 92, 0.55); }

/* ── Course-fit table ───────────────────────────────────────── */
.fit-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.fit-table th, .fit-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fit-table th { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); font-weight: 500; }
.fit-table td:first-child { font-weight: 600; white-space: nowrap; }
.fit-table td:last-child { color: var(--mut); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  font-weight: 600; padding: 16px 0; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--ff-mono); color: var(--brass); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--mut); padding: 0 0 18px; max-width: 64ch; }

/* ── CTA band ───────────────────────────────────────────────── */
.cta-band { background: var(--night); color: var(--night-txt); padding: 76px 0; }
.cta-band .in { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 44px; align-items: center; }
.cta-band h2 { color: var(--night-txt); }
.cta-band p { color: var(--night-mut); margin-top: 12px; }
.cta-card { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r); padding: 28px; }
.cta-card .mono { font-size: 0.74rem; color: var(--tel); letter-spacing: 0.1em; text-transform: uppercase; }
.cta-card h3 { margin: 8px 0 10px; }
.cta-card p { font-size: 0.93rem; margin: 0 0 18px; }

/* ── Footer ─────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; font-size: 0.9rem; color: var(--mut); }
.foot-in { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer a { color: var(--mut); }
footer .brand b { font-size: 1rem; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.crumb { font-family: var(--ff-mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--mut); padding: 18px 0 0; }
.crumb a { color: var(--mut); text-decoration: none; }
.crumb a:hover { color: var(--brass); }
.dark .crumb, .dark .crumb a { color: var(--night-mut); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid, .cta-band .in, .feat, .cat { grid-template-columns: 1fr; }
  .feat.rev .feat-copy { order: 0; }
  .qloop { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sec { padding: 60px 0; }
  .grid-3, .grid-2, .qloop { grid-template-columns: 1fr; }
  .nav a.nl { display: none; }
  .watch-scene { grid-template-columns: 1fr; }
  .heritage { gap: 20px; }
  .fit-table td:last-child { display: none; }
}