/* Insider Edge — public site. Design system.
   Ink hero + cool paper reading surface. Fraunces display / Plex Sans body / Plex Mono data.
   Signature: the cluster mark (stacked buy-triangles = N insiders buying together). */

:root {
  --ink: #0D1220;
  --ink-2: #141d30;
  --ink-line: #26304a;
  --paper: #F6F7F9;
  --card: #FFFFFF;
  --line: #E4E7EC;
  --line-soft: #EEF0F3;

  --buy: #0E9463;
  --buy-deep: #0a6e49;
  --buy-soft: #E6F4EE;
  --sell: #C2410C;
  --sell-soft: #FaEbe2;
  --gold: #A9791E;
  --gold-soft: #F3EBD8;

  --text: #0D1220;
  --muted: #5B6472;
  --faint: #8A93A3;
  --inv: #EEF1F6;
  --inv-muted: #9AA6BD;

  --r: 14px;
  --r-sm: 9px;
  --maxw: 1080px;
  --shadow: 0 1px 2px rgba(13,18,32,.04), 0 8px 30px rgba(13,18,32,.06);
  --shadow-lift: 0 2px 6px rgba(13,18,32,.06), 0 18px 50px rgba(13,18,32,.12);

  --display: "Fraunces", Georgia, serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(246,247,249,.82); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar.on-ink { background: rgba(13,18,32,.6); border-bottom-color: var(--ink-line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.brand .dot { display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--buy); transform: translateY(-1px); }
.brand small { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; }
.on-ink .brand, .on-ink .brand small { color: var(--inv); }
.on-ink .brand small { color: var(--inv-muted); }
.nav-back { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.nav-back:hover { color: var(--buy-deep); }

/* ---------- hero (ink) ---------- */
.hero { background: var(--ink); color: var(--inv); position: relative; overflow: hidden; }
.hero::after { content:""; position:absolute; inset:0; background: radial-gradient(1200px 500px at 78% -8%, rgba(14,148,99,.20), transparent 60%); pointer-events:none; }
.hero .wrap { position: relative; z-index: 1; padding: 72px 24px 64px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--buy); margin: 0 0 20px; }
.hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 22px; }
.hero h1 em { font-style: italic; color: #fff; }
.hero .lede { font-size: 18.5px; line-height: 1.55; color: var(--inv-muted); max-width: 30em; margin: 0 0 30px; }
.hero .lede b { color: var(--inv); font-weight: 600; }
.stat-row { display: flex; flex-wrap: wrap; gap: 26px; font-family: var(--mono); font-size: 12.5px; color: var(--inv-muted); letter-spacing: .01em; }
.stat-row b { color: #fff; font-weight: 600; font-size: 15px; display: block; }

/* featured card in hero */
.feature { background: linear-gradient(180deg, #fff, #fbfcfd); color: var(--text); border-radius: 18px; padding: 24px 24px 22px; box-shadow: var(--shadow-lift); border: 1px solid rgba(255,255,255,.6); }
.feature .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--buy-deep); background: var(--buy-soft); padding: 4px 9px; border-radius: 999px; display: inline-block; margin-bottom: 16px; }
.feature .co { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 3px; }
.feature .co .code { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 500; }
.feature .who { font-size: 14.5px; color: var(--muted); margin: 10px 0 18px; }
.feature .who b { color: var(--text); font-weight: 600; }
.feature .cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--buy-deep); font-weight: 600; letter-spacing: .01em; }
.feature .cta::after { content: "→"; transition: transform .15s ease; }
.feature:hover .cta::after { transform: translateX(3px); }

/* ---------- cluster mark (the signature) ---------- */
.cluster { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.cluster .m { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--buy); opacity: .92; }
.cluster .m:nth-child(3n) { border-bottom-color: var(--buy-deep); }
.cluster.big { gap: 4px; height: 40px; }
.cluster.big .m { border-left-width: 7px; border-right-width: 7px; border-bottom-width: 13px; }
.cluster-line { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.cluster-n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cluster-n b { color: var(--buy-deep); font-weight: 600; }

/* ---------- section scaffolding ---------- */
section { padding: 64px 0; }
.section-head { max-width: 40em; margin: 0 0 34px; }
.section-head .kick { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.section-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(27px, 3.4vw, 36px); letter-spacing: -.015em; line-height: 1.08; margin: 0 0 12px; }
.section-head p { font-size: 17px; color: var(--muted); margin: 0; }

/* explainer */
.explain { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.explain .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.explain .item .num { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .1em; margin-bottom: 14px; }
.explain .item h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; margin: 0 0 8px; }
.explain .item p { font-size: 15.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.explain .item .ico { width: 30px; height: 30px; margin-bottom: 14px; }

/* ---------- feed cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #d7dce3; }
.card .co { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 2px; }
.card .code { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .02em; }
.card .head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card .flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.card .foot { margin-top: auto; padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; }
.card .val { font-family: var(--mono); font-size: 13px; color: var(--text); }
.card .val small { color: var(--faint); }
.card .go { font-family: var(--mono); font-size: 12px; color: var(--buy-deep); font-weight: 600; }

/* flag chips — plain language */
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.chip.cluster { background: var(--buy-soft); color: var(--buy-deep); }
.chip.conviction { background: #ECF0FB; color: #33509a; }
.chip.large { background: var(--gold-soft); color: var(--gold); }
.chip.market { background: #EEF1F4; color: var(--muted); }

/* ---------- glossary ---------- */
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
.gloss { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
.gloss dt { font-family: var(--mono); font-size: 13px; }
.gloss dd { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------- ticker page ---------- */
.ticker-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 40px 0 34px; }
.ticker-hero .code { font-family: var(--mono); font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.ticker-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; line-height: 1.05; margin: 6px 0 16px; }
.verdict { font-size: 19px; color: var(--text); margin: 0 0 18px; max-width: 34em; }
.verdict b { color: var(--buy-deep); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 14px; margin: 30px 0; }
.chart-card .cap { font-size: 14px; color: var(--muted); margin: 4px 2px 16px; }
.chart-legend { display:flex; gap:18px; font-family: var(--mono); font-size:12px; color: var(--muted); margin-top: 6px; }
.chart-legend .k { display:inline-flex; align-items:center; gap:6px; }
.chart-legend .up { width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--buy); }
.chart-legend .down { width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--sell); }
.chart-legend .dot { width:7px;height:7px;border-radius:50%;background:var(--faint); }

/* transactions table */
.txwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table.tx { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.tx th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); text-align: left; font-weight: 500; padding: 14px 16px; border-bottom: 1px solid var(--line); }
table.tx td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tx tr:last-child td { border-bottom: none; }
table.tx .num { font-family: var(--mono); font-size: 13px; text-align: right; }
table.tx .dir { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.dir.buy { color: var(--buy-deep); } .dir.sell { color: var(--sell); } .dir.other { color: var(--faint); }
table.tx .src a { font-family: var(--mono); font-size: 12px; color: var(--muted); }
table.tx .src a:hover { color: var(--buy-deep); }
.role { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---------- footer ---------- */
footer { background: var(--ink); color: var(--inv-muted); padding: 48px 0 40px; margin-top: 40px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
footer .brand { color: var(--inv); margin-bottom: 12px; }
footer p { font-size: 13.5px; line-height: 1.7; margin: 0 0 10px; max-width: 42em; }
footer a { color: var(--inv); text-decoration: underline; text-underline-offset: 2px; }
footer .disclaimer { font-size: 12px; color: #6b7790; border-top: 1px solid var(--ink-line); padding-top: 18px; margin-top: 8px; }
footer .updated { font-family: var(--mono); font-size: 12px; color: var(--inv-muted); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; padding: 52px 24px 48px; }
  .explain .grid { grid-template-columns: 1fr; gap: 26px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .glossary { grid-template-columns: 1fr; }
  footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
  .hero h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }