/* HTML presentation viewer and slide themes. The viewer is neutral (charcoal
   surround, white controls, one accent for progress and the current slide);
   the slides carry the brand. Slides are drawn on a 1920 x 1080 canvas and
   scaled with --s, so type and layout stay exact at every size. */

.deck-viewer { --accent: #eb001f; position: relative; display: flex; flex-direction: column; margin: 8px 0 48px; background: #191919; color: #fff; outline: none; user-select: none; }
.deck-viewer:focus-visible { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25); }
/* The viewer sits inside documentation pages: keep their text styles out of the slides. */
.body:has(.deck-viewer) .doc { max-width: none; }
.deck-viewer img { margin: 0; max-width: none; background: none; }
.deck-viewer :is(h1, h2, h3, p, ul, ol, li, blockquote) { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; }
.dv-stage { position: relative; padding: 24px 24px 0; }
.dv-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; touch-action: pan-y; }
.dv-frame > .slide { position: absolute; inset: 0; }
.dv-progress { position: absolute; left: 24px; right: 24px; bottom: -3px; height: 3px; background: rgb(255 255 255 / 0.12); }
.dv-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 425ms cubic-bezier(0.2, 0, 0, 1); }
.dv-hit { position: absolute; top: 24px; bottom: 0; width: 22%; border: 0; background: none; cursor: w-resize; }
.dv-hit-prev { left: 24px; }
.dv-hit-next { right: 24px; cursor: e-resize; }

.dv-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 24px; }
.dv-nav, .dv-tools { display: flex; gap: 8px; }
.dv-tools { justify-content: flex-end; }
.dv-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: #fff; cursor: pointer; transition: background-color 125ms cubic-bezier(0.2, 0, 0, 1); }
.dv-btn:hover { background: rgb(255 255 255 / 0.18); }
.dv-btn:focus-visible { outline: 2px solid #53bfff; outline-offset: 2px; }
.dv-btn:disabled { opacity: 0.3; cursor: default; }
.dv-btn[aria-pressed="true"] { background: #fff; color: #191919; }
.dv-count { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-count strong { font-size: 1.125rem; font-weight: 700; }
.dv-count span { color: rgb(255 255 255 / 0.55); }
.dv-count em { font-style: normal; color: rgb(255 255 255 / 0.75); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.dv-count em:not(:empty)::before { content: "·"; margin-right: 8px; color: rgb(255 255 255 / 0.35); }

.dv-rail { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0 24px 24px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.2) transparent; }
.dv-rail li, .dv-grid li { flex: none; margin: 0; }
.dv-rail button, .dv-grid button { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; }
.dv-rail .dv-thumb { width: 152px; }
.dv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; opacity: 0.55; transition: opacity 125ms cubic-bezier(0.2, 0, 0, 1); pointer-events: none; }
.dv-thumb > .slide { position: absolute; inset: 0; }
button:hover > .dv-thumb, button[aria-current] > .dv-thumb { opacity: 1; }
button[aria-current] > .dv-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.dv-num { position: absolute; left: 6px; bottom: 4px; font-size: 0.6875rem; font-weight: 700; text-shadow: 0 0 4px rgb(0 0 0 / 0.8); }

.dv-grid { position: absolute; inset: 0; z-index: 3; overflow-y: auto; background: rgb(25 25 25 / 0.97); padding: 24px 24px 96px; }
.dv-grid button, .dv-grid .dv-thumb { width: 100%; }
.dv-grid ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.deck-viewer.is-grid .dv-bar { position: relative; z-index: 4; }
.deck-viewer.is-grid .dv-bar { position: absolute; left: 0; right: 0; bottom: 0; background: #191919; }

/* fullscreen: the slide fills the screen, controls float and fade when idle */
.deck-viewer.is-full { margin: 0; justify-content: center; }
.deck-viewer.is-full .dv-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.deck-viewer.is-full .dv-frame { width: min(100vw, 177.78vh); }
.deck-viewer.is-full .dv-progress { left: 0; right: 0; bottom: 0; }
.deck-viewer.is-full .dv-rail { display: none; }
.deck-viewer.is-full .dv-bar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(720px, calc(100vw - 48px)); border-radius: 999px; background: rgb(25 25 25 / 0.85); backdrop-filter: blur(12px); padding: 8px 12px; transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1); }
.deck-viewer.is-full.is-idle { cursor: none; }
.deck-viewer.is-full.is-idle .dv-bar { opacity: 0; }

/* slide canvas */
.slide { overflow: hidden; }
.slide.is-image > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slide.is-html > .canvas { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(var(--s, 0.5)); transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .dv-frame > .slide:not([hidden]) { animation: dv-in 425ms cubic-bezier(0.2, 0, 0, 1) both; }
  .dv-frame > .slide.from-left:not([hidden]) { animation-name: dv-in-back; }
}
@keyframes dv-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes dv-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .deck-viewer { margin: 8px -16px 40px; }
  .dv-stage { padding: 12px 12px 0; }
  .dv-progress { left: 12px; right: 12px; }
  .dv-bar { padding: 12px; }
  .dv-count em { display: none; }
  .dv-rail { padding: 0 12px 12px; }
  .dv-rail .dv-thumb { width: 112px; }
}

/* ---------- theme: Otto Group (presentation master 2026) ---------- */
@font-face { font-family: "Optimist"; src: url("/presentations/assets/fonts/Optimist-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Optimist"; src: url("/presentations/assets/fonts/Optimist-RegularContrast.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Optimist"; src: url("/presentations/assets/fonts/Optimist-SemiBoldContrast.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.og { --og-red: #f00020; --og-ink: #191919; --og-sand: #f5f0e1; --og-yellow: #fff59b; --og-lilac: #e7daf9; --og-aubergine: #4b3666; --og-green: #00483c; --og-salmon: #ffd2c8; }
.og .canvas { box-sizing: border-box; font-family: "Optimist", Arial, sans-serif; font-weight: 400; color: var(--og-ink); background: #fff; padding: 88px 104px 150px; font-size: 32px; line-height: 1.35; }
.og .canvas.sand { background: var(--og-sand); }
.og .canvas.dark { background: var(--og-aubergine); color: #fff; }
.og .canvas.photo { padding: 0; background: #000; }
.og .canvas * { box-sizing: border-box; }
.og h1, .og h2 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; }
.og h1 { font-size: 104px; }
.og h2 { font-size: 72px; }
.og .eyebrow-og { font-size: 22px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 32px; }
.og .sub { font-size: 36px; font-weight: 600; margin-top: 24px; }
.og .red { color: var(--og-red); }
.og .light { font-weight: 300; }

/* footer: thin red rule, title left, wordmark centred, page number right */
.og .foot { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 56px; border-top: 2px solid var(--og-red); font-size: 18px; }
.og .foot img { height: 30px; width: auto; }
.og .foot .slide-num { justify-self: end; }
.og .canvas.dark .foot, .og .canvas.photo .foot { border-top: 0; color: #fff; }
.og .foot.bare { grid-template-columns: 1fr; justify-items: center; }

/* title on aubergine */
.og .title { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.og .title h1 { max-width: 1300px; }
.og .title .sub { font-weight: 400; max-width: 1100px; opacity: 0.9; }

/* agenda: numbered list left, photo right */
.og .split { display: grid; grid-template-columns: 1fr 760px; height: 100%; }
.og .split.flush { position: absolute; inset: 0; padding: 0; }
.og .split .text { padding: 88px 104px 150px; display: flex; flex-direction: column; }
.og .split .pic { position: relative; }
.og .split .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.og ol.agenda { list-style: none; counter-reset: a; margin-top: 64px; display: grid; gap: 22px; }
.og ol.agenda li { counter-increment: a; display: grid; grid-template-columns: 64px 1fr; font-size: 40px; font-weight: 600; }
.og ol.agenda li::before { content: counter(a) "."; color: var(--og-red); }
.og ol.agenda li span { display: block; grid-column: 2; font-size: 26px; font-weight: 300; margin-top: 4px; }

/* chapter divider */
.og .chapter { display: flex; flex-direction: column; justify-content: center; }
.og .chapter .no { font-size: 28px; font-weight: 600; color: var(--og-red); margin-bottom: 24px; }
.og .chapter h2 { font-size: 96px; max-width: 900px; }

/* two columns of text */
.og .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; margin-top: 56px; }
.og .cols h3 { font-size: 30px; font-weight: 600; margin-bottom: 12px; }
.og .cols p { font-weight: 300; }
.og ul.dots { list-style: none; display: grid; gap: 14px; padding: 0; }
.og ul.dots li { position: relative; padding-left: 32px; font-weight: 300; }
.og ul.dots li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--og-red); }

/* key facts */
.og .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 120px; }
.og .facts { gap: 80px; }
.og .facts .n { font-size: 136px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.og .facts .n .red { font-weight: 600; }
.og .facts p { margin-top: 20px; font-size: 30px; font-weight: 300; max-width: 460px; }

/* rounded colour tiles */
.og .tiles-og { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.og .tile-og { border-radius: 40px; padding: 44px 48px; min-height: 330px; }
.og .tile-og h3 { font-size: 56px; font-weight: 600; line-height: 1.02; color: var(--og-red); margin-bottom: 20px; }
.og .tile-og p { font-size: 26px; font-weight: 300; }
.og .tile-og.green { background: var(--og-green); color: #fff; }
.og .tile-og.aubergine { background: var(--og-aubergine); color: #fff; }
.og .tile-og.yellow { background: var(--og-yellow); }
.og .tile-og.lilac { background: var(--og-lilac); }
.og .tile-og.green h3, .og .tile-og.aubergine h3 { color: #fff; }
.og .claim { font-size: 80px; line-height: 1.02; font-weight: 600; color: var(--og-red); }
.og .claim + p { margin-top: 32px; font-size: 34px; font-weight: 600; color: var(--og-red); }

/* photo collage */
.og .collage-og { position: absolute; left: 0; right: 0; top: 230px; bottom: 96px; display: grid; grid-template-columns: 1.1fr 0.9fr 1.4fr; grid-template-rows: 1fr 1fr; gap: 0; }
.og .collage-og img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og .collage-og .tall { grid-row: span 2; }
.og .collage-og .c3 { grid-column: 3; grid-row: 1 / span 2; }

/* quote */
.og blockquote.q { font-size: 60px; line-height: 1.18; font-weight: 300; max-width: 1400px; }
.og blockquote.q::before { content: "„"; display: block; font-size: 180px; line-height: 0.6; font-weight: 600; color: var(--og-red); margin-bottom: 24px; }
.og .by { margin-top: 48px; font-size: 28px; }
.og .by strong { font-weight: 600; display: block; }

/* full photo with wordmark */
.og .full-photo img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.og .full-photo .over { position: absolute; left: 104px; bottom: 170px; color: #fff; max-width: 1000px; text-shadow: 0 2px 24px rgb(0 0 0 / 0.35); }

/* closing with the supersign */
.og .closing { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.og .closing img.sign { height: 520px; width: auto; justify-self: center; }
.og .closing h2 { font-size: 88px; }
.og .closing .contact { margin-top: 48px; font-size: 26px; font-weight: 300; line-height: 1.5; }

/* ---------- theme: OTTO (deck class "ot") ----------
   The site's own register on 1920 x 1080: OTTO Sans in 400 / 700 and the KO
   black cut for display, near-black text, OTTO red #eb001f for one accent per
   slide. Grounds: white (default), frame grey (matches the red-material
   pictures, so they run edge to edge), red for chapter openers, ink for
   emphasis. The logo is always the original SVG: red on light, white on red
   and ink. Pictures: OTTO red material and the OTTO letter sculptures. */
.ot { --ot-red: #eb001f; --ot-ink: #212121; --ot-grey: #484848; --ot-frame: #e9e9ea; --ot-line: rgb(0 0 0 / 0.12); }
.ot .canvas { box-sizing: border-box; font-family: "OTTOSans", Arial, Helvetica, sans-serif; font-weight: 400; color: var(--ot-ink); background: #fff; padding: 112px 128px 168px; font-size: 34px; line-height: 1.4; }
.ot .canvas * { box-sizing: border-box; }
.ot .canvas.frame { background: var(--ot-frame); }
.ot .canvas.red { background: var(--ot-red); color: #fff; }
.ot .canvas.ink { background: var(--ot-ink); color: #fff; }
.ot h1, .ot h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 0.94; text-wrap: balance; }
.ot h1 { font-size: 164px; max-width: 1100px; }
.ot h2 { font-size: 104px; max-width: 1300px; }
.ot h3 { font-size: 40px; font-weight: 700; line-height: 1.15; }
.ot .eyebrow { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ot-red); margin-bottom: 40px; }
.ot .red .eyebrow, .ot .ink .eyebrow { color: #fff; opacity: 0.85; }
.ot .lead { font-size: 44px; line-height: 1.3; color: var(--ot-grey); max-width: 1000px; margin-top: 48px; }
.ot .red .lead, .ot .ink .lead { color: #fff; opacity: 0.9; }
.ot .accent { color: var(--ot-red); }
.ot .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.ot .over { position: relative; z-index: 1; }

/* footer: logo, deck title, page number on a hairline */
.ot .foot { position: absolute; z-index: 2; left: 128px; right: 128px; bottom: 56px; display: flex; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid var(--ot-line); font-size: 20px; font-weight: 700; color: var(--ot-grey); }
.ot .foot img { height: 26px; width: auto; }
.ot .foot .slide-num { margin-left: auto; font-variant-numeric: tabular-nums; }
.ot .red .foot, .ot .ink .foot { color: rgb(255 255 255 / 0.85); border-top-color: rgb(255 255 255 / 0.3); }
.ot .frame .foot { border-top-color: rgb(0 0 0 / 0.1); }

/* title: text on the empty left of a full-bleed picture */
.ot .title { display: flex; flex-direction: column; justify-content: center; }
.ot .title h1 { font-size: 164px; max-width: 1080px; }
.ot .over { max-width: 1120px; }

/* agenda: numbered rows with hairlines */
.ot ol.agenda { list-style: none; counter-reset: a; margin-top: 72px; max-width: 1200px; }
.ot ol.agenda li { counter-increment: a; display: grid; grid-template-columns: 120px 1fr; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--ot-line); font-size: 48px; font-weight: 700; }
.ot ol.agenda li:last-child { border-bottom: 1px solid var(--ot-line); }
.ot ol.agenda li::before { content: counter(a, decimal-leading-zero); font-size: 28px; color: var(--ot-red); }
.ot ol.agenda li span { grid-column: 2; font-size: 28px; font-weight: 400; color: var(--ot-grey); margin-top: 6px; }

/* chapter opener */
.ot .chapter { display: flex; flex-direction: column; justify-content: center; }
.ot .chapter .no { font-size: 240px; font-weight: 800; line-height: 0.8; letter-spacing: -0.04em; margin-bottom: 48px; }
.ot .chapter h2 { font-size: 120px; max-width: 900px; }

/* statement */
.ot .statement { display: flex; flex-direction: column; justify-content: center; }
.ot .statement h2 { font-size: 148px; max-width: 1500px; }

/* key figures */
.ot .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 120px; }
.ot .figures .n { font-size: 200px; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.ot .figures .n small { font-size: 0.5em; letter-spacing: -0.02em; }
.ot .figures p { margin-top: 28px; font-size: 32px; color: var(--ot-grey); max-width: 460px; }
.ot .figures div { padding-top: 32px; border-top: 4px solid var(--ot-ink); }
.ot .figures div:first-child { border-top-color: var(--ot-red); }

/* three picture cards */
.ot .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 72px; }
.ot .cards figure { margin: 0; }
.ot .cards img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 78% 50%; border-radius: 16px; background: var(--ot-frame); }
.ot .cards h3 { margin-top: 32px; }
.ot .cards p { margin-top: 12px; font-size: 28px; color: var(--ot-grey); }

/* split: text left, picture to the edge on the right */
.ot .split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 860px; }
.ot .split .text { padding: 112px 96px 168px 128px; display: flex; flex-direction: column; justify-content: center; }
.ot .split .pic { position: relative; background: var(--ot-frame); }
.ot .split .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.ot ul.ticks { list-style: none; margin-top: 48px; display: grid; gap: 20px; }
.ot ul.ticks li { position: relative; padding-left: 52px; font-size: 32px; }
.ot ul.ticks li::before { content: ""; position: absolute; left: 0; top: 10px; width: 28px; height: 28px; background: var(--ot-red); -webkit-mask: url(/assets-static/icons/pl_icon_check50.svg) center / contain no-repeat; mask: url(/assets-static/icons/pl_icon_check50.svg) center / contain no-repeat; }

/* live components on a panel: real OTTO components, scaled with the slide */
.ot .panel { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ot .panel > div { background: #fff; border-radius: 16px; padding: 28px; min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; zoom: 2; }
.ot .panel .label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-grey); }

/* quote */
.ot blockquote.q { font-size: 88px; font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; max-width: 1000px; }
.ot .by { margin-top: 56px; font-size: 30px; }
.ot .by strong { display: block; font-weight: 700; }

/* gallery of three pictures */
.ot .gallery { position: absolute; left: 0; right: 0; top: 330px; bottom: 168px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; padding: 0 128px; }
.ot .gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; border-radius: 16px; background: var(--ot-frame); }

/* closing */
.ot .closing { display: flex; flex-direction: column; justify-content: center; }
.ot .closing h2 { font-size: 200px; }
.ot .closing .contact { margin-top: 56px; font-size: 32px; line-height: 1.5; color: var(--ot-grey); }

/* style board: one title slide per theme, labelled */
.ot .style-tag, .og .style-tag { position: absolute; z-index: 3; right: 128px; top: 104px; font: 700 22px/1 "OTTOSans", Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 20px; border-radius: 999px; background: rgb(255 255 255 / 0.9); color: #212121; }

/* do / don't pair: code or live components, a coloured rule, one sentence */
.ot .dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 72px; }
.ot .dodont figure { margin: 0; display: grid; grid-template-rows: auto 1fr auto; }
.ot .dodont .tag { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.ot .dodont .do .tag { color: #008a3e; }
.ot .dodont .dont .tag { color: var(--ot-red); }
.ot .dodont pre { margin: 0; padding: 40px 44px; border-radius: 16px 16px 0 0; background: #1c1c1c; color: #f5f5f5; font: 34px/1.6 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; display: flex; align-items: center; }
.ot .dodont .stagebox { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 40px; border-radius: 16px 16px 0 0; background: var(--ot-frame); zoom: 2; }
.ot .dodont figcaption { padding-top: 24px; border-top: 6px solid; font-size: 30px; line-height: 1.35; color: var(--ot-grey); }
.ot .dodont .do figcaption { border-top-color: #008a3e; }
.ot .dodont .dont figcaption { border-top-color: var(--ot-red); }

/* checklist: two columns of numbered checks on hairlines */
.ot ol.checks { list-style: none; counter-reset: c; margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; }
.ot ol.checks li { counter-increment: c; display: grid; grid-template-columns: 72px 1fr; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--ot-line); font-size: 34px; font-weight: 700; }
.ot ol.checks li::before { content: counter(c, decimal-leading-zero); font-size: 24px; color: var(--ot-red); }

/* four steps on a line */
.ot ol.steps { list-style: none; margin-top: 88px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.ot ol.steps li { padding-top: 32px; border-top: 4px solid var(--ot-ink); }
.ot ol.steps li:first-child { border-top-color: var(--ot-red); }
.ot ol.steps .when { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ot-red); }
.ot ol.steps h3 { margin-top: 20px; }
.ot ol.steps li > p:last-child { margin-top: 16px; font-size: 28px; color: var(--ot-grey); }
.ot .split .mail { margin-top: 48px; font-size: 36px; font-weight: 700; color: var(--ot-red); }