.hero-bg {
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(214, 39, 40, .08), transparent 60%),
    radial-gradient(50rem 25rem at 90% 0%, rgba(31, 119, 180, .08), transparent 60%);
}

.section { padding: 5rem 0; }

.h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: -.01em; color: #0f172a; margin-bottom: 1rem; }
.h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 600; color: #0f172a; margin-bottom: .5rem; }
.caption { margin: 1rem auto 0; max-width: 56rem; font-size: .95rem; line-height: 1.65; color: #64748b; }

.author { color: #1e293b; border-bottom: 1px dashed #cbd5e1; transition: color .15s, border-color .15s; }
.author:hover { color: #d62728; border-color: #d62728; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem; border-radius: 9999px;
  background: #0f172a; color: #fff; font-weight: 600; font-size: .95rem;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.btn:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, .18); }
.btn-accent { background: #d62728; }
.btn-accent:hover { background: #b91c1c; }
.btn-sm {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: .5rem;
  border: 1px solid #e2e8f0; font-size: .85rem; font-weight: 500; color: #334155; background: #fff;
}
.btn-sm:hover { border-color: #d62728; color: #d62728; }

.stat { border-radius: 1rem; border: 1px solid #e2e8f0; background: rgba(255, 255, 255, .8); padding: 1.1rem 1rem; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; color: #d62728; line-height: 1.1; }
.stat-label { margin-top: .35rem; font-size: .8rem; color: #475569; line-height: 1.35; }

.card { position: relative; border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.card-step {
  position: absolute; top: -0.9rem; left: 1.25rem; height: 1.8rem; width: 1.8rem; border-radius: 9999px;
  background: #d62728; color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center;
}
.math { margin-top: .75rem; overflow-x: auto; font-size: .92rem; }

.tab { padding: .5rem 1rem; border-radius: 9999px; border: 1px solid #e2e8f0; background: #fff; font-size: .875rem; font-weight: 500; color: #475569; transition: all .15s; }
.tab:hover { border-color: #d62728; color: #d62728; }
.tab-active, .tab-active:hover { background: #0f172a; border-color: #0f172a; color: #fff; }

.hl-ours { background: #fee2e2; color: #b91c1c; font-weight: 600; padding: 1px 5px; border-radius: 4px; }

.zoomable { cursor: zoom-in; }

/* ── Chrome ── */
.nav-scrolled { background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.more-btn { border-radius: 9999px; border: 1px solid #e2e8f0; background: #fff; padding: .4rem .8rem; font-size: .75rem; font-weight: 600; color: #334155; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.more-btn:hover { border-color: #d62728; color: #d62728; }
.more-menu { position: absolute; right: 0; margin-top: .5rem; width: 20rem; overflow: hidden; border-radius: .75rem; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 20px 40px rgba(15, 23, 42, .15); }
.more-menu a { display: block; padding: .75rem 1rem; border-top: 1px solid #f1f5f9; }
.more-menu a:first-child { border-top: 0; }
.more-menu a:hover { background: #f8fafc; }
.footer a { text-decoration: underline; }
.footer a:hover { color: #d62728; }

/* ── Hero ── */
.badge { display: inline-flex; border-radius: 9999px; background: #fef2f2; padding: .25rem .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #b91c1c; box-shadow: inset 0 0 0 1px #fee2e2; }
.hero-title { margin-top: 1.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #0f172a; font-size: clamp(2.2rem, 5.5vw, 3.75rem); }
.hero-title strong { color: #d62728; font-weight: 700; }

/* ── Sections ── */
.sec-alt { background: #f8fafc; }
.sec-dark { background: #0f172a; color: #e2e8f0; }
.sec-dark .h2 { color: #fff; }
.lead { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; font-size: 1.05rem; line-height: 1.75; color: #475569; }
.sec-dark .lead { color: #94a3b8; }
.body-text { font-size: 1.05rem; line-height: 1.75; color: #334155; margin-bottom: 1rem; }
.h3-section { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 600; color: #0f172a; margin: 3rem 0 .75rem; }

/* ── Components ── */
.fig { margin: 1.5rem 0 2.5rem; }
.fig-frame { border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; padding: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.fig .caption { text-align: left; }
.panel { border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.data-table { width: 100%; font-size: .875rem; }
.data-table thead { background: #f1f5f9; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.data-table th, .data-table td { padding: .5rem .6rem; white-space: nowrap; }
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: #d62728; }
.data-table tbody tr { border-top: 1px solid #f1f5f9; }
.data-table .row-hl { background: #fef2f2; color: #b91c1c; font-weight: 600; }
.dot { display: inline-block; height: .6rem; width: .6rem; border-radius: 9999px; margin-right: .5rem; }
.demo-root { min-height: 16rem; border-radius: 1rem; border: 1px dashed #475569; background: rgba(30, 41, 59, .5); padding: 2rem; }
.bib { overflow-x: auto; border-radius: .75rem; background: #0f172a; padding: 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: #f1f5f9; }

/* Notice box for links that are not public yet */
.notice {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  max-width: calc(100vw - 2rem); padding: .875rem 1rem .875rem 1.125rem;
  border-radius: .75rem; background: #0f172a; color: #f8fafc;
  font-size: .9rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  opacity: 0; pointer-events: none; transform: translate(-50%, 1rem);
  transition: opacity .2s ease, transform .2s ease;
}
.notice-show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.notice i { color: #f87171; }
.notice button { margin-left: .25rem; font-size: 1.25rem; line-height: 1; color: #94a3b8; }
.notice button:hover { color: #fff; }
.notice span { flex: 1; }

/* Chart selectors: a label (category) followed by a segmented control (its options) */
.dim-panel {
  display: grid; gap: .6rem; width: fit-content; max-width: 100%;
  margin: 0 auto 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff;
}
.dim-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.dim-label {
  width: 6.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #475569; text-align: left;
}
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: .6rem; background: #f1f5f9; }
.seg-btn { padding: .3rem .8rem; border-radius: .45rem; font-size: .85rem; color: #475569; }
.seg-btn:hover { color: #b91c1c; background: #fff; }
.seg-active, .seg-active:hover { background: #d62728; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 640px) { .dim-label { width: 100%; } }

/* Keep the first figure close to the hero stats */
#hero { padding-bottom: 1.5rem; }
#overview { padding-top: 0; }
#overview .fig { margin-top: 0; }