/* One idea per slide, big words, two pictures that come back again and again: the architecture in CALM Hub, and the
   pull request on GitHub. Colours are GitHub's, so the slides and the screenshots speak the same language:
   green = goes through, red = needs a person, blue = the architecture, gold = the Client Ledger. */
:root {
  --ink: #1f2328; --muted: #59636e; --line: #d1d9e0; --paper: #ffffff; --wash: #f6f8fa; --night: #0d1b2a;
  --green: #1a7f37; --green-bg: #dafbe1; --red: #cf222e; --red-bg: #ffebe9; --blue: #0969da; --blue-bg: #ddf4ff;
  --gold: #9a6700; --gold-bg: #fff8c5;
}
html, body, .reveal-viewport { background: #fff; }
.reveal { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink); font-size: 40px; }
.reveal .slides section { text-align: left; box-sizing: border-box; height: 100%; padding: 110px 120px 90px; }
.reveal .slides section.present { display: flex !important; flex-direction: column; }
.reveal h1, .reveal h2, .reveal h3, .reveal p { font-family: inherit; text-transform: none; letter-spacing: 0; margin: 0; color: inherit; }
.reveal h2 { font-size: 76px; font-weight: 700; line-height: 1.08; margin-bottom: 18px; }
.reveal .sub { font-size: 40px; line-height: 1.3; color: var(--muted); margin-bottom: 30px; max-width: 1560px; }
.reveal .sub b { color: var(--ink); }
.reveal a { color: var(--blue); }
.reveal code, .reveal pre { font-family: "SF Mono", Menlo, Consolas, monospace; }

/* Where we are in the story: a small strip across the top of every content slide. */
.reveal .chapters { position: absolute; top: 40px; left: 120px; right: 120px; display: flex; gap: 34px; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: #8c959f; }
.reveal .chapters .on { color: var(--ink); font-weight: 700; }

/* Title and closing: the conference's artwork. */
.reveal section.cover { color: #fff; padding: 0; }
.reveal section.cover .logo { position: absolute; left: 130px; top: 230px; width: 700px; }
.reveal section.cover .block { position: absolute; left: 930px; top: 230px; width: 900px; }
.reveal section.cover h1 { font-size: 100px; line-height: 1.05; font-weight: 700; }
.reveal section.cover .tag { font-size: 52px; line-height: 1.2; margin-top: 36px; font-weight: 700; }
.reveal section.cover .who { font-size: 32px; margin-top: 36px; line-height: 1.4; }
.reveal section.cover a { color: #fff; }

/* Statements: dark, one sentence. */
.reveal section.dark { background: var(--night); color: #fff; justify-content: center; }
.reveal section.dark .chapters { color: #5b6b7f; }
.reveal section.dark .chapters .on { color: #fff; }
.reveal .big { font-size: 96px; font-weight: 700; line-height: 1.1; max-width: 1640px; }
.reveal .big em { font-style: normal; color: #7ee2a8; }
.reveal .after { font-size: 44px; line-height: 1.35; margin-top: 40px; color: #b6c2d1; max-width: 1500px; }

/* A slide with a picture on the left and a screen on the right. */
.reveal .split { display: grid; grid-template-columns: 720px 1fr; gap: 56px; align-items: center; flex: 1; min-height: 0; }
.reveal .caption { font-size: 30px; line-height: 1.35; color: var(--muted); }
.reveal .caption b { color: var(--ink); }

/* Words in the middle of the slide. */
.reveal .middle { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Numbers, cards, people. */
.reveal .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 20px; }
.reveal .card { background: var(--wash); border-radius: 18px; padding: 34px 36px; border-top: 10px solid var(--line); }
.reveal .card.ok { border-top-color: var(--green); }
.reveal .card.blue { border-top-color: var(--blue); }
.reveal .card.gold { border-top-color: #d4a72c; }
.reveal .card h3 { font-size: 40px; font-weight: 700; margin-bottom: 14px; line-height: 1.15; }
.reveal .card p { font-size: 30px; line-height: 1.35; color: var(--muted); }
.reveal .card .who { font-family: "SF Mono", Menlo, monospace; font-size: 22px; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 4px 14px; display: inline-block; margin-bottom: 18px; }
/* The catalog controls the demo enforced, under the three parts; the catalog's purple. */
.reveal .seen { margin-top: 44px; }
.reveal .seen h3 { font-size: 32px; font-weight: 700; color: #4600d2; margin-bottom: 16px; }
.reveal .seen ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.reveal .seen li { background: #f4efff; border-left: 8px solid #4600d2; border-radius: 0 14px 14px 0; padding: 16px 22px; }
.reveal .seen li b { display: block; font-size: 26px; line-height: 1.2; margin-bottom: 6px; }
.reveal .seen li span { display: block; font-size: 22px; line-height: 1.35; color: var(--muted); }
.reveal .card img { height: 64px; margin-bottom: 18px; filter: brightness(0); }
.reveal .card img.keep { filter: none; }

/* Code, kept short. */
.reveal pre.json { font-size: 25px; line-height: 1.4; background: var(--wash); border: 2px solid var(--line); border-radius: 14px; padding: 28px 34px; margin: 0; white-space: pre; box-shadow: none; width: auto; color: var(--ink); }
.reveal pre.json .k { color: #0550ae; }
.reveal pre.json .s { color: #0a3069; }
.reveal pre.json .hl { background: var(--gold-bg); border-radius: 4px; }

/* The flow on "every pull request is checked against the architecture". */
.reveal svg.flow { width: 100%; height: auto; display: block; margin-top: 10px; }

/* The opening pull request, drawn like GitHub's. */
.reveal .pr { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 36px 44px; font-size: 32px; line-height: 1.4; max-width: 1500px; box-shadow: 0 10px 30px rgba(31,35,40,.10); }
.reveal .pr .title { font-size: 52px; font-weight: 400; margin-bottom: 14px; }
.reveal .pr .title span { color: var(--muted); }
.reveal .pr .meta { color: var(--muted); margin-bottom: 24px; }
.reveal .pr .meta b { color: var(--ink); }
.reveal .pr .state { display: inline-block; background: #8250df; color: #fff; font-weight: 700; border-radius: 999px; padding: 4px 22px; margin-right: 14px; font-size: 30px; }
.reveal .pr ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.reveal .pr li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 2px solid var(--line); }
.reveal .pr .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.reveal .pr .dot.merged { background: #8250df; }
.reveal .pr code { font-size: 0.85em; background: var(--wash); border-radius: 6px; padding: 2px 10px; }
.reveal .pr .muted { color: var(--muted); }

/* Links at the end. */

.reveal .slide-number { font-size: 16px; background: transparent; color: #8c959f; }

/* The decorator slide: the real JSON, numbered, with what each part says beside it. */
.reveal .split.decorator { grid-template-columns: 1fr 560px; gap: 50px; }
.reveal .split.decorator pre.json { font-size: 22px; line-height: 1.45; }
.reveal pre.json .num, .reveal ol.legend li::before { display: inline-block; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; text-align: center; }
.reveal pre.json .num { margin-left: 12px; vertical-align: 1px; }
.reveal ol.legend { list-style: none; counter-reset: l; margin: 0; padding: 0; }
.reveal ol.legend li { counter-increment: l; position: relative; padding-left: 54px; font-size: 28px; line-height: 1.3; margin: 0 0 22px; color: var(--muted); }
.reveal ol.legend li b { color: var(--ink); }
.reveal ol.legend li::before { content: counter(l); position: absolute; left: 0; top: 0; }

/* Under the flow: what a CALM control is, and the three places it can go. */
.reveal .calm-controls { display: grid; grid-template-columns: 640px 1fr; gap: 40px; margin-top: 40px; align-items: stretch; }
.reveal .cc-what { background: var(--blue-bg); border-left: 10px solid var(--blue); border-radius: 0 18px 18px 0; padding: 26px 32px; }
.reveal .cc-what img { height: 56px; margin-bottom: 12px; }
.reveal .cc-what h3 { font-size: 36px; margin-bottom: 10px; color: var(--blue); }
.reveal .cc-what p { font-size: 27px; line-height: 1.35; }
.reveal .cc-where { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.reveal .cc-where li { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto auto; column-gap: 24px; align-items: baseline; background: var(--wash); border: 2px solid var(--line); border-radius: 14px; padding: 14px 22px; }
.reveal .cc-where li b { font-size: 30px; grid-row: 1 / 3; align-self: center; }
.reveal .cc-where li span { font-size: 24px; color: var(--muted); }
.reveal .cc-where li code { font-size: 20px; color: var(--blue); white-space: nowrap; }
.reveal .cc-where li.on { background: var(--gold-bg); border-color: #d4a72c; }

/* ergo: the rule as data on the left, Rego's answer against ergo's report on the right, in ergo's own colours. */
.reveal h2.ergo-title { display: flex; align-items: center; gap: 30px; }
.reveal h2.ergo-title img { height: 84px; width: auto; }
.reveal .ergo-slide { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; flex: 1; min-height: 0; }
.reveal .ergo-col { display: flex; flex-direction: column; min-width: 0; }
.reveal .where { font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 10px; }
.reveal pre.json.ergo-policy { font-size: 23px; line-height: 1.5; margin: 0; white-space: pre-wrap; }
.reveal .ergo-note { font-size: 25px; line-height: 1.35; color: var(--muted); margin-top: 18px; }
.reveal .ergo-vs { display: flex; flex-direction: column; gap: 16px; }
.reveal .ergo-vs .rego { display: flex; align-items: center; gap: 24px; background: var(--wash); border: 2px solid var(--line); border-radius: 14px; padding: 16px 24px; font-size: 26px; }
.reveal .ergo-vs .rego code { font-size: 24px; }
.reveal .ergo-vs .rego span { color: var(--red); font-weight: 700; margin-left: auto; }
.reveal .ergo-vs .ergo { background: #080f1a; color: #f7f7ef; border-radius: 16px; padding: 14px 24px; }
.reveal .ergo-vs table { width: 100%; border-collapse: collapse; font-family: "SF Mono", Menlo, monospace; font-size: 16px; }
.reveal .ergo-vs td { white-space: nowrap; }
.reveal .ergo-vs td.muted { color: #8b95a3; }
.reveal .ergo-vs th { text-align: left; color: #8b95a3; font-weight: 400; padding: 4px 8px; border-bottom: 1px solid #2a3442; }
.reveal .ergo-vs td { padding: 8px; color: #f7f7ef; border-bottom: 1px solid #1c2633; }
.reveal .ergo-vs td.bad { color: #ff8182; font-weight: 700; }
.reveal .ergo-vs td.ok { color: #d5ff4d; font-weight: 700; }

/* Part one's catalog slides (Aaron): the catalog then and now, its controls by phase, the risks review carries,
   the code review control as written, and where the catalog stops. Ported from his refresh of the old deck. */
:root { --teal: #0097A7; --catalog: var(--teal); --calm: var(--blue); --yours: var(--muted); }
.reveal .lead { font-size: 36px; line-height: 1.35; color: var(--muted); margin: 0 0 0.6em; }
.reveal .muted { color: var(--muted); }
.reveal .kicker { font-size: 32px; color: var(--muted); margin: 0 0 0.5em; }
.reveal .statement { font-size: 72px; font-weight: 700; line-height: 1.2; margin: 0 0 0.5em; max-width: 1680px; }
.reveal .v3-catalog { display: grid; grid-template-columns: 1180px 460px; gap: 40px; align-items: start; }
.reveal .v3-head { font-size: 24px; line-height: 1.2; margin: 0 0 10px; color: var(--muted); }
.reveal .v3-head b { color: var(--ink); font-weight: 700; }
.reveal .v3-col, .reveal .v3-band, .reveal .v3-risks { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.reveal .v3-band { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 12px; }
.reveal .v3-chip { display: block; flex: 0 1 auto; margin: 0; padding: 6px 8px; box-sizing: border-box; background: #fff; border: 3px solid var(--teal); border-radius: 12px; font-size: 22px; line-height: 1.2; color: var(--ink); }
.reveal .v3-chip b { color: var(--teal); font-weight: 700; margin-right: 6px; }
.reveal .v3-chip.v3-on { background: var(--teal); color: #fff; font-weight: 700; }
.reveal .v3-chip.v3-on b { color: #fff; }
.reveal .v3-rail { background: #f4f5f7; border-radius: 16px; padding: 16px 20px 12px; box-sizing: border-box; }
.reveal .v3-risks { gap: 0; }
.reveal .v3-risks li { font-size: 22px; line-height: 1.15; margin: 0 -10px; padding: 4px 10px; border-radius: 8px; color: var(--ink); }
.reveal .v3-risks li b { color: var(--teal); font-weight: 700; margin-right: 8px; }
.reveal .v3-risks li.v3-on { background: var(--teal); color: #fff; font-weight: 700; }
.reveal .v3-risks li.v3-on b { color: #fff; }
.reveal .v3-foot { margin-top: 10px; }
.reveal .v3-foot p { font-size: 24px; line-height: 1.25; margin: 0; color: var(--muted); }
.reveal .v3-foot b { color: var(--ink); }
.reveal .v3-foot .v3-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.reveal .v3-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; background: var(--teal); vertical-align: -3px; margin-right: 10px; }
.reveal .v3-link { color: var(--teal); font-weight: 700; font-size: 26px; white-space: nowrap; }
.reveal .v5-quotes { list-style: none; counter-reset: q; margin: 0; padding: 0; }
.reveal .v5-quotes li { counter-increment: q; position: relative; padding-left: 70px; font-size: 30px; line-height: 1.35; margin: 0 0 16px; }
.reveal .v5-quotes li::before { content: counter(q); position: absolute; left: 0; top: 2px; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 26px; font-weight: 700; text-align: center; line-height: 46px; }
.reveal .v5-quotes b { color: var(--blue); }
.reveal .v4-timeline { list-style: none; margin: 8px 0 34px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 26px; border-top: 4px solid var(--catalog); }
.reveal .v4-timeline li { position: relative; padding: 30px 0 0; margin: 0; font-size: 23px; line-height: 1.3; }
.reveal .v4-timeline li::before { content: ""; position: absolute; left: 0; top: -14px; width: 24px; height: 24px; border-radius: 50%; background: var(--catalog); border: 4px solid #fff; box-sizing: border-box; }
.reveal .v4-timeline li:last-child::before { width: 30px; height: 30px; top: -17px; background: var(--ink); }
.reveal .v4-timeline li b { display: block; font-size: 30px; color: var(--catalog); margin-bottom: 6px; }
.reveal .v4-timeline li:last-child b { color: var(--ink); }
/* The gap step: the rule turns dashed and the dot gives way to an ellipsis, to show time passing. */
.reveal .v4-timeline li.gap::before { display: none; }
.reveal .v4-timeline li.gap::after { content: ""; position: absolute; top: -4px; left: -26px; right: -26px; height: 4px; background: repeating-linear-gradient(90deg, var(--catalog) 0 14px, #fff 14px 28px); }
.reveal .v4-timeline li.gap b { color: var(--muted); letter-spacing: 0.1em; }
.reveal .v4-timeline li.gap { color: var(--muted); font-style: italic; }
.reveal .v4-when { font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 10px !important; }
.reveal .v4-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
.reveal .v4-now div { background: #f4f5f7; border-left: 8px solid var(--catalog); border-radius: 0 14px 14px 0; padding: 16px 24px; }
.reveal .v4-now h3 { font-size: 29px; margin: 0 0 6px; color: var(--catalog); }
.reveal .v4-now p { font-size: 24px; line-height: 1.35; margin: 0; }
.reveal .v4-foot { font-size: 24px; color: var(--muted); margin: 22px 0 0; }
.reveal .v4-foot b { color: var(--ink); }

/* Slide 5 in the catalog site's own SDLC3 palette (sdlc-common-controls.finos.org, Controls by Phase): the pipeline
   phases step through the logo's purple-to-pink gradient, lifecycle is slate, meta purple, each with a pale tint. */
.reveal .v3-catalog { --s3-ink: #1f1a2e; --s3-muted: #6b6880; --s3-line: #ece9f3; }
.reveal .s3-code      { --phase: #4600d2; --tint: #f3eefe; }
.reveal .s3-build     { --phase: #7300c4; --tint: #f6eefd; }
.reveal .s3-release   { --phase: #a6009f; --tint: #fbeefa; }
.reveal .s3-runtime   { --phase: #d4096f; --tint: #fdeef5; }
.reveal .s3-lifecycle { --phase: #3f4a5e; --tint: #f1f3f6; }
.reveal .s3-meta      { --phase: #6f42c1; --tint: #f4f0fb; }
.reveal .s3-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; }
.reveal .s3-phase, .reveal .s3-band { position: relative; background: #fff; border: 2px solid var(--s3-line); border-top: 5px solid var(--phase); border-radius: 12px; }
.reveal .s3-phase:not(:nth-child(4))::after { content: "\2192"; position: absolute; right: -19px; top: 9px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: #a9a2c2; color: #fff; font-size: 15px; line-height: 20px; text-align: center; font-weight: 700; }
.reveal .s3-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--tint); border-bottom: 2px solid var(--s3-line); border-radius: 8px 8px 0 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--phase); }
.reveal .s3-step { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--phase); color: #fff; font-size: 18px; line-height: 30px; text-align: center; }
.reveal .s3-count { margin-left: auto; min-width: 30px; padding: 0 8px; border-radius: 999px; background: #fff; border: 2px solid color-mix(in srgb, var(--phase) 25%, transparent); font-size: 18px; line-height: 24px; text-align: center; }
.reveal .s3-grid .v3-col { padding: 6px; gap: 5px; }
.reveal .s3-grid .v3-chip { border: 0; border-left: 4px solid var(--phase); border-radius: 0 8px 8px 0; background: #fafafc; padding: 4px 8px; font-size: 21px; color: var(--s3-ink); }
.reveal .s3-grid .v3-chip b { color: var(--phase); font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 18px; margin-right: 8px; }
.reveal .s3-grid .v3-chip.v3-on { background: var(--phase); color: #fff; }
.reveal .s3-grid .v3-chip.v3-on b { color: #fff; }
.reveal .s3-band { grid-column: 1 / -1; display: flex; align-items: stretch; }
.reveal .s3-band .s3-head { flex: 0 0 220px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; border-bottom: 0; border-right: 2px solid var(--s3-line); border-radius: 8px 0 0 8px; }
.reveal .s3-band .s3-head small { font-size: 18px; font-weight: 400; color: var(--s3-muted); }
.reveal .s3-band .v3-band { flex: 1; padding: 6px; gap: 8px; align-items: center; }
.reveal .s3-unplaced { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.reveal .s3-unplaced .v3-chip { --phase: #66637a; }
.reveal .s3-unplaced-label { font-size: 18px; color: var(--s3-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.reveal .v3-catalog .v3-head b, .reveal .v3-catalog .v3-rail .v3-head b { color: var(--s3-ink); }
.reveal .v3-catalog .v3-rail { background: #f7f5fb; border: 2px solid var(--s3-line); }
.reveal .v3-catalog .v3-risks li { color: var(--s3-ink); }
.reveal .v3-catalog .v3-risks li b { color: #6f42c1; }
.reveal .v3-catalog .v3-risks li.v3-on { background: #4600d2; color: #fff; }
.reveal .v3-catalog .v3-risks li.v3-on b { color: #fff; }
.reveal .v3-catalog + .v3-foot .v3-swatch { background: #4600d2; }
.reveal .v3-catalog + .v3-foot .v3-link { color: #4600d2; }

/* Slide 6, all about risk, in the catalog's SDLC3 palette: the catalog's three risks in indigo, the six risks review
   carries in practice stepping through the logo's purple-to-pink gradient. */
.reveal .v7-jobs { --s3-ink: #1f1a2e; --s3-muted: #6b6880; --s3-line: #ece9f3; display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 40px; align-items: start; }
.reveal .v7-head { font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s3-muted); font-weight: 700; margin: 0 0 12px; }
.reveal .v7-risks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.reveal .v7-risks li { margin: 0; padding: 16px 22px 18px; border-radius: 14px; background: linear-gradient(135deg, #4600d2, #6f42c1); color: #fff; box-shadow: 0 4px 16px rgba(70,0,210,0.18); }
.reveal .v7-risks .v7-id { display: block; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 19px; letter-spacing: 0.04em; opacity: 0.8; }
.reveal .v7-risks b { display: block; font-size: 28px; line-height: 1.2; margin: 2px 0 6px; }
.reveal .v7-risks .v7-desc { display: block; font-size: 21px; line-height: 1.3; opacity: 0.92; }
.reveal .v7-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.reveal .v7-grid li { position: relative; margin: 0; padding: 14px 20px 14px 76px; background: #fff; border: 2px solid var(--s3-line); border-left: 6px solid var(--c); border-radius: 0 14px 14px 0; box-shadow: 0 1px 2px rgba(31,26,46,0.04), 0 4px 16px rgba(31,26,46,0.05); }
.reveal .v7-grid li:nth-child(1) { --c: #4600d2; --t: #f3eefe; }
.reveal .v7-grid li:nth-child(2) { --c: #5d00cb; --t: #f4eefe; }
.reveal .v7-grid li:nth-child(3) { --c: #7300c4; --t: #f6eefd; }
.reveal .v7-grid li:nth-child(4) { --c: #a6009f; --t: #fbeefa; }
.reveal .v7-grid li:nth-child(5) { --c: #bd0587; --t: #fceef7; }
.reveal .v7-grid li:nth-child(6) { --c: #d4096f; --t: #fdeef5; }
.reveal .v7-n { position: absolute; left: 18px; top: 16px; width: 42px; height: 42px; border-radius: 50%; background: var(--c); color: #fff; font-size: 22px; font-weight: 700; line-height: 42px; text-align: center; box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 35%, transparent); }
.reveal .v7-grid b { display: block; font-size: 27px; line-height: 1.2; color: var(--s3-ink); }
.reveal .v7-grid .v7-desc { display: block; font-size: 21px; line-height: 1.3; color: var(--s3-muted); margin: 4px 0 8px; }
.reveal .v7-grid .v7-job { display: inline-block; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--c); background: var(--t); border-radius: 999px; padding: 3px 12px; }
.reveal .v7-grid .v7-job::before { content: "Review as: "; font-weight: 400; }
.reveal .v7-grid li { display: flex; flex-direction: column; align-items: flex-start; }
.reveal .v7-grid .v7-job { margin-top: auto; }

/* Slide 6: the invitation under the risks, in the catalog's SDLC3 indigo. */
.reveal .v8-join { margin: 22px 0 0; padding: 14px 22px; border-radius: 12px; background: linear-gradient(90deg, rgba(70,0,210,0.07), rgba(255,20,140,0.07)); border: 2px solid #ece9f3; font-size: 26px; line-height: 1.35; color: #1f1a2e; }
.reveal .v8-join b { color: #4600d2; }
.reveal .v8-join span { white-space: nowrap; font-weight: 700; color: #1f1a2e; }
.reveal .v7-head small { font-size: 20px; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: italic; margin-left: 10px; }
/* Slide 6 carries the invitation too, so its cards sit a little tighter. */
.reveal .v7-grid { gap: 12px 20px; }
.reveal .v7-grid li { padding-top: 11px; padding-bottom: 11px; }
.reveal .v7-grid .v7-desc { margin: 2px 0 6px; }
.reveal .v7-risks ul { gap: 12px; }
.reveal .v7-risks li { padding: 12px 22px 14px; }
.reveal .v7-jobs + .v8-join { margin-top: 16px; padding: 10px 20px; font-size: 23px; }
.reveal .v7-head { margin-bottom: 8px; }
.reveal .v7-jobs + .v8-join { margin-top: 8px; }
/* Slide 7: the evidence requirement, set apart as the one that matters most. */
.reveal .v5-quotes li.v8-evidence { margin-top: 26px; padding-top: 14px; padding-bottom: 14px; padding-right: 22px; background: linear-gradient(90deg, rgba(70,0,210,0.07), rgba(255,20,140,0.07)); border-radius: 0 12px 12px 0; }
.reveal .v5-quotes li.v8-evidence::before { top: 16px; background: #4600d2; }
.reveal .v5-quotes li.v8-evidence span { display: block; font-weight: 700; color: #4600d2; margin-bottom: 4px; }
.reveal .v5-quotes li.v8-evidence b { color: #4600d2; }

/* Slide 8, the bridge: what the catalog expects (SDLC3 indigo) and how it is enforced (CALM blue), then the hand-over. */
.reveal .statement.v9-statement { font-size: 56px; margin-bottom: 36px; }
.reveal .v9-bridge { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: stretch; gap: 0; }
.reveal .v9-what, .reveal .v9-how { border-radius: 16px; padding: 24px 30px; background: #fff; border: 2px solid #ece9f3; box-shadow: 0 4px 16px rgba(31,26,46,0.05); }
.reveal .v9-what { border-top: 8px solid #4600d2; background: linear-gradient(180deg, #f3eefe, #fff 60%); }
.reveal .v9-how { border-top: 8px solid var(--calm); background: linear-gradient(180deg, #eef4fe, #fff 60%); }
.reveal .v9-bridge img { height: 52px; width: auto; display: block; margin: 0 0 14px; }
.reveal .v9-bridge h3 { font-size: 36px; margin: 0 0 8px; }
.reveal .v9-what h3 { color: #4600d2; }
.reveal .v9-how h3 { color: var(--calm); }
.reveal .v9-bridge p { font-size: 27px; line-height: 1.35; margin: 0; color: #1f1a2e; }
.reveal .v9-arrow { position: relative; }
.reveal .v9-arrow::before { content: ""; position: absolute; left: 16px; right: 30px; top: 50%; height: 6px; margin-top: -3px; background: linear-gradient(90deg, #4600d2, var(--calm)); border-radius: 3px; }
.reveal .v9-arrow::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -16px; border: 16px solid transparent; border-right: 0; border-left: 24px solid var(--calm); }
.reveal .v9-next { font-size: 40px; line-height: 1.3; margin: 36px 0 0; color: #1f1a2e; }
.reveal .v9-next b { color: var(--calm); }
.reveal .v9-how { border-top-color: var(--yours); background: linear-gradient(180deg, #f4f5f7, #fff 60%); }
.reveal .v9-how h3 { color: var(--ink); }
.reveal .v9-bridge .v9-tag { height: 52px; display: flex; align-items: center; margin: 0 0 14px; font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.reveal .v9-arrow::before { background: linear-gradient(90deg, #4600d2, var(--yours)); }
.reveal .v9-arrow::after { border-left-color: var(--yours); }
.reveal .v9-next { display: flex; align-items: center; gap: 30px; margin: 40px 0 0; padding: 22px 32px; border-radius: 16px; background: #eef4fe; border-left: 10px solid var(--calm); }
.reveal .v9-next img { height: 72px; width: auto; }
.reveal .v9-next p { font-size: 40px; line-height: 1.3; margin: 0; color: #1f1a2e; }

/* A logo on its own, centred: the catalog, introducing Aaron's chapter. */
.reveal section.logo-slide { justify-content: center; align-items: center; }
.reveal section.logo-slide img { width: 1100px; height: auto; }

/* The bot's pull request with a question to the room beside it. */
.reveal .middle.pr-ask { flex-direction: row; align-items: center; gap: 70px; }
.reveal .pr-ask .pr { flex: 1; min-width: 0; }
.reveal .ask { position: relative; flex: 0 0 470px; box-sizing: border-box; background: var(--gold-bg); border: 4px solid #d4a72c; border-radius: 18px; padding: 40px 40px 36px; box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: rotate(-1.5deg); }
.reveal .ask::before { content: ""; position: absolute; left: -34px; top: 50%; margin-top: -24px; border: 24px solid transparent; border-left: 0; border-right: 32px solid #d4a72c; }
.reveal .ask-q { font-size: 50px; font-weight: 700; line-height: 1.15; }
.reveal .ask-q em { font-style: normal; color: var(--gold); }
.reveal .ask-hint { font-size: 30px; line-height: 1.35; color: var(--muted); margin-top: 22px; }
.reveal .ergo-vs .ergo-label { font-size: 22px; font-weight: 700; color: #d5ff4d; margin-bottom: 6px; }

/* The last content slide: the ask, then a QR code for each link. */
.reveal .big.ask-line { font-size: 76px; }
.reveal .qr-links { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; margin-top: 70px; }
.reveal .qr-links .qr { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; }
.reveal .qr-links img { width: 250px; height: 250px; border: 2px solid var(--line); border-radius: 16px; padding: 8px; background: #fff; box-sizing: border-box; }
.reveal .qr-links .feedback img { border: 4px solid var(--blue); }
.reveal .qr-links .feedback b { color: var(--blue); }
.reveal .qr-links b { font-size: 30px; margin-top: 20px; }
.reveal .qr-links span { font-size: 19px; line-height: 1.3; color: var(--muted); margin-top: 8px; }

/* "How a CALM control feeds ergo": the control's JSON on the left, its ergo block flowing into the engine. */
.reveal .feed { display: grid; grid-template-columns: 900px 150px 1fr; align-items: center; flex: 1; min-height: 0; }
.reveal .feed-src { min-width: 0; }
.reveal pre.json.feed-json { font-size: 19px; line-height: 1.4; padding: 20px 30px; }
.reveal pre.json .c { color: var(--muted); font-style: italic; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.reveal pre.json .feed-hl { display: block; background: var(--gold-bg); outline: 3px solid #d4a72c; outline-offset: 3px; border-radius: 2px; margin: 8px -10px 2px; padding: 0 10px; }
.reveal .feed-note { font-size: 23px; line-height: 1.35; color: var(--muted); margin-top: 16px; }
.reveal .feed-note code { font-size: 21px; color: var(--ink); }
.reveal .feed-arrow { position: relative; height: 70px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.reveal .feed-arrow span { font-size: 22px; font-weight: 700; color: var(--gold); position: absolute; top: -10px; white-space: nowrap; }
.reveal .feed-arrow::before { content: ""; position: absolute; left: 10px; right: 26px; bottom: 22px; height: 8px; background: #d4a72c; border-radius: 4px; }
.reveal .feed-arrow::after { content: ""; position: absolute; right: 4px; bottom: 10px; border-left: 30px solid #d4a72c; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.reveal .feed-engine { display: flex; flex-direction: column; align-items: stretch; }
.reveal .feed-in { background: var(--blue-bg); border: 3px solid var(--blue); border-radius: 16px; padding: 14px 22px; }
.reveal .feed-in b { display: block; font-size: 26px; color: var(--blue); margin-bottom: 4px; }
.reveal .feed-in span { font-size: 23px; line-height: 1.3; }
.reveal .feed-down { height: 44px; position: relative; }
.reveal .feed-down::before { content: ""; position: absolute; left: calc(50% - 4px); top: 4px; bottom: 16px; width: 8px; background: var(--muted); border-radius: 4px; }
.reveal .feed-down::after { content: ""; position: absolute; left: calc(50% - 14px); bottom: 2px; border-top: 18px solid var(--muted); border-left: 14px solid transparent; border-right: 14px solid transparent; }
.reveal .feed-box { background: #080f1a; border-radius: 18px; padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reveal .feed-box img { height: 70px; }
.reveal .feed-box span { color: #b6c2d1; font-size: 24px; }
.reveal .feed-out { background: #080f1a; color: #f7f7ef; border-radius: 16px; padding: 14px 22px; }
.reveal .feed-out table { width: 100%; border-collapse: collapse; font-family: "SF Mono", Menlo, monospace; font-size: 18px; }
.reveal .feed-out td { padding: 8px 4px; border-bottom: 1px solid #1c2633; white-space: nowrap; }
.reveal .feed-out td.bad { color: #ff8182; font-weight: 700; text-align: right; }
.reveal .feed-out td.muted { color: #8b95a3; text-align: right; }
.reveal .feed-out .ergo-label { font-size: 22px; font-weight: 700; color: #d5ff4d; margin-bottom: 6px; }