/* Frozen 2026-10-16. Oleg: "website design is better than all of these", "between 1 and 3 and i dont mind
   occasional green or black background", "definitely not 4". Source: seismisk-web src/index.css + App.tsx,
   scaled for a 1920x1080 slide (site max width 1280 -> about x1.5). Small labels stay sentence case on slides
   (the site sets them in caps; Oleg: no caps on slides).
   2026-10-20: no IBM Plex Mono anywhere, numbers included (Oleg: "i dont like the IBM font numbering, anywhere"). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
:root {
  --ink:#111214; --green:#37D931; --on-green:#0B1A0A; --grey:#5f636a; --line:#d3d6db; --pale:#f2f4f6;
  --pad-x:120px; --pad-top:110px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { width:1920px; height:1080px; overflow:hidden; }
body { font-family:Archivo, Helvetica, Arial, sans-serif; color:var(--ink); background:#fff; position:relative; -webkit-font-smoothing:antialiased; }
.abs { position:absolute; }

/* grounds: white by default; pale = the site's grey sections (a whole slide ground, never a pane fill);
   ink = karaoke/footer; green = final band. Panes/cards follow the site: white, 1.5px ink border, optional green offset. */
body.pale { background:var(--pale); }
body.ink { background:var(--ink); color:#fff; }
body.green { background:var(--green); color:var(--on-green); }

/* type */
.hero { font-weight:800; font-size:150px; letter-spacing:-.035em; line-height:.98; }
.h1 { font-weight:800; font-size:84px; letter-spacing:-.03em; line-height:1.02; }
.h2 { font-weight:800; font-size:66px; letter-spacing:-.025em; line-height:1.05; }
.h3 { font-weight:800; font-size:40px; letter-spacing:-.015em; line-height:1.12; }
.lead { font-weight:700; font-size:34px; line-height:1.3; }
.body { font-size:27px; line-height:1.5; color:rgba(17,18,20,.8); }
body.ink .body { color:rgba(255,255,255,.75); }
.kicker { font-family:Archivo, Helvetica, Arial, sans-serif; font-size:20px; letter-spacing:.02em; color:var(--grey); }
body.ink .kicker { color:rgba(255,255,255,.6); }
body.green .kicker { color:rgba(11,26,10,.75); }

/* devices */
.rule { position:relative; padding-top:16px; }
.rule::before { content:""; position:absolute; top:0; left:0; width:78px; height:4px; background:var(--green); }
.num { font-weight:800; line-height:.8; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:2.2px var(--ink); }
.num.on { color:var(--green); -webkit-text-stroke:0; }
body.ink .num { -webkit-text-stroke-color:#fff; }
.mark { background:linear-gradient(transparent 62%, var(--green) 62%, var(--green) 92%, transparent 92%); padding:0 .04em; }
.uline { text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:4px; text-underline-offset:6px; }
.card { background:#fff; border:2px solid var(--ink); }
.offset { box-shadow:15px 15px 0 var(--green); }
.callout { border-left:5px solid var(--green); padding-left:24px; }
.stat { background:var(--ink); color:#fff; padding:40px 44px; display:inline-block; }
.stat .big { font-weight:800; font-size:110px; letter-spacing:-.04em; line-height:1; color:var(--green); }
.stat .kicker { color:rgba(255,255,255,.7); margin-top:14px; }
.btn { display:inline-flex; align-items:center; gap:12px; background:var(--green); color:var(--on-green); font-weight:800; font-size:26px; padding:22px 36px; }
.btn.dark { background:var(--ink); color:#fff; }
.rows > * { border-bottom:3px solid var(--ink); }
.rows { border-top:3px solid var(--ink); }

/* frame */
.word { position:absolute; right:var(--pad-x); bottom:40px; font-weight:800; font-size:22px; letter-spacing:-.01em; } /* bottom right (Oleg 2026-10-16: not above the headline, not in the thin top margin) */
.foot { position:absolute; right:var(--pad-x); bottom:48px; font-family:Archivo, Helvetica, Arial, sans-serif; font-size:18px; color:var(--grey); }
body.ink .foot { color:rgba(255,255,255,.5); }
body.green .foot { color:rgba(11,26,10,.7); }