/* Superlinear Academy slide layout library (needs tokens.css).
   Engine-agnostic: every layout lives in a .sa-pad box inside any positioned 1920x1080 container
   (a presentation-skill canvas .frame, or a plain <section class="sa-slide">).
   The content box is x 160-1760, y 130-950 (the presentation skill's content box): the running header and footer sit outside it.
   Sizes are px at 1080p. Body text 26-40 px; nothing under 20 px except source lines and the chrome. */

.sa-slide { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--sa-paper); color: var(--sa-ink); }
.sa-pad { position: absolute; left: 160px; right: 160px; top: 130px; bottom: 130px; box-sizing: border-box; color: var(--sa-ink); }
.sa-pad *, .sa-pad *::before, .sa-pad *::after { box-sizing: border-box; }

/* ======================================================================
   Type
   ====================================================================== */
.sa-kicker { position: relative; font: 600 18px/1.2 var(--sa-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sa-ink-3); }
/* the section marker: a short brand-green rule hanging in the left margin before each kicker */
.sa-kicker::before { content: ""; position: absolute; left: -38px; top: .42em; width: 24px; height: 3px; background: var(--sa-green); }
.sa-kicker.no-rule::before { display: none; }
.sa-label { font: 600 16px/1.25 var(--sa-label); letter-spacing: .18em; text-transform: uppercase; color: var(--sa-ink-3); }
.sa-display { font-family: var(--sa-serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0; font-weight: 400;
  letter-spacing: -.02em; color: var(--sa-ink); text-wrap: balance; margin: 0; }
.sa-h1 { font-size: 96px; line-height: 1.04; letter-spacing: -.025em; }
.sa-h2 { font-size: 64px; line-height: 1.1; }
.sa-h3 { font-size: 44px; line-height: 1.18; }
.sa-lede { font: 400 30px/1.42 var(--sa-sans); color: var(--sa-ink-2); margin: 0; text-wrap: pretty; }
.sa-read { font: 400 30px/1.36 var(--sa-serif); font-optical-sizing: auto; color: var(--sa-ink); margin: 0; }
.sa-small { font: 400 22px/1.45 var(--sa-sans); color: var(--sa-ink-2); }
.sa-source { font: 400 17px/1.35 var(--sa-mono); color: var(--sa-ink-3); letter-spacing: .01em; }
.sa-num { font-family: var(--sa-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.sa-em { color: var(--sa-green); }               /* only on text >= 24 px */
.sa-em-text { color: var(--sa-green-text); }     /* green for small text */
.sa-em-2 { color: var(--sa-second); }
.sa-italic { font-style: italic; }
/* Chinese text: switch the element to the CJK-first stack and relax tracking (negative tracking collides CJK glyphs).
   Two-class selectors so they beat the single-class size rules without !important */
.sa-zh, .sa-zh.sa-kicker, .sa-zh.sa-lede, .sa-zh.sa-small { letter-spacing: .01em; }
.sa-zh.sa-display, .sa-zh .sa-display { font-family: var(--sa-serif-zh); font-weight: 600; letter-spacing: .02em; }
.sa-zh.sa-lede, .sa-zh.sa-small { font-family: var(--sa-sans-zh); }

/* ======================================================================
   Shared devices
   ====================================================================== */
.sa-card { background: var(--sa-card); border: 1.5px solid var(--sa-line); padding: 34px 36px 36px; }
.sa-card .sa-tag { font: 700 15px/1 var(--sa-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sa-ink-3); margin-bottom: 18px; }
/* the lasting / recommended side: green edge with an inset bar */
.sa-card.keep { border-color: var(--sa-green); box-shadow: inset 6px 0 0 var(--sa-green); padding-left: 44px; }
.sa-card.keep .sa-tag { color: var(--sa-green-text); }
/* the expiring / rejected side: oxblood edge and hatching */
.sa-card.drop { border-color: var(--sa-second); background: repeating-linear-gradient(135deg, var(--sa-hatch) 0 2px, transparent 2px 11px), var(--sa-card); }
.sa-card.drop .sa-tag { color: var(--sa-second); }
.sa-card .frameline { position: absolute; inset: 10px; border: 1px solid var(--sa-rule); pointer-events: none; }
.sa-hair { border-top: 1px solid var(--sa-rule); }
.sa-hair-strong { border-top: 1.5px solid var(--sa-line); }
.sa-note { font: italic 400 30px/1.35 var(--sa-serif); color: var(--sa-ink); padding-left: 26px; border-left: 2px solid var(--sa-green); }
/* figures, plates and photos: hairline frame on the card colour, never a shadow */
.sa-frame { background: var(--sa-card); border: 1px solid var(--sa-rule); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sa-frame > img, .sa-frame > svg, .sa-frame > video { display: block; max-width: 100%; max-height: 100%; }
/* screenshots, recordings and dark media: no mat, the media meets the hairline */
.sa-frame.tight { padding: 0 !important; background: transparent; }
/* dark footage: letterbox in near-black, never in a light card mat */
.sa-frame.dark { background: #0b0b0b; border-color: #0b0b0b; }
/* a photo, plate or recording that must never be cropped: shown whole, letterboxed if needed */
img.sa-uncropped, video.sa-uncropped { width: 100%; height: 100%; object-fit: contain; }
/* draft content. On any element, .sa-placeholder is a MARKER that render.py lists (and --final fails on): put it on a
   stand-in image or a stand-in text span, and remove it when the real content goes in.
   On a <div> it is also the visible box for a missing asset: unmistakable, never mistaken for content. */
div.sa-placeholder { position: relative; width: 100%; height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 40px; text-align: center; border: 2px dashed var(--sa-second);
  background: repeating-linear-gradient(135deg, var(--sa-hatch) 0 2px, transparent 2px 11px), var(--sa-card); }
div.sa-placeholder .sa-tag { font: 700 15px/1.2 var(--sa-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sa-second); }
div.sa-placeholder .what { font: 400 34px/1.2 var(--sa-serif); color: var(--sa-ink); max-width: 80%; }
div.sa-placeholder .spec { font: 400 20px/1.4 var(--sa-sans); color: var(--sa-ink-2); max-width: 80%; }
/* engravings and photos read as print: neutral grey ink */
.sa-plate-img { filter: grayscale(1) contrast(1.08) brightness(.92); }

/* ======================================================================
   01 Cover
   ====================================================================== */
.sa-cover { display: grid; grid-template-columns: 860px 1fr; column-gap: 110px; align-items: center; }
.sa-cover .text { display: flex; flex-direction: column; gap: 0; }
.sa-cover .sa-kicker { margin-bottom: 34px; }
.sa-cover .sa-h1 { font-size: 104px; }
/* long titles (about 37-65 characters): three lines at 80 px. Past ~65 characters, shorten the title (layouts.md) */
.sa-cover.long .sa-h1 { font-size: 80px; line-height: 1.07; }
.sa-cover .sa-lede { margin-top: 40px; max-width: 760px; }
.sa-cover .byline { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--sa-rule); display: flex; gap: 28px; align-items: baseline; }
.sa-cover .byline .who { font: 500 24px/1.3 var(--sa-sans); color: var(--sa-ink); }
.sa-cover .byline .when { font: 400 20px/1.3 var(--sa-mono); color: var(--sa-ink-3); }
.sa-cover .art { height: 640px; display: flex; align-items: center; justify-content: center; }
.sa-cover .art svg { width: 100%; height: 100%; overflow: visible; }

/* ======================================================================
   02 Section opener
   ====================================================================== */
.sa-section { display: flex; flex-direction: column; justify-content: center; }
.sa-section .sa-numeral { position: absolute; right: -20px; top: 50%; transform: translateY(-54%); font: italic 300 560px/1 var(--sa-serif);
  color: var(--sa-ink); opacity: .06; pointer-events: none; user-select: none; }
.sa-section .sa-kicker { margin-bottom: 30px; }
.sa-section .sa-h1 { max-width: 1250px; }
.sa-section .sa-lede { margin-top: 36px; max-width: 980px; }
.sa-section .marker { margin-top: 56px; width: 96px; height: 4px; background: var(--sa-green); }

/* ======================================================================
   03 One-claim headline
   ====================================================================== */
.sa-claim { display: flex; flex-direction: column; justify-content: center; }
.sa-claim .sa-kicker { margin-bottom: 32px; }
.sa-claim .sa-h1 { max-width: 1480px; }
.sa-claim .support { margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--sa-rule); display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: baseline; }
.sa-claim .support .sa-lede { max-width: 1080px; }

/* ======================================================================
   04 Two-column compare
   ====================================================================== */
.sa-compare { display: grid; grid-template-rows: auto auto auto; row-gap: 46px; align-content: center; }
.sa-compare .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.sa-compare .sa-card { position: relative; display: flex; flex-direction: column; min-height: 420px; }
.sa-compare .sa-card .name { font: 400 60px/1.05 var(--sa-serif); font-optical-sizing: auto; letter-spacing: -.02em; color: var(--sa-ink); margin-bottom: auto; padding-bottom: 40px; }
.sa-compare .sa-card .sa-read { font-size: 34px; line-height: 1.28; }
.sa-compare .sa-card .sa-small { margin-top: 18px; }
.sa-compare .conclusion { font-size: 40px; line-height: 1.25; }

/* ======================================================================
   05 Numbered steps
   ====================================================================== */
.sa-steps { display: grid; grid-template-columns: 560px 1fr; column-gap: 100px; align-content: center; }
.sa-steps .head .sa-kicker { margin-bottom: 28px; }
.sa-steps ol { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sa-rule); }
.sa-steps li { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; padding: 28px 0 30px; border-top: 1px solid var(--sa-rule); }
.sa-steps li .n { font: 500 22px/1 var(--sa-mono); color: var(--sa-ink-3); }
.sa-steps li .t { font: 400 38px/1.22 var(--sa-serif); font-optical-sizing: auto; color: var(--sa-ink); }
.sa-steps li .d { grid-column: 2; margin-top: 8px; font: 400 23px/1.4 var(--sa-sans); color: var(--sa-ink-2); }
.sa-steps li.now .n { color: var(--sa-green-text); }
.sa-steps li.now { border-top: 2px solid var(--sa-green); }

/* ======================================================================
   06 Big-number stat
   ====================================================================== */
.sa-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 90px; align-items: center; }
.sa-stat .big { font: 300 330px/.86 var(--sa-serif); font-optical-sizing: none; font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0; letter-spacing: -.045em; color: var(--sa-ink); font-variant-numeric: lining-nums; }
/* green only when the number is the point you are making (your result), never for someone else's number */
.sa-stat .big.accent { color: var(--sa-green); }
.sa-stat .big .unit { font-size: .42em; letter-spacing: -.02em; margin-left: .04em; }
.sa-stat .side { border-left: 1.5px solid var(--sa-line); padding-left: 48px; }
.sa-stat .side .sa-h3 { margin-top: 20px; }
.sa-stat .side .sa-lede { margin-top: 24px; }
.sa-stat .side .sa-source { margin-top: 34px; }

/* ======================================================================
   07 Chart (inline SVG)
   ====================================================================== */
.sa-chart { display: grid; grid-template-rows: auto 1fr auto; row-gap: 30px; }
.sa-chart:has(> .takeaway) { grid-template-rows: auto 1fr auto auto; row-gap: 24px; }
.sa-chart .takeaway { font: 400 36px/1.25 var(--sa-serif); font-optical-sizing: auto; color: var(--sa-ink); text-wrap: balance; }
/* chart with a side note: plot left, note column right */
.sa-chart.with-note .plot { display: grid; grid-template-columns: 1fr 400px; column-gap: 70px; align-items: center; }
.sa-chart.with-note .side-note { align-self: center; }
.sa-chart.with-note .side-note .sa-note { font-size: 28px; }
.sa-chart.with-note .side-note .sa-note.second { border-left-color: var(--sa-second); }
.sa-chart.with-note .side-note .sa-small { margin-top: 16px; padding-left: 28px; }
.sa-chart .plot { position: relative; }
.sa-chart svg { width: 100%; height: 100%; overflow: visible; }
.sa-chart svg text { font-family: var(--sa-mono); font-size: 20px; fill: var(--sa-ink-2); }
.sa-chart svg .cat { font-family: var(--sa-sans); font-size: 22px; fill: var(--sa-ink-2); }
.sa-chart svg .value { font-family: var(--sa-serif); font-size: 40px; fill: var(--sa-ink); }
.sa-chart svg .value.hi { fill: var(--sa-green); }
.sa-chart svg .value.sm { font-size: 28px; }                 /* tight rows (horizontal bars) */
.sa-chart svg .sub { font-family: var(--sa-sans); font-size: 18px; fill: var(--sa-ink-3); }   /* muted second line under a category */
.sa-chart svg .axis { stroke: var(--sa-line); stroke-width: 1.5; }
.sa-chart svg .grid { stroke: var(--sa-rule); stroke-width: 1; }
.sa-chart svg .bar { fill: var(--sa-card); stroke: var(--sa-line); stroke-width: 1.5; }
.sa-chart svg .bar.hi { fill: var(--sa-green); stroke: var(--sa-green); }
.sa-chart svg .bar.ghost { fill: none; stroke: var(--sa-ink-3); stroke-dasharray: 6 6; }
.sa-chart svg .callout { font-family: var(--sa-serif); font-style: italic; font-size: 28px; fill: var(--sa-ink); }
.sa-chart svg .callout-line { stroke: var(--sa-ink-2); stroke-width: 1.5; fill: none; }

/* ======================================================================
   08 Quote
   ====================================================================== */
.sa-quote { display: flex; flex-direction: column; justify-content: center; }
.sa-quote blockquote { margin: 0; border-left: 4px solid var(--sa-green); padding: 8px 0 8px 54px; max-width: 1500px; }
.sa-quote .q { font: 400 68px/1.18 var(--sa-serif); font-optical-sizing: auto; letter-spacing: -.015em; color: var(--sa-ink); text-wrap: balance; }
.sa-quote .q::before { content: "\201C"; } .sa-quote .q::after { content: "\201D"; }
.sa-quote .who { margin-top: 34px; font: 500 24px/1.3 var(--sa-sans); color: var(--sa-ink); }
.sa-quote .who .sa-source { margin-left: 16px; }
.sa-quote .gloss { margin-top: 70px; margin-left: 58px; max-width: 1100px; }

/* ======================================================================
   09 Image / plate with caption
   ====================================================================== */
.sa-figure { display: grid; grid-template-columns: 900px 1fr; column-gap: 90px; align-items: center; }
.sa-figure figure { margin: 0; }
.sa-figure .sa-frame { height: 600px; padding: 30px; }
.sa-figure figcaption { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.sa-figure figcaption .fig { font: 500 17px/1 var(--sa-mono); color: var(--sa-ink-3); letter-spacing: .06em; text-transform: uppercase; }
.sa-figure figcaption .cap { font: italic 400 24px/1.35 var(--sa-serif); color: var(--sa-ink-2); }
.sa-figure .text .sa-kicker { margin-bottom: 26px; }
.sa-figure .text .sa-lede { margin-top: 30px; }

/* ======================================================================
   10 Timeline
   ====================================================================== */
.sa-timeline { display: grid; grid-template-rows: auto 1fr; row-gap: 20px; }
.sa-timeline .track { position: relative; align-self: center; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-top: 1.5px solid var(--sa-line); }
.sa-timeline .tick { position: relative; padding: 46px 40px 0 0; }
.sa-timeline .tick::before { content: ""; position: absolute; left: 0; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--sa-paper); border: 2.5px solid var(--sa-line); }
.sa-timeline .tick.past::before { border-color: var(--sa-ink-3); }
.sa-timeline .tick.now::before { background: var(--sa-green); border-color: var(--sa-green); }
.sa-timeline .tick .when { font: 500 22px/1 var(--sa-mono); color: var(--sa-ink-2); }
.sa-timeline .tick.now .when { color: var(--sa-green-text); }
.sa-timeline .tick .what { margin-top: 18px; font: 400 40px/1.15 var(--sa-serif); font-optical-sizing: auto; color: var(--sa-ink); }
.sa-timeline .tick .why { margin-top: 14px; font: 400 24px/1.42 var(--sa-sans); color: var(--sa-ink-2); }
/* ======================================================================
   11 Speaker bio (uncropped headshot)
   ====================================================================== */
.sa-bio { display: grid; grid-template-columns: 560px 1fr; column-gap: 110px; align-items: center; }
.sa-bio .photo { width: 560px; height: 560px; background: var(--sa-card); border: 1px solid var(--sa-rule); }
.sa-bio .photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sa-bio .sa-kicker { margin-bottom: 26px; }
.sa-bio .position { margin-top: 22px; font: 500 26px/1.35 var(--sa-sans); color: var(--sa-ink-2); }
.sa-bio ul { list-style: none; margin: 40px 0 0; padding: 0; border-bottom: 1px solid var(--sa-rule); }
.sa-bio li { padding: 18px 0 20px; border-top: 1px solid var(--sa-rule); font: 400 28px/1.35 var(--sa-serif); color: var(--sa-ink); }
.sa-bio .links { margin-top: 28px; font: 400 20px/1.4 var(--sa-mono); color: var(--sa-ink-3); }

/* ======================================================================
   12 CTA / course promo
   ====================================================================== */
.sa-cta { display: grid; grid-template-columns: 1fr 600px; column-gap: 110px; align-items: center; }
.sa-cta .sa-kicker { margin-bottom: 26px; }
.sa-cta ul { list-style: none; margin: 40px 0 0; padding: 0; }
.sa-cta li { position: relative; padding: 14px 0 14px 44px; font: 400 30px/1.32 var(--sa-serif); color: var(--sa-ink); }
.sa-cta li::before { content: ""; position: absolute; left: 0; top: 30px; width: 22px; height: 3px; background: var(--sa-green); }
.sa-cta .action { margin-top: 52px; display: flex; align-items: center; gap: 30px; }
/* the one solid green block in the system: a call to action, white text at >= 24 px semibold (4.8:1) */
.sa-button { display: inline-block; background: var(--sa-green); color: #fff; font: 600 26px/1 var(--sa-label); letter-spacing: .04em; padding: 22px 34px; }
.sa-cta .url { font: 500 26px/1 var(--sa-mono); color: var(--sa-ink); }
.sa-spec { border-top: 1.5px solid var(--sa-line); }
.sa-spec .row { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: baseline; padding: 22px 0 24px; border-bottom: 1px solid var(--sa-rule); }
.sa-spec .row .k { font: 600 15px/1.3 var(--sa-label); letter-spacing: .18em; text-transform: uppercase; color: var(--sa-ink-3); }
.sa-spec .row .v { font: 400 30px/1.25 var(--sa-serif); color: var(--sa-ink); }

/* ======================================================================
   13 Q&A / closing
   ====================================================================== */
.sa-close { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sa-close .sa-h1 { font-size: 132px; }
.sa-close .sa-lede { margin-top: 30px; max-width: 1000px; }
.sa-close .sa-logo { margin-top: 84px; height: 140px; }   /* full primary lockup: its clear space is built into the file */
.sa-close .contact { margin-top: 8px; font: 400 22px/1.4 var(--sa-mono); color: var(--sa-ink-3); }

/* a rolling counter (presentation-skill data-count) inside the big number keeps the serif */
.sa-stat .big .counter { font-family: inherit; font-weight: inherit; font-variant-numeric: lining-nums tabular-nums; }

/* ======================================================================
   14 Media: one recording or screenshot with its explanation
   ====================================================================== */
.sa-media { display: grid; grid-template-columns: 1060px 1fr; column-gap: 80px; align-items: center; }
.sa-media figure { margin: 0; }
.sa-media .sa-frame { width: 1060px; aspect-ratio: 16 / 9; }
.sa-media figcaption, .sa-pair figcaption { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.sa-media figcaption .fig, .sa-pair figcaption .fig { font: 500 17px/1 var(--sa-mono); color: var(--sa-ink-3); letter-spacing: .06em; text-transform: uppercase; }
.sa-media figcaption .cap, .sa-pair figcaption .cap { font: italic 400 24px/1.35 var(--sa-serif); color: var(--sa-ink-2); }
.sa-media .text .sa-kicker { margin-bottom: 26px; }
.sa-media .text .sa-lede { margin-top: 28px; }

/* ======================================================================
   15 Media pair: two recordings side by side, each with its number
   ====================================================================== */
.sa-pair { display: grid; grid-template-rows: auto 1fr auto; row-gap: 34px; }
.sa-pair .items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; }
.sa-pair .sa-frame { width: 100%; aspect-ratio: 16 / 9; }
.sa-pair .item .meta { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: baseline; }
.sa-pair .item .num { font: 300 76px/1 var(--sa-serif); font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: lining-nums; }
.sa-pair .item .num .unit { font-size: .4em; margin-left: .08em; letter-spacing: 0; }
.sa-pair .item .num.accent { color: var(--sa-green); }
.sa-pair .item .who { font: 600 16px/1.3 var(--sa-label); letter-spacing: .18em; text-transform: uppercase; color: var(--sa-ink-3); }
.sa-pair .item .desc { margin-top: 6px; font: 400 22px/1.4 var(--sa-sans); color: var(--sa-ink-2); }
.sa-pair .conclusion { font-size: 36px; line-height: 1.25; }

/* ======================================================================
   16 Table / matrix
   ====================================================================== */
.sa-tablewrap { display: grid; grid-template-rows: auto 1fr auto; row-gap: 30px; }
.sa-table { width: 100%; border-collapse: collapse; align-self: center; }
.sa-table th { font: 600 15px/1.3 var(--sa-label); letter-spacing: .18em; text-transform: uppercase; color: var(--sa-ink-3); text-align: left;
  padding: 0 24px 16px 0; border-bottom: 1.5px solid var(--sa-line); vertical-align: bottom; }
.sa-table td { font: 400 28px/1.3 var(--sa-serif); color: var(--sa-ink); padding: 20px 24px 22px 0; border-bottom: 1px solid var(--sa-rule); vertical-align: top; }
.sa-table th[scope="row"] { font-size: 15px; padding-top: 28px; border-bottom: 1px solid var(--sa-rule); vertical-align: top; width: 220px; }
.sa-table td .sa-small { display: block; margin-top: 4px; font-size: 20px; color: var(--sa-ink-3); }
/* the column you recommend: a green rule on its header, nothing louder */
.sa-table th.ours { color: var(--sa-green-text); box-shadow: inset 0 -4px 0 var(--sa-green); }
.sa-table td.num, .sa-table th.num { text-align: right; font-family: var(--sa-mono); font-size: 26px; font-variant-numeric: tabular-nums; }