/* =====================================================================
   GratisIQ deck engine: deck.css
   One stylesheet for every deck: tokens, the 1920x1080 stage, the two
   slide themes, typography, layout helpers, all components, motion,
   presenter chrome and print. Vanilla CSS, no build step.
   Paths below are relative to this file (engine/), so keep engine/ and
   assets/ side by side when copying the folder.
   ===================================================================== */

/* ---------- 1. Fonts (Inter 400 to 800, latin + latin-ext, SIL OFL) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 800; src: url("../assets/fonts/inter-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("../assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url("../assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("../assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("../assets/fonts/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 800; src: url("../assets/fonts/inter-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Tokens ---------- */
:root {
  /* brand */
  --giq-teal: #055560;
  --giq-teal-dark: #033d43;
  --giq-teal-deep: #022a2f;
  --giq-teal-light: #0a7180;
  --giq-teal-soft: #7cc4cc;
  --giq-orange: #ea6125;
  --giq-orange-light: #f5874f;
  --giq-orange-dark: #c44e1a;
  --giq-canvas: #f3efe7;
  --giq-sand: #e7e0d2;
  --giq-ink: #111827;
  --giq-gray: #6b7280;
  --giq-gray-light: #9ca3af;
  --giq-white: #ffffff;
  --giq-green: #22c55e;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-reveal: 900ms;
  --t-fade: 650ms;

  /* stage geometry (1920 x 1080 slide space) */
  --mx: 120px;
  --mt: 76px;
  --mb: 60px;
  --gap: 40px;
  --radius: 22px;
  --radius-lg: 28px;

  /* filled circle with the check knocked out, used as a CSS mask */
  --check-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><mask id='m'><rect width='24' height='24' fill='white'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></mask><circle cx='12' cy='12' r='12' fill='black' mask='url(%23m)'/></svg>");
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html.deck-root, html.deck-root body { height: 100%; overflow: hidden; background: #021f23; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "calt" 1; }
img, svg { display: block; max-width: 100%; }
/* zero-specificity resets, so spacing helpers such as .mt-l always win */
:where(.slide) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, table) { margin: 0; padding: 0; }
:where(.slide) :where(ul, ol) { list-style: none; }
:where(.slide) a { color: inherit; text-decoration: none; }
.slide .notes, .slide aside.notes { display: none !important; }

/* ---------- 4. Viewport and stage ---------- */
.deck-viewport { position: fixed; inset: 0; overflow: hidden; background: var(--viewport-bg, #021f23); transition: background-color 600ms var(--ease-out); }
html[data-current-theme="light"] .deck-viewport { --viewport-bg: #d9d3c7; }
.deck-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--deck-scale, 1)); transform-origin: 50% 50%; overflow: hidden; contain: layout paint; }
.deck-stage > .deck { position: absolute; inset: 0; }
.deck-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2; }

/* ---------- 5. Slides and themes ---------- */
.slide {
  position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: hidden;
  display: flex; flex-direction: column; padding: var(--mt) var(--mx) var(--mb);
  visibility: hidden; color: var(--fg); background: var(--paint); isolation: isolate;
}
.slide.is-current, .slide.is-leaving { visibility: visible; }
.slide > * { position: relative; z-index: 1; }

.slide, .slide[data-theme="dark"] {
  --fg: #ffffff;
  --fg-2: rgba(255, 255, 255, 0.76);
  --fg-3: rgba(255, 255, 255, 0.52);
  --fg-4: rgba(255, 255, 255, 0.34);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.24);
  --accent: var(--giq-orange);
  --accent-text: var(--giq-orange-light);
  --kicker: var(--giq-orange-light);
  --heading: #ffffff;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --surface-border: rgba(255, 255, 255, 0.13);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.035) 100%);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 80px -36px rgba(0, 0, 0, 0.55);
  --icon-bg: rgba(255, 255, 255, 0.09);
  --icon-fg: #ffffff;
  --positive: #6ee7a8;
  --negative: #fca5a5;
  --c1: #ffffff; --c2: #7cc4cc; --c3: rgba(255, 255, 255, 0.42); --c4: #2f8f99; --c5: #d8cfbf;
  --track: rgba(255, 255, 255, 0.1);
  --grid: rgba(255, 255, 255, 0.1);
  --map-empty: rgba(255, 255, 255, 0.07);
  --map-stroke: #04363c;
  --tl-node: rgba(255, 255, 255, 0.3);
  --rings: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'><g fill='none' stroke='white' stroke-width='1.2'><circle cx='1800' cy='98' r='172' stroke-opacity='.075'/><circle cx='1800' cy='98' r='322' stroke-opacity='.064'/><circle cx='1800' cy='98' r='472' stroke-opacity='.053'/><circle cx='1800' cy='98' r='622' stroke-opacity='.042'/><circle cx='1800' cy='98' r='772' stroke-opacity='.031'/><circle cx='1800' cy='98' r='922' stroke-opacity='.02'/></g></svg>");
  --rings-center: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'><g fill='none' stroke='white' stroke-width='1.2'><circle cx='960' cy='450' r='615' stroke-opacity='.07'/><circle cx='960' cy='450' r='765' stroke-opacity='.055'/><circle cx='960' cy='450' r='915' stroke-opacity='.04'/><circle cx='960' cy='450' r='1065' stroke-opacity='.025'/></g></svg>");
  --grain-opacity: 0.06;
  --paint:
    radial-gradient(1125px 790px at 1800px 98px, rgba(40, 170, 180, 0.3), rgba(40, 170, 180, 0) 70%),
    radial-gradient(1125px 750px at -6% 112%, rgba(1, 22, 25, 0.6), rgba(1, 22, 25, 0) 70%),
    linear-gradient(160deg, #075560 0%, #043f46 42%, #022a2f 100%);
}

.slide[data-theme="light"] {
  --fg: var(--giq-ink);
  --fg-2: #4b5563;
  --fg-3: var(--giq-gray);
  --fg-4: #a3a3a3;
  --line: rgba(17, 24, 39, 0.1);
  --line-strong: rgba(17, 24, 39, 0.18);
  --accent: var(--giq-orange);
  --accent-text: #c9501b;
  --kicker: var(--giq-teal);
  --heading: var(--giq-ink);
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --surface-border: rgba(17, 24, 39, 0.07);
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 18px 40px -22px rgba(17, 24, 39, 0.18);
  --icon-bg: rgba(5, 85, 96, 0.08);
  --icon-fg: var(--giq-teal);
  --positive: #15803d;
  --negative: #b91c1c;
  --c1: var(--giq-teal); --c2: #6fa9b0; --c3: #b5cdd0; --c4: #d8cfbf; --c5: #0a7180;
  --track: rgba(17, 24, 39, 0.07);
  --grid: rgba(17, 24, 39, 0.08);
  --map-empty: #e4ddd0;
  --map-stroke: #f3efe7;
  --tl-node: #c9c2b4;
  --rings: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'><g fill='none' stroke='rgb(5,85,96)' stroke-width='1.2'><circle cx='1800' cy='98' r='172' stroke-opacity='.075'/><circle cx='1800' cy='98' r='322' stroke-opacity='.06'/><circle cx='1800' cy='98' r='472' stroke-opacity='.047'/><circle cx='1800' cy='98' r='622' stroke-opacity='.036'/><circle cx='1800' cy='98' r='772' stroke-opacity='.026'/><circle cx='1800' cy='98' r='922' stroke-opacity='.017'/></g></svg>");
  --rings-center: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'><g fill='none' stroke='rgb(5,85,96)' stroke-width='1.2'><circle cx='960' cy='450' r='615' stroke-opacity='.06'/><circle cx='960' cy='450' r='765' stroke-opacity='.045'/><circle cx='960' cy='450' r='915' stroke-opacity='.03'/><circle cx='960' cy='450' r='1065' stroke-opacity='.02'/></g></svg>");
  --grain-opacity: 0;
  --paint:
    radial-gradient(1100px 760px at 6% -12%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(1000px 720px at 100% 0%, rgba(10, 113, 128, 0.075), rgba(10, 113, 128, 0) 70%),
    #f3efe7;
}

/* rings layer and grain, both behind content */
.slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--rings) no-repeat 0 0 / 1920px 1080px; pointer-events: none; transform-origin: 1800px 98px; }
.slide.rings-center::before, .slide.slide-closing::before { background-image: var(--rings-center); transform-origin: 960px 450px; }
.slide.no-rings::before { display: none; }
.slide::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* an optional extra glow placed by the author: <div class="glow" style="--x: 30%; --y: 60%"></div> */
.glow { position: absolute !important; z-index: 0 !important; left: var(--x, 50%); top: var(--y, 50%); width: 1100px; height: 800px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(40, 170, 180, 0.22), rgba(40, 170, 180, 0)); }
.slide[data-theme="light"] .glow { background: radial-gradient(closest-side, rgba(10, 113, 128, 0.08), rgba(10, 113, 128, 0)); }

/* ---------- 6. Slide regions and logo ---------- */
.slide-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 48px; }
.slide-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.slide-body.top { justify-content: flex-start; padding-top: 44px; }
.slide-foot { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; min-height: 24px; margin-top: 28px; }
.slide-head + .slide-body.top { padding-top: 52px; }
.logo { display: inline-block; flex: none; height: var(--logo-h, 42px); aspect-ratio: 892 / 242; background: url("../assets/logos/logo-white.png") no-repeat 0 50% / contain; }
.slide[data-theme="light"] .logo { background-image: url("../assets/logos/logo-gratisiq.png"); }
.logo.lg { --logo-h: 72px; }
.logo.xl { --logo-h: 96px; }
.page-num { font-size: 16px; font-weight: 600; color: var(--fg-4); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ---------- 7. Typography ---------- */
.display { font-size: 124px; font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; color: var(--heading); text-wrap: balance; }
.h1 { font-size: 84px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.03; color: var(--heading); text-wrap: balance; }
.h2 { font-size: 60px; font-weight: 700; letter-spacing: -0.032em; line-height: 1.08; color: var(--heading); text-wrap: balance; }
.h3 { font-size: 40px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.18; color: var(--heading); text-wrap: balance; }
.h4 { font-size: 30px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--heading); }
.lead { font-size: 36px; font-weight: 400; letter-spacing: -0.012em; line-height: 1.42; color: var(--fg-2); text-wrap: pretty; }
.body { font-size: 28px; font-weight: 400; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.small { font-size: 22px; line-height: 1.45; color: var(--fg-3); }
.micro { font-size: 17px; line-height: 1.45; color: var(--fg-3); }
.label, .kicker { font-size: 19px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; color: var(--kicker); }
.kicker.muted, .label.muted { color: var(--fg-3); }
.muted { color: var(--fg-3); }
.soft { color: var(--fg-2); }
.accent { color: var(--accent-text); }
.hl { color: var(--accent-text); }
.mark { background: linear-gradient(transparent 62%, rgba(234, 97, 37, 0.28) 62%); padding: 0 0.06em; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; color: var(--fg); }
.balance { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.measure { max-width: 1080px; }
.measure-s { max-width: 820px; }
.center-text { text-align: center; }

/* ---------- 8. Layout helpers ---------- */
.stack { display: flex; flex-direction: column; gap: var(--g, 24px); }
.row { display: flex; align-items: var(--align, center); gap: var(--g, 24px); }
.wrap { flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--g, 32px); }
.split { display: grid; grid-template-columns: var(--split, 1fr 1fr); gap: var(--g, 72px); align-items: var(--align, center); min-height: 0; }
.split.wide-left { --split: 1.35fr 1fr; }
.split.wide-right { --split: 1fr 1.35fr; }
.fill { flex: 1 1 auto; min-height: 0; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.end { margin-top: auto; }
.mt-xs { margin-top: 12px; } .mt-s { margin-top: 20px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 48px; } .mt-xl { margin-top: 72px; } .mt-xxl { margin-top: 104px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule-accent { width: 64px; height: 5px; border-radius: 3px; background: var(--accent); }

/* ---------- 9. Basic building blocks ---------- */
/* bullet list with orange dots */
.list { display: flex; flex-direction: column; gap: var(--g, 20px); }
.list > li { position: relative; padding-left: 34px; font-size: var(--fs, 30px); line-height: 1.38; color: var(--fg); font-weight: 500; }
.list > li::before { content: ""; position: absolute; left: 2px; top: calc(0.69em - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.list > li .sub { display: block; margin-top: 4px; font-size: 0.8em; font-weight: 400; color: var(--fg-2); }
.list.sm { --fs: 25px; --g: 14px; }
/* numbered list with ringed numbers (as in the film chapter slides) */
.list-num { display: flex; flex-direction: column; counter-reset: n; }
.list-num > li { counter-increment: n; display: flex; align-items: center; gap: 26px; padding: 18px 0; font-size: var(--fs, 30px); font-weight: 500; line-height: 1.3; color: var(--fg); }
.list-num > li + li { border-top: 1px solid var(--line); }
.list-num > li::before { content: counter(n); flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent-text); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.list-check > li { display: flex; gap: 16px; align-items: flex-start; font-size: var(--fs, 26px); line-height: 1.4; color: var(--fg); }
.list-check > li + li { margin-top: 14px; }
.list-check > li::before { content: ""; flex: none; width: 26px; height: 26px; margin-top: 0.12em; border-radius: 50%; background: var(--accent); -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat; }

/* panel and card surfaces */
.panel, .card { position: relative; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid var(--surface-border); box-shadow: var(--card-shadow); padding: var(--pad, 44px 46px); }
.panel.flat { box-shadow: none; }
.panel.tint { background: rgba(5, 85, 96, 0.06); border-color: rgba(5, 85, 96, 0.1); box-shadow: none; }
.slide[data-theme="dark"] .panel.tint { background: rgba(255, 255, 255, 0.05); }
.panel.teal { --fg: #fff; --fg-2: rgba(255, 255, 255, 0.78); --fg-3: rgba(255, 255, 255, 0.55); --heading: #fff; --kicker: var(--giq-orange-light); --line: rgba(255, 255, 255, 0.14);
  color: #fff; border: 0; background: linear-gradient(150deg, #0a6874 0%, #055560 45%, #033d43 100%); box-shadow: 0 30px 70px -30px rgba(3, 61, 67, 0.65); }

/* chip: avatar initial + name + detail, like the film */
.chip { display: inline-flex; align-items: center; gap: 16px; height: 60px; padding: 0 28px 0 10px; border-radius: 30px; white-space: nowrap; background: var(--surface); border: 1px solid var(--surface-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -16px rgba(0, 0, 0, 0.4); font-size: 25px; font-weight: 600; color: var(--fg); }
.chip .avatar { width: 40px; height: 40px; font-size: 19px; }
.chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-4); }
.chip .soft { font-weight: 500; }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 24px; box-shadow: 0 6px 16px -6px rgba(234, 97, 37, 0.6); }

/* tags and status badges */
.tag { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--surface-border); white-space: nowrap; }
.tag.accent { background: rgba(234, 97, 37, 0.14); color: var(--accent-text); border-color: rgba(234, 97, 37, 0.25); }
.tag.teal { background: rgba(5, 85, 96, 0.1); color: var(--giq-teal); border-color: rgba(5, 85, 96, 0.16); }
.slide[data-theme="dark"] .tag.teal { background: rgba(124, 196, 204, 0.14); color: #a9dde2; border-color: rgba(124, 196, 204, 0.24); }
.tag.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }

/* callout: accent rule + text */
.callout { position: relative; padding: 4px 0 4px 32px; font-size: 28px; line-height: 1.45; color: var(--fg); }
.callout::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 3px; background: var(--accent); }

/* orange number tile (echoes the logo's iQ box) */
.tile { display: inline-flex; align-items: center; justify-content: center; width: var(--tile, 150px); height: var(--tile, 150px); border-radius: calc(var(--tile, 150px) * 0.225); color: #fff; font-weight: 700; font-size: calc(var(--tile, 150px) * 0.65); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(155deg, #f3844a 0%, #ea6125 55%, #d9531a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 24px 48px -18px rgba(234, 97, 37, 0.65); }
.tile.sm { --tile: 72px; }

/* "where are we" steps in the header */
.steps { display: flex; gap: 14px; }
.steps > li { width: var(--step-w, 168px); }
.steps > li span { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 19px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.steps > li::after { content: ""; display: block; margin-top: 10px; height: 5px; border-radius: 3px; background: var(--track); background-image: linear-gradient(var(--fill-c, var(--accent)), var(--fill-c, var(--accent))); background-repeat: no-repeat; background-size: var(--fill, 0%) 100%; }
.steps > li.is-done span { color: var(--fg-2); }
.steps > li.is-done span::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.steps > li.is-done { --fill: 100%; --fill-c: var(--fg-3); }
.steps > li.is-now span { color: var(--fg); }
.steps > li.is-now { --fill: 100%; }

/* icon tile used by cards, flows and lists */
.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--icon, 64px); height: var(--icon, 64px); border-radius: calc(var(--icon, 64px) * 0.28); background: var(--icon-bg); color: var(--icon-fg); }
.icon svg { width: 54%; height: 54%; }
.icon.accent { background: rgba(234, 97, 37, 0.13); color: var(--accent); }
.icon.solid { background: var(--giq-teal); color: #fff; }
.icon.solid.accent { background: var(--accent); color: #fff; }
.icon.bare { background: none; width: auto; height: auto; }
.icon.bare svg { width: var(--icon, 32px); height: var(--icon, 32px); }
.icon.sm { --icon: 48px; } .icon.lg { --icon: 84px; }

/* ---------- 10. Title, section and closing slides ---------- */
.slide-title .slide-body { justify-content: flex-end; padding-bottom: 56px; }
.slide-title .display { max-width: 1500px; }
.slide-title .lead { max-width: 1240px; margin-top: 34px; }
.slide-title .slide-body > .label, .slide-title .slide-body > .kicker { margin-bottom: 30px; }
.title-meta { display: flex; align-items: center; gap: 22px; font-size: 22px; font-weight: 500; color: var(--fg-3); }
.title-meta .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-4); }

.slide-section .slide-body { justify-content: center; }
.slide-section .tile { margin-bottom: 56px; }
.slide-section .h1 { font-size: 112px; letter-spacing: -0.045em; line-height: 1; }
.slide-section .lead { margin-top: 30px; max-width: 1180px; }

.slide-closing .slide-body { align-items: center; justify-content: center; text-align: center; }
.slide-closing .display { font-size: 116px; }
.slide-closing .lead { max-width: 1260px; margin-top: 34px; text-wrap: balance; }
.slide-closing .rule-accent { margin: 72px auto 0; }
.slide-closing .logo { --logo-h: 70px; margin-top: 72px; background-position: 50% 50%; }
.closing-contact { margin-top: 40px; display: flex; gap: 40px; justify-content: center; font-size: 24px; font-weight: 500; color: var(--fg-2); }

/* agenda */
.agenda { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); column-gap: 72px; counter-reset: ag; }
.agenda > li { counter-increment: ag; display: flex; align-items: baseline; gap: 30px; padding: 26px 0; border-top: 1px solid var(--line); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.agenda > li::before { content: counter(ag, decimal-leading-zero); flex: none; width: 52px; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.agenda > li small { display: block; margin-top: 6px; font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--fg-3); }

/* ---------- 11. Big stat and KPI row ---------- */
.big-stat { display: flex; flex-direction: column; }
.big-stat-value { display: flex; align-items: baseline; gap: 10px; font-size: var(--stat-fs, 240px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.9; color: var(--heading); font-variant-numeric: tabular-nums; }
.big-stat-value .unit { font-size: 0.42em; letter-spacing: -0.03em; color: var(--accent-text); font-weight: 700; }
.big-stat-label { margin-top: 28px; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); text-wrap: balance; }
.big-stat-note { margin-top: 18px; font-size: 26px; line-height: 1.45; color: var(--fg-2); max-width: 980px; }
.big-stat.accent .big-stat-value { color: var(--accent-text); }
.big-stat.center { align-items: center; text-align: center; }

.kpi-row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--g, 28px); }
.kpi { position: relative; padding: 38px 40px 36px; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--surface-border); box-shadow: var(--card-shadow); min-width: 0; }
.kpi-label { font-size: 21px; font-weight: 600; color: var(--fg-2); letter-spacing: -0.005em; line-height: 1.3; }
.kpi-value { margin-top: 16px; font-size: var(--kpi-fs, 76px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-value small { font-size: 0.45em; letter-spacing: -0.02em; font-weight: 600; color: var(--fg-3); margin-left: 6px; }
.kpi-note { margin-top: 14px; font-size: 19px; line-height: 1.4; color: var(--fg-3); }
.kpi.is-accent .kpi-value { color: var(--accent-text); }
.kpi.is-accent::before { content: ""; position: absolute; left: 40px; top: 0; width: 56px; height: 4px; border-radius: 0 0 3px 3px; background: var(--accent); }
.kpi-row.plain .kpi { background: none; border: 0; box-shadow: none; padding: 0 0 0 28px; border-left: 1px solid var(--line); border-radius: 0; }
.delta { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 3px 10px; border-radius: 12px; font-size: 17px; font-weight: 700; letter-spacing: 0; vertical-align: middle; }
.delta.up { color: var(--positive); background: rgba(34, 197, 94, 0.12); }
.delta.down { color: var(--negative); background: rgba(239, 68, 68, 0.12); }

/* ---------- 12. Charts ---------- */
.chart, .bar-chart, .line-chart, .donut-chart { position: relative; width: 100%; min-height: 0; }
.bar-chart, .line-chart { height: var(--chart-h, 560px); }
.donut-chart { height: var(--chart-h, 460px); }
.deck-error { padding: 18px 20px; border: 2px dashed #ef4444; border-radius: 12px; background: rgba(239, 68, 68, 0.06); color: #ef4444; font: 600 18px/1.4 var(--font); }
[data-icon]:not(.icon) svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; }
.chart-title { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.chart-sub { margin-top: 6px; font-size: 20px; color: var(--fg-3); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 19px; font-weight: 500; color: var(--fg-2); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 10px; vertical-align: -1px; background: var(--sw, var(--c1)); }
.legend i.line { height: 4px; border-radius: 2px; width: 22px; vertical-align: 4px; }
.legend i.dash { height: 0; width: 24px; border-radius: 0; background: none; border-top: 3px dashed var(--sw, var(--c1)); vertical-align: 4px; }

/* bar chart (vertical) */
.bc { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
.bc-plot { position: relative; margin-left: var(--axis-w, 0px); }
.bc-grid { position: absolute; inset: 0; pointer-events: none; }
.bc-gl { position: absolute; left: 0; right: 0; bottom: var(--p); border-top: 1px solid var(--grid); }
.bc-gl.zero { border-top-color: var(--line-strong); }
.bc-gl span { position: absolute; right: calc(100% + 14px); top: -12px; font-size: 17px; font-weight: 500; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-cols { position: absolute; inset: 0; display: flex; gap: var(--col-gap, 28px); padding: 0 var(--col-pad, 8px); }
.bc-col { flex: 1 1 0; display: flex; gap: var(--bar-gap, 10px); justify-content: center; min-width: 0; }
.bc-slot { position: relative; flex: 1 1 0; max-width: var(--bar-max, 150px); height: 100%; }
.bc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 10px 10px 3px 3px; background: var(--bar-c, var(--c1)); transform-origin: 50% 100%; }
.bc-bar.s1 { --bar-c: var(--c2); } .bc-bar.s2 { --bar-c: var(--c3); } .bc-bar.s3 { --bar-c: var(--c4); }
.bc-bar.is-dim { --bar-c: var(--c3); }
.bc-bar.is-hl { --bar-c: var(--accent); }
.bc-val { position: absolute; left: -40px; right: -40px; bottom: calc(var(--h) + 12px); text-align: center; font-size: var(--val-fs, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-val.is-hl { color: var(--accent-text); }
.bc-cats { display: flex; gap: var(--col-gap, 28px); padding: 16px var(--col-pad, 8px) 0; margin-left: var(--axis-w, 0px); }
.bc-cat { flex: 1 1 0; text-align: center; font-size: var(--cat-fs, 21px); font-weight: 500; color: var(--fg-2); line-height: 1.25; min-width: 0; }
.bc-cat.is-hl { color: var(--fg); font-weight: 700; }
.bc .legend { margin-top: 22px; margin-left: var(--axis-w, 0px); }

/* bar chart (horizontal) */
.hb { display: flex; flex-direction: column; justify-content: center; gap: var(--row-gap, 22px); height: 100%; }
.hb-row { display: grid; grid-template-columns: var(--label-w, 280px) minmax(0, 1fr); align-items: center; gap: 28px; }
.hb-label { font-size: var(--cat-fs, 24px); font-weight: 600; color: var(--fg); line-height: 1.2; text-align: right; }
.hb-label small { display: block; font-size: 0.72em; font-weight: 500; color: var(--fg-3); margin-top: 2px; }
.hb-track { position: relative; height: var(--bar-h, 46px); border-radius: 8px; background: var(--track-c, transparent); }
.hb-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px 10px 10px 4px; background: var(--bar-c, var(--c1)); transform-origin: 0 50%; }
.hb-bar.is-hl { --bar-c: var(--accent); }
.hb-bar.is-dim { --bar-c: var(--c3); }
.hb-val { position: absolute; top: 50%; left: calc(var(--w) + 16px); transform: translateY(-50%); font-size: var(--val-fs, 24px); font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-val.is-hl { color: var(--accent-text); }

/* line chart (SVG) */
.lc { position: absolute; inset: 0; }
.lc svg { overflow: visible; }
.lc .grid-line { stroke: var(--grid); stroke-width: 1; }
.lc .axis-line { stroke: var(--line-strong); stroke-width: 1.5; }
.lc .tick { fill: var(--fg-3); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lc .xlab { fill: var(--fg-3); font-size: 18px; font-weight: 500; }
.lc .line { fill: none; stroke: var(--ln, var(--c2)); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lc .line.is-hl { stroke-width: 5; }
.lc .area { opacity: 1; }
.lc .dot { fill: var(--dot-fill, var(--ln, var(--c1))); stroke: var(--dot-ring, #fff); stroke-width: 3; }
.slide[data-theme="dark"] .lc .dot { --dot-ring: #04363c; }
.lc .end-label { font-size: 22px; font-weight: 700; fill: var(--ln, var(--fg)); font-variant-numeric: tabular-nums; }
.lc .end-name { font-size: 17px; font-weight: 600; fill: var(--fg-3); }
.lc .ann-line { stroke: var(--fg-4); stroke-width: 1.5; stroke-dasharray: 4 6; }
.lc .ann-text { font-size: 18px; font-weight: 600; fill: var(--fg-2); }
.lc .ann-dot { fill: var(--accent); }

/* donut */
.donut { position: relative; display: flex; align-items: center; gap: 64px; height: 100%; }
.donut.legend-bottom { flex-direction: column; gap: 36px; }
.donut-ring { position: relative; flex: none; width: var(--size, 420px); height: var(--size, 420px); }
.donut-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut-ring .seg { fill: none; stroke: var(--sc, var(--c1)); stroke-linecap: butt; stroke-dasharray: var(--seg) 100; stroke-dashoffset: var(--off, 0); }
.donut-ring .bg { fill: none; stroke: var(--track); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-center .donut-value { font-size: calc(var(--size, 420px) * 0.2); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.donut-center .donut-label { margin-top: 10px; max-width: 62%; font-size: 21px; font-style: normal; font-weight: 500; line-height: 1.3; color: var(--fg-3); }
.donut-legend { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.donut-legend li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: 18px; font-size: 25px; font-weight: 500; color: var(--fg); }
.donut-legend li i { width: 18px; height: 18px; border-radius: 5px; background: var(--sc); transform: translateY(2px); }
.donut-legend li b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
.donut-legend li.is-hl b { color: var(--accent-text); }
.donut-legend li small { grid-column: 2 / 4; font-size: 19px; color: var(--fg-3); font-weight: 400; margin-top: -12px; }

/* ---------- 13. US choropleth map ---------- */
.us-map { position: relative; width: 100%; height: var(--map-h, 640px); min-height: 0; }
.us-map svg.map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.us-map .st { fill: var(--c, var(--map-empty)); stroke: var(--map-stroke); stroke-width: 0.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.us-map .st.no-data { fill: var(--map-empty); }
.us-map .st.is-hl { stroke: var(--accent); stroke-width: 2.2; }
.us-map .st-label { font-size: var(--lab, 11px); font-weight: 700; letter-spacing: 0.02em; fill: var(--lab-c, var(--fg)); pointer-events: none; font-variant-numeric: tabular-nums; }
.us-map .st-label.on-dark { fill: #ffffff; }
.us-map .st-label.on-light { fill: var(--giq-ink); }
.us-map .st-label.muted { fill: var(--fg-3); }
.us-map .st-label .v { font-weight: 600; }
.us-map .leader { stroke: var(--fg-3); stroke-width: 0.9; vector-effect: non-scaling-stroke; fill: none; }
.us-map .leader-dot { fill: var(--fg-2); }
.map-legend { position: absolute; display: flex; flex-direction: column; gap: 12px; font-size: 18px; font-weight: 500; color: var(--fg-2); }
.map-legend.pos-bottom-left { left: 0; bottom: 0; }
.map-legend.pos-bottom-right { right: 0; bottom: 0; align-items: flex-end; }
.map-legend.pos-top-right { right: 0; top: 0; align-items: flex-end; }
.map-legend.pos-below { left: 0; bottom: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: 40px; row-gap: 10px; }
.map-legend.pos-below .map-legend-title { flex-basis: 100%; }
.map-legend-title { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.map-legend-steps { display: flex; gap: 4px; }
.map-legend-steps > span { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--fg-3); white-space: nowrap; }
.map-legend-steps > span i { display: block; width: 74px; height: 14px; border-radius: 3px; background: var(--sw); }
.map-legend-steps > span:first-child i { border-radius: 7px 3px 3px 7px; }
.map-legend-steps > span:last-child i { border-radius: 3px 7px 7px 3px; }
.map-legend-ramp { width: 360px; height: 14px; border-radius: 7px; background: var(--ramp); }
.map-legend-ends { display: flex; justify-content: space-between; width: 360px; font-size: 16px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.map-legend-keys { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.map-legend-keys span { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; }
.map-legend-keys i { width: 16px; height: 16px; border-radius: 4px; background: var(--sw); }

/* ---------- 14. Timeline boxes ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--g, 26px); padding-top: 64px; }
.timeline::before { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; height: 2px; background: var(--line-strong); border-radius: 2px; transform-origin: 0 50%; }
.timeline::after { content: ""; position: absolute; left: 12px; top: 19px; height: 2px; width: var(--progress, 0%); background: var(--accent); border-radius: 2px; transform-origin: 0 50%; }
.tl-item { position: relative; display: flex; flex-direction: column; padding: 30px 30px 32px; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--surface-border); box-shadow: var(--card-shadow); min-width: 0; }
.tl-item::before { content: ""; position: absolute; left: 30px; top: -55px; width: 18px; height: 18px; border-radius: 50%; background: var(--node, var(--tl-node)); box-shadow: 0 0 0 6px var(--node-ring, transparent); }
.tl-item.is-done::before { --node: var(--fg-3); }
.tl-item.is-now::before { --node: var(--accent); --node-ring: rgba(234, 97, 37, 0.2); }
.tl-when { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker); }
.tl-item.is-now .tl-when { color: var(--accent-text); }
.tl-title { margin-top: 14px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--heading); text-wrap: balance; }
.tl-text { margin-top: 12px; font-size: 20px; line-height: 1.45; color: var(--fg-2); }
.tl-item .icon { margin-bottom: 20px; --icon: 52px; }
.timeline.bare .tl-item { background: none; border: 0; box-shadow: none; padding: 0 12px 0 0; }
.timeline.bare .tl-item::before { left: 0; }

/* process steps: numbered boxes with arrows between them */
.process { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 56px; }
.process > li { position: relative; display: flex; flex-direction: column; gap: 14px; }
.process > li + li::before { content: ""; position: absolute; left: -44px; top: 30px; width: 32px; height: 32px; background: var(--fg-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.process .step-n { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: var(--icon-bg); color: var(--icon-fg); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.process > li.is-hl .step-n { background: var(--accent); color: #fff; }
.process h4 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--heading); margin-top: 8px; }
.process p { font-size: 22px; line-height: 1.45; color: var(--fg-2); }

/* ---------- 15. Comparison grid ---------- */
.compare { display: flex; flex-direction: column; font-size: 24px; }
.cmp-row { display: grid; grid-template-columns: var(--first, 1.7fr) repeat(var(--cols, 3), minmax(0, 1fr)); }
.cmp-row > * { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: var(--row-h, 78px); padding: 10px 18px; border-top: 1px solid var(--line); color: var(--fg-2); font-weight: 500; line-height: 1.3; }
.cmp-row > :first-child { align-items: flex-start; text-align: left; font-weight: 600; color: var(--fg); padding-left: 4px; }
.cmp-row.cmp-head > * { border-top: 0; min-height: 84px; font-size: 22px; font-weight: 700; color: var(--fg-2); letter-spacing: -0.005em; }
.cmp-row.cmp-head > :first-child { font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.cmp-row > .is-us { background: var(--us-bg, rgba(5, 85, 96, 0.07)); color: var(--fg); border-top-color: var(--us-line, rgba(5, 85, 96, 0.12)); }
.slide[data-theme="dark"] .cmp-row > .is-us { --us-bg: rgba(255, 255, 255, 0.07); --us-line: rgba(255, 255, 255, 0.1); }
.cmp-row.cmp-head > .is-us { border-radius: 20px 20px 0 0; color: var(--heading); font-size: 24px; }
.cmp-row:last-child > .is-us { border-radius: 0 0 20px 20px; }
.cmp-row .note { display: block; font-size: 17px; font-weight: 500; color: var(--fg-3); margin-top: 4px; }
.compare i.yes, .compare i.no, .compare i.part { display: inline-block; flex: none; width: 34px; height: 34px; }
.compare i.yes { background: var(--yes-c, var(--giq-teal)); border-radius: 50%; -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat; }
.compare .is-us i.yes { --yes-c: var(--accent); }
.slide[data-theme="dark"] .compare i.yes { --yes-c: #7cc4cc; }
.slide[data-theme="dark"] .compare .is-us i.yes { --yes-c: var(--accent); }
.compare i.no { width: 22px; height: 3px; border-radius: 2px; background: var(--fg-4); }
.compare i.part { border-radius: 50%; border: 3px solid var(--fg-3); background: linear-gradient(90deg, var(--fg-3) 50%, transparent 50%); width: 30px; height: 30px; }
.cmp-legend { display: flex; gap: 32px; margin-top: 24px; font-size: 18px; color: var(--fg-3); }
.cmp-legend span { display: inline-flex; align-items: center; gap: 10px; }
.cmp-legend i { transform: scale(0.7); }

/* ---------- 16. Feature cards ---------- */
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--g, 28px); }
.card { display: flex; flex-direction: column; padding: var(--pad, 38px 40px 40px); border-radius: var(--radius-lg); min-width: 0; }
.card .icon { margin-bottom: 30px; }
.card-kicker { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker); margin-bottom: 10px; }
.card-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--heading); text-wrap: balance; }
.card-text { margin-top: 14px; font-size: 22px; line-height: 1.5; color: var(--fg-2); }
.card-foot { margin-top: auto; padding-top: 24px; font-size: 19px; color: var(--fg-3); }
.card.is-accent { border-color: rgba(234, 97, 37, 0.35); box-shadow: 0 0 0 1px rgba(234, 97, 37, 0.2), var(--card-shadow); }
.cards.compact .card { --pad: 30px 32px; }
.cards.compact .card .icon { --icon: 52px; margin-bottom: 22px; }
.cards.compact .card-title { font-size: 26px; }
.cards.compact .card-text { font-size: 20px; }

/* ---------- 17. Screenshot frame with browser chrome ---------- */
.browser { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; min-width: 0;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.07), 0 2px 4px rgba(17, 24, 39, 0.04), 0 30px 70px -28px rgba(5, 61, 67, 0.4), 0 70px 120px -70px rgba(17, 24, 39, 0.45); }
.slide[data-theme="dark"] .browser { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 90px -30px rgba(0, 0, 0, 0.6), 0 80px 140px -70px rgba(0, 0, 0, 0.6); }
.browser-bar { flex: none; position: relative; display: flex; align-items: center; height: var(--bar-h, 44px); padding: 0 18px; background: #f7f5f0; border-bottom: 1px solid #ebe7de; }
.browser-dots { display: flex; gap: 8px; }
.browser-dots i { width: 12px; height: 12px; border-radius: 50%; background: #dcd7cc; }
.browser-url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; height: 28px; max-width: 60%; padding: 0 16px; border-radius: 14px; background: #fff; border: 1px solid #ebe7de; font-size: 14px; font-weight: 500; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-url::before { content: ""; flex: none; width: 11px; height: 11px; background: #9ca3af; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='10' width='14' height='11' rx='2.5' fill='black'/><path d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.4'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='10' width='14' height='11' rx='2.5' fill='black'/><path d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.4'/></svg>") center / contain no-repeat; }
.browser-url:empty { display: none; }
.browser-view { position: relative; overflow: hidden; background: #f3efe7; aspect-ratio: var(--ratio, 16 / 9); }
.browser-view > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 0 0); transform-origin: var(--zx, 50%) var(--zy, 50%); transform: scale(var(--zoom, 1)); }
.browser.no-bar .browser-bar { display: none; }
.browser.tilt-left { transform: perspective(2400px) rotateY(9deg) rotateX(2deg); }
.browser.tilt-right { transform: perspective(2400px) rotateY(-9deg) rotateX(2deg); }
.browser.sm { border-radius: 14px; --bar-h: 36px; }
.browser.sm .browser-url { height: 22px; font-size: 12px; }
.screen-stack { position: relative; }
.screen-stack > .browser:nth-child(2) { position: absolute; width: var(--back-w, 62%); right: var(--back-r, -2%); bottom: var(--back-b, -12%); }
.pin { position: absolute; left: var(--x); top: var(--y); z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--giq-orange); color: #fff; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 6px rgba(234, 97, 37, 0.22), 0 10px 24px -8px rgba(0, 0, 0, 0.45); }
.pin-ring { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 2; border: 3px solid var(--giq-orange); border-radius: 14px; box-shadow: 0 0 0 7px rgba(234, 97, 37, 0.14); pointer-events: none; }
.pin-list { display: flex; flex-direction: column; gap: 26px; counter-reset: pl; }
.pin-list > li { counter-increment: pl; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-items: start; }
.pin-list > li::before { content: counter(pl); width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 21px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pin-list h4 { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; color: var(--heading); line-height: 1.25; padding-top: 6px; }
.pin-list p { margin-top: 6px; font-size: 21px; line-height: 1.45; color: var(--fg-2); }
.caption { margin-top: 18px; font-size: 18px; color: var(--fg-3); }

/* ---------- 18. Two-sided marketplace flow ---------- */
.flow { position: relative; width: 100%; height: var(--flow-h, 640px); }
.flow svg.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-node { position: absolute; transform: translate(-50%, -50%); width: var(--node-w, 250px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 22px 24px;
  border-radius: 26px; background: var(--card-bg); border: 1px solid var(--surface-border); box-shadow: var(--card-shadow); z-index: 2; }
.slide[data-theme="dark"] .flow-node { background: linear-gradient(180deg, rgba(10, 80, 88, 0.96), rgba(4, 52, 58, 0.96)); }
.flow-node .icon { --icon: 60px; margin-bottom: 4px; }
.flow-node .flow-name { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--heading); line-height: 1.15; }
.flow-node .flow-sub { font-size: 18px; line-height: 1.35; color: var(--fg-3); }
.flow-node.is-core { --node-w: 290px; padding: 34px 26px 30px; border: 2px solid rgba(234, 97, 37, 0.55); box-shadow: 0 0 0 10px rgba(234, 97, 37, 0.08), var(--card-shadow); }
.flow-node.is-core .logo { --logo-h: 46px; background-position: 50% 50%; margin: 6px 0 6px; }
.flow-edge { fill: none; stroke-width: 3; stroke-linecap: round; }
.flow-edge.k-money { stroke: var(--accent); stroke-width: 3.5; }
.flow-edge.k-data { stroke: var(--data-c, var(--giq-teal-light)); stroke-dasharray: 2 9; stroke-width: 3.5; }
.slide[data-theme="dark"] .flow-edge.k-data { --data-c: #8fd3da; }
.flow-edge.k-product { stroke: var(--fg-3); }
.flow-head { stroke: none; }
.flow-head.k-money { fill: var(--accent); }
.flow-head.k-data { fill: var(--data-c, var(--giq-teal-light)); }
.slide[data-theme="dark"] .flow-head.k-data { fill: #8fd3da; }
.flow-head.k-product { fill: var(--fg-3); }
.flow-draw { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; }
.flow-label { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 22px; font-size: 18px; font-weight: 600; white-space: nowrap; line-height: 1.2;
  background: var(--surface-2); border: 1px solid var(--surface-border); color: var(--fg-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35); }
.slide[data-theme="light"] .flow-label { background: #fff; }
.slide[data-theme="dark"] .flow-label { background: #0b4c54; }
.flow-label.k-money { color: var(--accent-text); border-color: rgba(234, 97, 37, 0.35); }
.flow-label.k-data { color: var(--data-c, var(--giq-teal)); }
.slide[data-theme="dark"] .flow-label.k-data { color: #a9dde2; }
.flow-pulse { fill: var(--accent); opacity: 0; }
.flow.is-pulsing .flow-pulse { opacity: 1; }
.flow-legend { display: flex; gap: 36px; font-size: 19px; font-weight: 500; color: var(--fg-2); }
.flow-legend span { display: inline-flex; align-items: center; gap: 12px; }
.flow-legend i { width: 34px; height: 0; border-top: 3.5px solid var(--accent); }
.flow-legend i.k-data { border-top: 3.5px dotted var(--giq-teal-light); }
.slide[data-theme="dark"] .flow-legend i.k-data { border-top-color: #8fd3da; }
.flow-legend i.k-product { border-top-color: var(--fg-3); }

/* ---------- 19. Pricing cards ---------- */
.pricing { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--g, 28px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 44px 44px 42px; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid var(--surface-border); box-shadow: var(--card-shadow); min-width: 0; }
.plan-name { font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kicker); }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; font-size: 80px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.plan-per { font-size: 24px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.plan-desc { margin-top: 16px; font-size: 23px; line-height: 1.45; color: var(--fg-2); }
.plan-list { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.plan-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 21px; line-height: 1.4; color: var(--fg); }
.plan-list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--giq-teal); -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat; }
.slide[data-theme="dark"] .plan-list li::before { background: #7cc4cc; }
.plan-foot { margin-top: auto; padding-top: 28px; font-size: 18px; color: var(--fg-3); }
.plan-tag { position: absolute; top: -17px; left: 44px; height: 34px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 17px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(234, 97, 37, 0.8); }
.plan.is-featured { border: 2px solid var(--accent); box-shadow: 0 0 0 8px rgba(234, 97, 37, 0.07), var(--card-shadow); }
.plan.is-featured .plan-list li::before { background: var(--accent); }
.slide[data-theme="light"] .plan.is-featured { background: linear-gradient(180deg, #fff 0%, #fffaf6 100%); }

/* ---------- 20. Roadmap lanes ---------- */
.roadmap { display: flex; flex-direction: column; --rm-gap: 18px; }
.rm-head { display: grid; grid-template-columns: var(--lane-w, 260px) repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: var(--rm-gap); }
.rm-head > * { padding: 0 6px 18px; font-size: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.rm-head > .is-now { color: var(--accent-text); }
.rm-lane { display: grid; grid-template-columns: var(--lane-w, 260px) minmax(0, 1fr); column-gap: var(--rm-gap); border-top: 1px solid var(--line); }
.rm-lane-name { display: flex; flex-direction: column; justify-content: center; padding: 22px 12px 22px 0; font-size: 25px; font-weight: 700; letter-spacing: -0.015em; color: var(--heading); line-height: 1.2; }
.rm-lane-name small { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.rm-track { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: var(--rm-gap); row-gap: 12px; align-content: center; padding: 18px 0; }
.rm-item { grid-column: var(--from, 1) / span var(--span, 1); display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 12px 20px 12px 22px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--surface-border); box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.rm-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rm-c, var(--c2)); }
.rm-item b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); line-height: 1.25; }
.rm-item span { font-size: 16px; color: var(--fg-3); line-height: 1.35; }
.rm-item.is-now { --rm-c: var(--accent); }
.rm-item.is-done { --rm-c: var(--fg-4); opacity: 0.78; }
.rm-item.is-done b::after { content: "  Done"; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.slide[data-theme="dark"] .rm-item { background: rgba(255, 255, 255, 0.06); }

/* ---------- 21. Quote ---------- */
.quote { position: relative; max-width: 1480px; }
.quote::before { content: ""; display: block; width: 92px; height: 72px; margin-bottom: 36px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 72'><path d='M0 72V43C0 18 11 4 33 0l4 10C25 14 19 22 18 34h17v38zm55 0V43C55 18 66 4 88 0l4 10c-12 4-18 12-19 24h17v38z' fill='black'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 72'><path d='M0 72V43C0 18 11 4 33 0l4 10C25 14 19 22 18 34h17v38zm55 0V43C55 18 66 4 88 0l4 10c-12 4-18 12-19 24h17v38z' fill='black'/></svg>") center / contain no-repeat; }
.quote > p { font-size: var(--q-fs, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--heading); text-wrap: balance; }
.quote > footer { display: flex; align-items: center; gap: 20px; margin-top: 48px; }
.quote-name { font-size: 26px; font-weight: 700; color: var(--fg); }
.quote-role { font-size: 22px; color: var(--fg-3); margin-top: 2px; }
.quote.is-placeholder > p { color: var(--fg-3); }

/* ---------- 22. Founder portrait frame ---------- */
.portrait { position: relative; display: flex; flex-direction: column; width: var(--pw, 520px); }
.portrait-frame { position: relative; aspect-ratio: var(--pr, 4 / 5); border-radius: 32px; overflow: hidden; background: linear-gradient(155deg, #0a6874 0%, #055560 45%, #022a2f 100%);
  box-shadow: 0 0 0 1px var(--surface-border), 0 40px 90px -40px rgba(3, 61, 67, 0.7); }
.portrait-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; }
.portrait-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ppos, 50% 30%); }
.portrait-ph { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; }
.portrait.is-missing .portrait-ph { display: flex; }
.portrait.is-missing img { display: none; }
.portrait-ph::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(closest-side, rgba(40, 170, 180, 0.35), rgba(40, 170, 180, 0)) 50% 38% / 120% 90% no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'><g fill='none' stroke='white'><circle cx='200' cy='210' r='90' stroke-opacity='.16'/><circle cx='200' cy='210' r='140' stroke-opacity='.11'/><circle cx='200' cy='210' r='190' stroke-opacity='.07'/><circle cx='200' cy='210' r='240' stroke-opacity='.045'/></g></svg>") center / cover no-repeat; }
.portrait-initials { position: relative; font-size: calc(var(--pw, 520px) * 0.25); font-weight: 600; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.92); }
.portrait-ph small { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.portrait figcaption { margin-top: 26px; }
.portrait-name { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--heading); }
.portrait-role { margin-top: 4px; font-size: 22px; color: var(--fg-3); }
.portrait-badge { position: absolute; right: 22px; top: 22px; z-index: 2; }

/* ---------- 23. Sources footnote line ---------- */
.sources { flex: 1; font-size: 15px; line-height: 1.5; color: var(--fg-3); max-width: 1680px; }
.sources b, .sources .sources-label { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; color: var(--fg-3); margin-right: 10px; }
.sources > span + span { margin-left: 18px; }
.sources a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sources .est { color: var(--accent-text); font-weight: 600; }
.ref { font-size: 0.5em; font-weight: 700; vertical-align: super; line-height: 0; margin-left: 2px; color: var(--fg-3); letter-spacing: 0; }
.est-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin-left: 10px; border-radius: 13px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; color: var(--accent-text); background: rgba(234, 97, 37, 0.12); }

/* data table */
.table { width: 100%; border-collapse: collapse; font-size: 22px; }
.table th { text-align: left; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); padding: 0 16px 14px; }
.table td { padding: 18px 16px; border-top: 1px solid var(--line); color: var(--fg); font-variant-numeric: tabular-nums; }
.table td.num, .table th.num { text-align: right; }
.table tr.is-hl td { color: var(--accent-text); font-weight: 700; }

/* =====================================================================
   24. Motion
   Everything above renders in its FINAL state. The hidden starting
   states below apply only while motion is on (html.has-motion) and only
   to slides that are not showing yet (.slide:not(.is-shown)). JS sets
   --rd (reveal delay) per element for the left-to-right sweep.
   ===================================================================== */
.has-motion .slide:not(.is-shown) [data-reveal] { opacity: 0; transform: translate3d(-44px, 0, 0); }
.has-motion .slide:not(.is-shown) [data-reveal="up"], .has-motion .slide:not(.is-shown) [data-reveal-type="up"] { transform: translate3d(0, 30px, 0); }
.has-motion .slide:not(.is-shown) :is([data-reveal-type="fade"], [data-reveal="fade"]) { transform: none; }
.has-motion .slide:not(.is-shown) :is([data-reveal-type="scale"], [data-reveal="scale"]) { transform: scale(0.94); }
.has-motion .slide:not(.is-shown) :is(.display, .h1, .h2)[data-reveal] { filter: blur(8px); }
.has-motion .slide.is-shown [data-reveal] { transition: opacity var(--t-fade) var(--ease-out) var(--rd, 0ms), transform var(--t-reveal) var(--ease-out) var(--rd, 0ms), filter 700ms var(--ease-out) var(--rd, 0ms); }

/* background rings settle as a slide arrives */
.has-motion .slide:not(.is-shown)::before { opacity: 0; transform: scale(1.06); }
.has-motion .slide.is-shown::before { transition: opacity 1200ms var(--ease-out), transform 2200ms var(--ease-out); }

/* header steps fill */
.has-motion .slide:not(.is-shown) .steps > li.is-now { --fill: 0%; }
.has-motion .slide.is-shown .steps > li.is-now::after { transition: background-size 900ms var(--ease-out) 350ms; }

/* tile settles from 90 percent */
.has-motion .slide:not(.is-shown) .tile[data-reveal] { transform: scale(0.86) translate3d(-20px, 0, 0); }

/* accent rule draws */
.has-motion .slide:not(.is-shown) .rule-accent, .has-motion .slide:not(.is-shown) .rule.draw { transform: scaleX(0); }
.rule.draw { transform-origin: 0 50%; }
.has-motion .slide.is-shown .rule-accent, .has-motion .slide.is-shown .rule.draw { transition: transform 900ms var(--ease-out) calc(var(--rd, 300ms) + 200ms); }

/* bars grow */
.has-motion .slide:not(.is-shown) .bc-bar { transform: scaleY(0); }
.has-motion .slide:not(.is-shown) .hb-bar { transform: scaleX(0); }
.has-motion .slide:not(.is-shown) :is(.bc-val, .hb-val) { opacity: 0; }
.has-motion .slide:not(.is-shown) .bc-cat { opacity: 0; transform: translate3d(-14px, 0, 0); }
.has-motion .slide.is-shown :is(.bc-bar, .hb-bar) { transition: transform 1100ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 80ms + 120ms); }
.has-motion .slide.is-shown :is(.bc-val, .hb-val) { transition: opacity 500ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 80ms + 700ms); }
.has-motion .slide.is-shown .bc-cat { transition: opacity 500ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 80ms), transform 700ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 80ms); }

/* lines draw */
.has-motion .slide:not(.is-shown) .lc .line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.has-motion .slide.is-shown .lc .line { stroke-dasharray: 1 1; transition: stroke-dashoffset 1600ms var(--ease-in-out) calc(var(--rd, 0ms) + var(--i, 0) * 200ms + 150ms); }
.has-motion .slide:not(.is-shown) .lc .area { opacity: 0; clip-path: inset(0 100% 0 0); }
.has-motion .slide.is-shown .lc .area { clip-path: inset(0 0 0 0); transition: clip-path 1600ms var(--ease-in-out) calc(var(--rd, 0ms) + var(--i, 0) * 200ms + 150ms), opacity 600ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 200ms + 150ms); }
.has-motion .slide:not(.is-shown) .lc :is(.dot, .end-label, .end-name, .ann) { opacity: 0; }
.has-motion .slide.is-shown .lc :is(.dot, .end-label, .end-name, .ann) { transition: opacity 500ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 200ms + 1500ms); }
.has-motion .slide:not(.is-shown) .lc :is(.grid-line, .tick, .xlab) { opacity: 0; }
.has-motion .slide.is-shown .lc :is(.grid-line, .tick, .xlab) { transition: opacity 600ms var(--ease-out) var(--rd, 0ms); }

/* donut segments sweep */
.has-motion .slide:not(.is-shown) .donut-ring .seg { stroke-dasharray: 0 100 !important; }
.has-motion .slide.is-shown .donut-ring .seg { transition: stroke-dasharray 1200ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 160ms + 150ms); }
.has-motion .slide:not(.is-shown) .donut-center { opacity: 0; transform: scale(0.92); }
.has-motion .slide.is-shown .donut-center { transition: opacity 600ms var(--ease-out) calc(var(--rd, 0ms) + 500ms), transform 900ms var(--ease-out) calc(var(--rd, 0ms) + 500ms); }
.has-motion .slide:not(.is-shown) .donut-legend li { opacity: 0; transform: translate3d(-20px, 0, 0); }
.has-motion .slide.is-shown .donut-legend li { transition: opacity 500ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 120ms + 400ms), transform 700ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 120ms + 400ms); }

/* map states fill west to east */
.has-motion .slide:not(.is-shown) .us-map .st { fill: var(--map-empty); }
.has-motion .slide.is-shown .us-map .st { transition: fill 650ms var(--ease-out) calc(var(--rd, 0ms) + var(--w, 0) * 1100ms + 150ms); }
.has-motion .slide:not(.is-shown) .us-map :is(.st-label, .leader, .leader-dot) { opacity: 0; }
.has-motion .slide.is-shown .us-map :is(.st-label, .leader, .leader-dot) { transition: opacity 500ms var(--ease-out) calc(var(--rd, 0ms) + var(--w, 0) * 1100ms + 550ms); }
.has-motion .slide:not(.is-shown) .map-legend { opacity: 0; transform: translate3d(-20px, 0, 0); }
.has-motion .slide.is-shown .map-legend { transition: opacity 600ms var(--ease-out) calc(var(--rd, 0ms) + 1300ms), transform 800ms var(--ease-out) calc(var(--rd, 0ms) + 1300ms); }

/* timeline: the line draws, boxes and nodes appear left to right */
.has-motion .slide:not(.is-shown) .timeline::before, .has-motion .slide:not(.is-shown) .timeline::after { transform: scaleX(0); }
.has-motion .slide.is-shown .timeline::before { transition: transform 1400ms var(--ease-in-out) var(--rd, 0ms); }
.has-motion .slide.is-shown .timeline::after { transition: transform 1400ms var(--ease-in-out) calc(var(--rd, 0ms) + 300ms); }
.has-motion .slide:not(.is-shown) .tl-item::before { transform: scale(0); }
.has-motion .slide.is-shown .tl-item::before { transition: transform 600ms var(--ease-spring) calc(var(--rd, 0ms) + 150ms); }

/* flow: edges draw, labels follow */
.has-motion .slide:not(.is-shown) .flow-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.has-motion .slide.is-shown .flow-draw { stroke-dasharray: 1 1; transition: stroke-dashoffset 1000ms var(--ease-in-out) calc(var(--rd, 0ms) + var(--i, 0) * 230ms + 500ms); }
.has-motion .slide:not(.is-shown) .flow-label { opacity: 0; transform: translate(-50%, -30%); }
.has-motion .slide.is-shown .flow-label { transition: opacity 500ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 230ms + 1100ms), transform 700ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 230ms + 1100ms); }
.has-motion .slide:not(.is-shown) .flow-node { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
.has-motion .slide.is-shown .flow-node { transition: opacity 600ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 110ms), transform 800ms var(--ease-out) calc(var(--rd, 0ms) + var(--i, 0) * 110ms); }

/* pins pop in after the screenshot lands */
.has-motion .slide:not(.is-shown) :is(.pin, .pin-ring) { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.has-motion .slide:not(.is-shown) .pin-ring { transform: scale(1.06); }
.has-motion .slide.is-shown :is(.pin, .pin-ring) { transition: opacity 400ms var(--ease-out) calc(var(--rd, 0ms) + 700ms + var(--i, 0) * 160ms), transform 600ms var(--ease-spring) calc(var(--rd, 0ms) + 700ms + var(--i, 0) * 160ms); }

/* =====================================================================
   25. Presenter chrome: progress bar, counter, overview, help
   ===================================================================== */
.deck-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.deck-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, 0.08); }
html[data-current-theme="light"] .deck-progress { background: rgba(17, 24, 39, 0.06); }
.deck-progress i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #f08a54, var(--giq-orange)); border-radius: 0 3px 3px 0; transition: width 700ms var(--ease-out); }
.deck-counter { position: absolute; right: 40px; bottom: 22px; font-size: 17px; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.5); transition: opacity 400ms, color 400ms; }
html[data-current-theme="light"] .deck-counter { color: rgba(17, 24, 39, 0.4); }
.deck-counter b { font-weight: 700; color: rgba(255, 255, 255, 0.85); }
html[data-current-theme="light"] .deck-counter b { color: rgba(17, 24, 39, 0.75); }
html.is-idle .deck-counter { opacity: 0; }
html.is-idle, html.is-idle * { cursor: none !important; }
.deck-hide-chrome .deck-chrome { display: none; }

.deck-overview { position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: 48px 56px 72px; background: rgba(2, 24, 27, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms; font-family: var(--font); }
html.is-overview .deck-overview { opacity: 1; visibility: visible; transition: opacity 280ms var(--ease-out); }
.deck-overview-head { display: flex; justify-content: space-between; align-items: baseline; color: rgba(255, 255, 255, 0.85); margin: 0 auto 28px; max-width: 1760px; }
.deck-overview-head b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.deck-overview-head span { font-size: 14px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.04em; }
.deck-overview-grid { display: grid; grid-template-columns: repeat(var(--ov-cols, 4), minmax(0, 1fr)); gap: 28px 24px; max-width: 1760px; margin: 0 auto; }
.ov-item { position: relative; cursor: pointer; border: 0; padding: 0; background: none; text-align: left; font: inherit; color: rgba(255, 255, 255, 0.6); }
.ov-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px -20px rgba(0, 0, 0, 0.8); transition: transform 220ms var(--ease-out), box-shadow 220ms; }
.ov-thumb > .slide { visibility: visible !important; transform-origin: 0 0; transform: scale(var(--ov-s, 0.2)); pointer-events: none; }
.ov-thumb, .ov-thumb * { transition-property: none !important; animation: none !important; }
.ov-thumb { transition: transform 220ms var(--ease-out), box-shadow 220ms !important; }
.ov-item:hover .ov-thumb, .ov-item:focus-visible .ov-thumb { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
.ov-item.is-current .ov-thumb { box-shadow: 0 0 0 3px var(--giq-orange), 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
.ov-item:focus { outline: none; }
.ov-num { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-num b { font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; margin-right: 6px; color: rgba(255, 255, 255, 0.85); }
.ov-item.is-current .ov-num { color: var(--giq-orange-light); }

.deck-help { position: fixed; z-index: 60; right: 28px; bottom: 28px; width: 360px; padding: 24px 26px; border-radius: 18px; background: rgba(3, 40, 44, 0.96); color: #fff; font-family: var(--font); font-size: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 200ms, transform 300ms var(--ease-out), visibility 0s linear 200ms; }
html.is-help .deck-help { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms, transform 300ms var(--ease-out); }
.deck-help h3 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.deck-help dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; }
.deck-help dt { font-weight: 700; color: #fff; white-space: nowrap; }
.deck-help dd { margin: 0; color: rgba(255, 255, 255, 0.72); }
.deck-help kbd { font: inherit; display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); text-align: center; }

/* =====================================================================
   26. Static mode (?static=1) and reduced motion
   ===================================================================== */
html.is-static .deck-chrome { display: none; }
html.is-static *, html.is-static *::before, html.is-static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .has-motion .slide [data-reveal], .has-motion .slide :is(.bc-bar, .hb-bar, .lc .line, .lc .area, .donut-ring .seg, .us-map .st, .flow-draw, .flow-node, .flow-label, .tl-item, .pin, .pin-ring) { transition: none !important; }
}

/* =====================================================================
   27. Print: one slide per page, every slide in its final state.
   For a reliable PDF open the deck with ?static=1 first.
   ===================================================================== */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html.deck-root, html.deck-root body { height: auto; overflow: visible; background: none; }
  .deck-viewport { position: static; overflow: visible; background: none; }
  .deck-stage { position: static; transform: none !important; width: 1920px; height: auto; overflow: visible; contain: none; }
  .deck-stage > .deck { position: static; }
  .slide { position: relative !important; visibility: visible !important; transform: none !important; opacity: 1 !important; break-after: page; page-break-after: always; break-inside: avoid; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .deck-chrome, .deck-overview, .deck-help, .deck-shade { display: none !important; }
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; transition: none !important; animation: none !important; }
  .slide [data-reveal], .slide .tile[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .slide::before { opacity: 1 !important; transform: none !important; }
  .slide :is(.bc-bar, .hb-bar) { transform: none !important; }
  .slide :is(.bc-val, .hb-val, .bc-cat, .lc .area, .lc .dot, .lc .end-label, .lc .end-name, .lc .ann, .lc .grid-line, .lc .tick, .lc .xlab, .donut-center, .donut-legend li, .map-legend, .us-map .st-label, .us-map .leader, .us-map .leader-dot, .flow-label) { opacity: 1 !important; }
  .slide .lc .line, .slide .flow-draw { stroke-dashoffset: 0 !important; }
  .slide .donut-ring .seg { stroke-dasharray: var(--seg) 100 !important; }
  .slide .us-map .st { fill: var(--c, var(--map-empty)) !important; }
  .slide .flow-node { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .slide .pin { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .slide .pin-ring { opacity: 1 !important; transform: none !important; }
  .slide .timeline::before, .slide .timeline::after, .slide .tl-item::before, .slide .rule-accent, .slide .rule.draw { transform: none !important; }
  .slide .steps > li.is-now { --fill: 100% !important; }
}