/* products/forgegis/index.html: page rules (moved from the page's <style>; loads after site.css). */
section { scroll-margin-top: 60px; }
/* Teal text on --grey-bg (light mode only; dark mode keeps --link as is). */
.tinted { --link: var(--link-on-grey); }
@media (prefers-color-scheme: dark) { .tinted { --link: var(--teal); } }
.eyebrow { display: block; color: var(--link); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
figure { margin: 0; }
figcaption { color: var(--text-light); font-size: var(--fs-caption); line-height: 1.55; margin-top: 10px; }
figcaption a { color: inherit; text-decoration: underline; }
code { font-family: var(--font-mono); font-size: var(--fs-code); }

/* ── 1. Hero ── */
.hero { background: var(--gradient-hero); color: var(--white); padding: 84px 24px 76px; text-align: center; }
.hero .eyebrow { color: var(--teal-on-navy); }
.hero .eyebrow a { color: inherit; }
.hero h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 12px; }
.hero .tagline { color: var(--white); font-size: var(--fs-tagline); line-height: 1.5; max-width: 720px; margin: 0 auto 22px; }
.hero .lede { color: var(--on-navy); font-size: var(--fs-body-lg); line-height: 1.7; max-width: 720px; margin: 0 auto; }
.hero-actions { margin-top: 32px; display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-actions .text-link { color: var(--white); font-weight: 600; font-size: var(--fs-sm); text-decoration: underline; }

/* ── Sections ── */
.block { padding: 80px 24px; }
.block.tinted { background: var(--grey-bg); }
.block h2 { font-size: var(--fs-h2); color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; }
.block .intro { font-size: var(--fs-body-lg); line-height: 1.7; max-width: 720px; margin-bottom: 32px; }
.narrow { max-width: 820px; margin: 0 auto; }

/* ── 2. How it runs: three ways beside one visual ── */
.runs-row { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 52px; align-items: center; }
.runs-list h3 { font-size: var(--fs-h3); color: var(--ink); margin: 22px 0 6px; letter-spacing: -0.01em; }
.runs-list h3:first-of-type { margin-top: 0; }
.runs-list p { line-height: 1.7; }
.runs-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-elevated); }

/* ── 3. Benchmark table ── */
.figures { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.figures caption { text-align: left; color: var(--text-light); font-size: var(--fs-caption); padding-bottom: 10px; }
.figures th, .figures td { padding: 18px 24px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: baseline; }
.figures tr:last-child th, .figures tr:last-child td { border-bottom: none; }
.figures th { color: var(--ink); font-size: var(--fs-tagline); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; width: 34%; }
.figures td { line-height: 1.6; }
.slower { margin-top: 18px; font-weight: 600; color: var(--ink); }

/* ── 4. Method ── */
.method ul { list-style: disc; padding-left: 22px; line-height: 1.7; }
.method li { margin-bottom: 8px; }
.method code { overflow-wrap: anywhere; }
.rig { color: var(--text-light); font-size: var(--fs-caption); margin-top: 16px; }
details { margin-top: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 20px; }
summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.by-category { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: var(--fs-sm); }
.by-category th, .by-category td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.by-category tr:last-child td { border-bottom: none; }
.by-category .num { text-align: right; font-variant-numeric: tabular-nums; }
.by-category thead th { color: var(--text-light); font-weight: 600; }

/* ── 5. The race (poster facade → youtube-nocookie iframe on click) ── */
.film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--media-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated); }
.film-frame iframe, .film-frame .film-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* The poster is the film's own operation card (not 16:9); letterbox it on the film's background. */
.film-facade { background: var(--media-letterbox); }
.race figcaption .lead { color: var(--ink); font-size: var(--fs-body); font-weight: 600; display: block; margin-bottom: 4px; }

/* ── 6. Brief ── */
.downloads-grid.solo { max-width: 520px; grid-template-columns: 1fr; }


@media (max-width: 900px) {
    .runs-row { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .hero { padding: 56px 16px 48px; }
    .hero h1 { font-size: var(--fs-display-mobile); }
    .hero .tagline { font-size: var(--fs-body-lg); }
    .block { padding: 56px 16px; }
    .block h2 { font-size: var(--fs-h2-sm); }
    .figures th, .figures td { display: block; width: auto; padding: 14px 18px 0; border-bottom: none; }
    .figures td { padding: 4px 18px 14px; border-bottom: 1px solid var(--border); }
    .figures th { white-space: normal; }
    footer { padding: 36px 16px; }
    nav { padding: 0 16px; }
}