/* ==========================================================================
   AUTON · RAI PITCH 2026 · deck.css  (v2: brand rebuild)
   Fixed 1920x1080 stage, scaled as a whole by deck.js.
   Palette follows the revision brief, section 2: navy + green, no Apple greys.
   Slides rest in their FINAL state; animations only run while a slide has .play,
   so print/PDF and reduced-motion always show the end state.
   ========================================================================== */

/* ---------- Fonts (local, offline) ---------- */
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: block;
  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"; src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: block;
  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;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #2A4558;          /* headlines, big numbers, dark-slide cards */
  --deep: #0F1C27;          /* dark slide background */
  --green: #01B75C;         /* hero accent; text/lines on dark; large fills + logo on light */
  --green-text: #007A3D;    /* green text on light */
  --green-bar: #00964B;     /* bars + icons on light */
  --teal: #129487;          /* second chart / bento colour (fills only) */
  --blue: #469CCE;          /* third chart / bento colour (fills only) */
  --bg: #FCFCFC;
  --surface: #EEF2F4;       /* cards on light slides */
  --text2: #5B6E7C;         /* labels, captions on light */
  --text3: #3F5262;         /* small print on light (7:1) */
  --text2d: #A9B8C4;        /* labels on deep navy */
  --hair: #D5DDE2;
  --hairD: #22394A;
  --white: #FFFFFF;
  --font: "Inter", -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --k: .8;                  /* delay compression: every slide settles in about 2.5 s */
  --stage-bg: #0A141B;
  --slide-bg: var(--bg);
  --grad: linear-gradient(90deg, #01B75C 0%, #129487 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--stage-bg); }
body { font-family: var(--font); color: var(--navy); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss03"; }

/* ---------- Fixed 16:9 stage ---------- */
.deck-viewport { position: fixed; inset: 0; overflow: hidden; background: var(--stage-bg); }
.deck-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; background: var(--slide-bg); }
.slide {
  position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: hidden; display: block;
  visibility: hidden; opacity: 0; pointer-events: none; background: var(--slide-bg);
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.slide.active, .slide.visible { visibility: visible; opacity: 1; pointer-events: auto; z-index: 2; transition: opacity .5s ease, visibility 0s; }
.slide.leaving { visibility: visible; z-index: 1; }
.slide.dark { --slide-bg: var(--deep); background: var(--deep); color: #fff; }
img, video, canvas, svg { max-width: none; max-height: none; }
.notes { display: none; }
.progress { position: fixed; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--green); z-index: 50; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.blackout { position: fixed; inset: 0; background: #06101A; z-index: 90; display: none; }
body.black .blackout { display: block; }
body.idle { cursor: none; }

/* ---------- Type ---------- */
.h1 { position: absolute; left: 96px; top: 88px; max-width: 1728px; font-size: 68px; line-height: 1.08; font-weight: 600; letter-spacing: -0.022em; color: var(--navy); text-wrap: balance; }
.dark .h1 { color: #fff; }
.abs { position: absolute; }
.num { font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fn { position: absolute; left: 96px; bottom: 30px; width: 1728px; font-size: 12px; line-height: 1.45; color: var(--text3); }
.dark .fn { color: var(--text2d); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline-block; }
sup.ast { font-size: .6em; vertical-align: .75em; font-weight: 600; letter-spacing: 0; }
.g { color: var(--green-text); } .dark .g { color: var(--green); }

/* line icons (Lucide, stroke 1.75) */
.ic { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* photos */
.ph { position: absolute; overflow: hidden; border-radius: 24px; background: var(--surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* brand motif: dotted arc + dots, drawn from the logo's language */
.ringmotif { position: absolute; overflow: visible; pointer-events: none; }
.ringmotif .arc { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; }
.ringmotif .dots { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.1 30; }
.ringmotif .dot { fill: var(--green); }
.wm { position: absolute; opacity: .05; right: -180px; bottom: -240px; width: 760px; height: 760px; }
.wm .arc, .wm .dots { stroke: #fff; } .wm .dot { fill: #fff; }

/* ---------- Motion primitives ---------- */
.slide.play .rv       { animation: rv .7s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
.slide.play .rv-scale { animation: rvScale .9s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
.slide.play .rv-left  { animation: rvLeft .9s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
.slide.play .rv-right { animation: rvRight .9s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
.slide.play .rv-fade  { animation: rvFade .7s ease both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
@keyframes rv      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rvScale { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rvLeft  { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes rvRight { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes rvFade  { from { opacity: 0; } to { opacity: 1; } }
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: 0; }
.slide.play .draw { animation: draw 1s var(--ease-io) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
@keyframes draw { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }
.slide.play .wipe { animation: wipe 1s var(--ease-io) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); transform-origin: 0 50%; }
@keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slide.play .wipe-y { animation: wipeY 1s var(--ease-io) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); transform-origin: 50% 0; }
@keyframes wipeY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
[data-morph] { will-change: left, top, width, height; }

/* money-flow dots: rest on the line (print), travel while the slide plays */
.mdot { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--green); offset-rotate: 0deg; offset-distance: calc(var(--o, 50) * 1%); }
.slide.play .mdot { animation: flow 3.4s linear infinite both; animation-delay: calc(var(--k2, 0) * 1.1s); }
@keyframes flow { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ==========================================================================
   S1 · the smile
   ========================================================================== */
.s1 .glow { position: absolute; left: 960px; top: 540px; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(18,148,135,.16), rgba(18,148,135,0) 70%); }
.s1 .face { position: absolute; left: 960px; top: 540px; width: 780px; height: 780px; margin: -390px 0 0 -390px; }
.s1 .face img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s1 .face svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s1 .smile { fill: none; stroke: #C6D4F5; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 330; stroke-dashoffset: 0; filter: drop-shadow(0 0 7px rgba(120,165,255,.9)) drop-shadow(0 0 22px rgba(80,140,255,.5)); }
.slide.play.s1 .face  { animation: faceIn 1.1s var(--ease) both; }
.slide.play.s1 .glow  { animation: rvFade 1.4s ease both; }
.slide.play.s1 .smile { animation: smileDraw .95s var(--ease-io) 1.05s both; }
@keyframes faceIn { from { opacity: 0; transform: translateY(30px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes smileDraw { from { stroke-dashoffset: 330; } to { stroke-dashoffset: 0; } }

/* ==========================================================================
   S2 · a year with Voltie
   ========================================================================== */
.s2 .h1 { max-width: 800px; }
.s2 .vline { position: absolute; left: 121px; top: 336px; width: 3px; height: 262px; background: var(--green-bar); border-radius: 2px; }
.s2 .phase { position: absolute; left: 96px; display: flex; align-items: center; gap: 24px; height: 52px; }
.s2 .phase i { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--green-bar); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 24px; font-weight: 600; color: var(--green-text); }
.s2 .phase span { font-size: 28px; line-height: 1.2; color: var(--navy); font-weight: 500; }
.s2 .stat { position: absolute; top: 676px; }
.s2 .stat b { display: block; font-size: 104px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s2 .stat span { display: block; margin-top: 8px; font-size: 24px; color: var(--text2); }
.s2 .dist { position: absolute; left: 96px; top: 836px; width: 780px; font-size: 28px; line-height: 1.4; color: var(--text2); }
.s2 .end { position: absolute; left: 96px; top: 956px; font-size: 56px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--navy); }
.s2 .circle { position: absolute; left: 1142px; top: 90px; width: 500px; height: 500px; border-radius: 50%; overflow: hidden; background: var(--surface); }
.s2 .circle img { width: 100%; height: 100%; object-fit: cover; object-position: 61% 50%; transform: scale(1.3); transform-origin: 50% 50%; display: block; }
.s2 .ringmotif { left: 1092px; top: 40px; width: 600px; height: 600px; }
.s2 .pills { position: absolute; left: 960px; width: 864px; display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; }
.s2 .pill { height: 48px; padding: 0 24px; border-radius: 24px; display: inline-flex; align-items: center; font-size: 24px; font-weight: 600; white-space: nowrap; }
.s2 .pill.navy { background: var(--navy); color: #fff; }
.s2 .pill.soft { background: var(--surface); color: var(--navy); }
.s2 .strip { position: absolute; left: 960px; top: 830px; width: 864px; height: 150px; display: flex; gap: 18px; }
.s2 .strip .ph { position: relative; flex: 1; border-radius: 18px; }

/* ==========================================================================
   S3 · own the charge (full-bleed photo)
   ========================================================================== */
.s3 .bg { position: absolute; inset: 0; }
.s3 .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s3 .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,28,39,.82) 0%, rgba(15,28,39,.55) 52%, rgba(15,28,39,.12) 100%); }
.s3 .logo { position: absolute; left: 96px; top: 98px; height: 54px; }
.s3 .logo img { height: 54px; display: block; }
.s3 .title { position: absolute; left: 96px; top: 410px; font-size: 140px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; color: #fff; }
.s3 .sub { position: absolute; left: 96px; top: 620px; width: 960px; font-size: 52px; line-height: 1.2; letter-spacing: -0.015em; color: #D5E0E8; }
.s3 .by { position: absolute; left: 96px; top: 940px; font-size: 24px; line-height: 1.4; color: var(--text2d); }
.s3 .ringmotif { left: 1160px; top: 300px; width: 700px; height: 700px; }
.s3 .ringmotif .arc { stroke-width: 4; } .s3 .ringmotif .dot { opacity: .95; }

/* ==========================================================================
   S4 · my story
   ========================================================================== */
.s4 .card { position: absolute; left: 96px; top: 110px; width: 640px; height: 860px; border-radius: 24px; background: var(--navy); overflow: hidden; }
.s4 .card img { position: absolute; left: -20px; bottom: 0; width: 680px; height: auto; display: block; }
.s4 .card .ringmotif { left: 70px; top: 130px; width: 500px; height: 500px; }
.s4 .card .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(42,69,88,0), rgba(42,69,88,.95) 70%); }
.s4 .card .nm { position: absolute; left: 36px; bottom: 32px; color: #fff; font-size: 24px; line-height: 1.3; }
.s4 .card .nm b { display: block; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
.s4 .q { position: absolute; left: 856px; top: 110px; width: 968px; font-size: 96px; line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; color: var(--navy); text-wrap: balance; }
.s4 .story { position: absolute; left: 856px; top: 470px; width: 900px; font-size: 40px; line-height: 1.35; color: var(--text2); text-wrap: balance; }
.s4 .rail { position: absolute; left: 878px; top: 798px; width: 936px; height: 4px; background: var(--hair); border-radius: 2px; }
.s4 .railfill { position: absolute; left: 878px; top: 798px; height: 4px; background: var(--green-bar); border-radius: 2px; }
.s4 .node { position: absolute; top: 785px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 4px var(--green-bar); }
.s4 .node.now { width: 44px; height: 44px; margin-left: -22px; top: 778px; background: var(--green); box-shadow: none; }
.s4 .tl { position: absolute; top: 846px; width: 240px; font-size: 24px; line-height: 1.35; color: var(--text2); }
.s4 .tl b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 4px; }

/* ==========================================================================
   S5 · what 300 installs taught us (dark)
   ========================================================================== */
.s5 .mos { position: absolute; left: 96px; top: 190px; width: 1728px; height: 450px; display: flex; gap: 16px; }
.s5 .mos .ph { position: relative; flex: 1; border-radius: 18px; background: var(--hairD); }
.s5 .lesson { position: absolute; top: 700px; width: 528px; padding-top: 28px; border-top: 1px solid var(--hairD); }
.s5 .lesson .ic { width: 64px; height: 64px; color: var(--green); }
.s5 .lesson h3 { margin-top: 28px; font-size: 52px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.s5 .lesson p { margin-top: 14px; font-size: 32px; line-height: 1.35; color: var(--text2d); text-wrap: balance; }

/* ==========================================================================
   S6 · the old models   S7 · closed to outsiders
   ========================================================================== */
.shell { position: absolute; border-radius: 24px; background: var(--surface); }
.s6 .h1 { max-width: 1500px; }
.s6 .illu { position: absolute; background: #E3EAEE; border-radius: 24px 24px 0 0; overflow: hidden; }
.s6 .illu > .ic { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 150px; height: 150px; color: var(--navy); stroke-width: 1.5; }
.s6 .illu > .ringmotif { left: 57px; top: -10px; width: 440px; height: 440px; }
.s6 .bdg { position: absolute; left: 352px; top: 44px; width: 92px; height: 92px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; }
.s6 .bdg .ic { width: 46px; height: 46px; }
.s6 .ct { position: absolute; width: 490px; }
.s6 .chip { position: absolute; left: 28px; top: 28px; height: 64px; padding: 0 22px; border-radius: 32px; background: #fff; display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 600; color: var(--text2); }
.s6 .chip img { display: block; width: auto; }
.s6 .ct h3 { margin-top: 0; font-size: 52px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); }
.s6 .ct p { margin-top: 14px; font-size: 28px; line-height: 1.35; color: var(--text2); }

.s7 .bn { position: absolute; top: 356px; width: 256px; height: 488px; }
.s7 .chain { position: absolute; left: 192px; top: 342px; width: 1408px; height: 4px; border-radius: 2px; background: var(--green-bar); }
.s7 .bn { position: absolute; top: 280px; width: 256px; height: 640px; }
.s7 .bn .chip { width: 128px; height: 128px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.s7 .bn .chip .ic { width: 64px; height: 64px; color: #fff; stroke-width: 1.75; }
.s7 .bn h3 { position: absolute; left: 0; top: 268px; width: 256px; font-size: 52px; line-height: 1.06; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); }
.s7 .bn p { position: absolute; left: 0; top: 432px; width: 256px; font-size: 30px; line-height: 1.3; color: var(--text2); }

/* ==========================================================================
   S8 · the solution (money flow)   S9 · business model
   ========================================================================== */
.circle-shell { position: absolute; border-radius: 50%; background: var(--navy); }
.s8 .actor { position: absolute; width: 400px; border-radius: 24px; background: var(--surface); padding: 36px; }
.s8 .actor .ic { width: 64px; height: 64px; color: var(--navy); }
.s8 .actor h3 { margin-top: 20px; font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); }
.s8 .actor p { margin-top: 10px; font-size: 26px; line-height: 1.3; color: var(--text2); }
.s8 svg.links { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.link { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s8 .fl { position: absolute; font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--navy); width: 290px; }
.s8 .fl span { display: block; font-weight: 400; color: var(--text2); font-size: 24px; }
.s8 .keep { position: absolute; left: 790px; top: 866px; width: 340px; text-align: center; font-size: 36px; font-weight: 700; color: var(--green-text); letter-spacing: -0.02em; }
.s8 .keep span { display: block; margin-top: 4px; font-size: 24px; font-weight: 400; color: var(--text2); letter-spacing: 0; }

.s9 .card { position: absolute; top: 250px; height: 500px; border-radius: 24px; background: var(--surface); overflow: hidden; }
.s9 .card .ph { left: 0; top: 0; right: 0; height: 220px; border-radius: 0; }
.s9 .card .body { position: absolute; left: 32px; right: 32px; top: 244px; }
.s9 .card .k { font-size: 24px; font-weight: 600; color: var(--text2); }
.s9 .card .big { margin-top: 10px; font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s9 .card .big small { font-size: .42em; margin-right: 10px; color: var(--text2); letter-spacing: -0.02em; }
.s9 .card .sm { margin-top: 12px; font-size: 26px; line-height: 1.3; color: var(--text2); }
.s9 .card.dark { background: var(--navy); }
.s9 .card.dark .k, .s9 .card.dark .sm { color: #C3D0D9; }
.s9 .card.dark .big { color: #fff; } .s9 .card.dark .big em { font-style: normal; color: var(--green); }
.s9 .bracket { position: absolute; top: 786px; height: 18px; border: 2px solid var(--navy); border-top: none; border-radius: 0 0 10px 10px; }
.s9 .bl { position: absolute; top: 818px; font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.s9 .foot { position: absolute; left: 96px; top: 950px; font-size: 40px; font-weight: 600; letter-spacing: -0.025em; color: var(--navy); }
.s9 .foot i { font-style: normal; color: var(--green-text); }

/* ==========================================================================
   S10 · investor returns
   ========================================================================== */
.s10 .rc { position: absolute; top: 216px; width: 554px; height: 780px; border-radius: 24px; background: var(--surface); overflow: hidden; }
.s10 .rc.hl { overflow: visible; outline: 5px solid var(--green); outline-offset: 5px; }
.s10 .rc .ph { position: absolute; overflow: hidden; }
.s10 .rc .in { position: absolute; left: 36px; right: 36px; top: 304px; }
.s10 .rc h3 { font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--navy); }
.s10 .rc .price { margin-top: 6px; font-size: 24px; color: var(--text2); }
.s10 .rc .main { margin-top: 14px; font-size: 128px; line-height: .95; font-weight: 700; letter-spacing: -0.05em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s10 .rc .cap { margin-top: 4px; font-size: 24px; color: var(--text2); }
.s10 .rc .row { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--hair); }
.s10 .rc .row b { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s10 .rc .row span { font-size: 24px; color: var(--text2); }

/* ==========================================================================
   S11 · why drivers choose Auton (dark)
   ========================================================================== */
.s11 .hero { position: absolute; right: 96px; top: 56px; display: flex; align-items: center; gap: 28px; }
.s11 .hero b { font-size: 132px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; }
.s11 .hero span { font-size: 32px; line-height: 1.2; color: var(--text2d); width: 300px; }
.s11 .pc { position: absolute; top: 250px; width: 554px; height: 560px; border-radius: 24px; background: var(--navy); overflow: hidden; }
.s11 .pc .ph { position: absolute; overflow: hidden; }
.s11 .pc .app { position: absolute; left: 0; top: 0; right: 0; height: 330px; background: radial-gradient(closest-side at 62% 78%, rgba(18,148,135,.42), rgba(18,148,135,0) 85%), #172C3B; overflow: hidden; }
.s11 .pc .app img { position: absolute; width: 190px; height: auto; display: block; }
.s11 .pc .app .cn { position: absolute; left: 28px; top: 24px; font-size: 24px; font-weight: 600; color: var(--text2d); }
.s11 .pc h3 { position: absolute; left: 32px; top: 350px; font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.s11 .pc p { position: absolute; left: 32px; right: 32px; top: 410px; font-size: 28px; line-height: 1.3; color: var(--text2d); }
.s11 svg.loop { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.s11 .lp { position: absolute; top: 884px; height: 72px; display: flex; align-items: center; gap: 16px; padding-right: 22px; background: var(--deep); font-size: 28px; font-weight: 600; color: #fff; z-index: 2; }
.s11 .lp i { width: 72px; height: 72px; border-radius: 50%; background: var(--deep); box-shadow: inset 0 0 0 3px var(--green); display: flex; align-items: center; justify-content: center; color: var(--green); }
.s11 .lp i .ic { width: 34px; height: 34px; }

/* ==========================================================================
   S12 · market
   ========================================================================== */
.s12 .hc { position: absolute; left: 96px; top: 232px; width: 896px; height: 570px; border-radius: 24px; background: var(--surface); }
.s12 .hero { position: absolute; left: 48px; top: 20px; font-size: 190px; line-height: .95; font-weight: 700; letter-spacing: -0.05em; color: var(--navy); white-space: nowrap; }
.s12 .hero small { font-size: .42em; margin-right: 14px; color: var(--text2); letter-spacing: -0.03em; }
.s12 .cap1 { position: absolute; left: 48px; top: 222px; width: 800px; font-size: 34px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }
.s12 .cap1 span { display: block; font-size: 26px; font-weight: 400; color: var(--text2); letter-spacing: 0; margin-top: 4px; }
.s12 .hbar { position: absolute; left: 48px; right: 48px; height: 48px; display: flex; align-items: center; }
.s12 .hbar .y { width: 92px; font-size: 26px; font-weight: 600; color: var(--text2); }
.s12 .hbar .b { display: block; height: 48px; border-radius: 8px; background: #B9C8D2; transform-origin: 0 50%; }
.s12 .hbar .b.last { background: var(--green-bar); }
.s12 .hbar .v { margin-left: 14px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.s12 .nc { position: absolute; top: 232px; width: 392px; height: 570px; border-radius: 24px; background: var(--navy); color: #fff; }
.s12 .nc .ic { position: absolute; left: 36px; top: 40px; width: 64px; height: 64px; color: var(--green); }
.s12 .nc b { position: absolute; left: 32px; top: 180px; font-size: 88px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s12 .nc span { position: absolute; left: 36px; right: 36px; top: 300px; font-size: 30px; line-height: 1.3; color: #D3DEE5; }
.s12 .nc i { position: absolute; left: 36px; bottom: 30px; font-style: normal; font-size: 24px; color: var(--text2d); }
.s12 .reach { position: absolute; left: 96px; top: 832px; width: 1728px; font-size: 32px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.s12 .reach span { color: var(--text2); font-weight: 400; }
.s12 .proof { position: absolute; left: 96px; top: 888px; width: 1728px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 28px; line-height: 1.4; color: var(--text2); }
.s12 .proof b { color: var(--navy); font-weight: 600; }
.s12 .fn { bottom: 22px; }

/* ==========================================================================
   S13 · competition 2x2 (logos)
   ========================================================================== */
.s13 .plot { position: absolute; left: 330px; top: 232px; width: 1260px; height: 700px; }
.s13 .axis { stroke: var(--navy); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s13 .ax { position: absolute; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.s13 .ax small { font-size: 24px; font-weight: 400; color: var(--text2); margin-left: 12px; letter-spacing: 0; }
.s13 .pt { position: absolute; translate: -50% -14px; text-align: center; }
.s13 .pt i { display: block; width: 28px; height: 28px; margin: 0 auto 14px; border-radius: 50%; background: #9FB1BE; }
.s13 .pt img { display: block; margin: 0 auto; }
.s13 .pt span { display: block; margin-top: 10px; font-size: 24px; line-height: 1.25; color: var(--text2); }
.s13 .pt.us { translate: -50% -28px; }
.s13 .pt .nm { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; font-size: 28px; font-weight: 600; color: var(--navy); }
.s13 .pt .nm .ic { width: 26px; height: 26px; }
.s13 .pt.us i { width: 56px; height: 56px; background: var(--green); box-shadow: 0 0 0 14px rgba(1,183,92,.18); margin-bottom: 22px; }

/* ==========================================================================
   S14 · traction (dark)
   ========================================================================== */
.s14 .stats { position: absolute; left: 96px; top: 64px; width: 1728px; display: flex; justify-content: space-between; align-items: flex-start; }
.s14 .st { padding-top: 16px; border-top: 1px solid var(--hairD); }
.s14 .st b { display: block; font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s14 .st b small { font-size: .45em; margin-right: 4px; letter-spacing: -0.02em; }
.s14 .st b .arr { display: inline-block; width: .62em; height: .4em; margin: 0 .16em; vertical-align: .02em; color: var(--green); }
.s14 .st b.gr { color: var(--green); }
.s14 .st > span { display: block; margin-top: 10px; font-size: 24px; line-height: 1.3; color: var(--text2d); }
.s14 .strip { position: absolute; left: 96px; top: 240px; width: 1728px; height: 270px; display: flex; gap: 16px; }
.s14 .strip .ph { position: relative; flex: 1; border-radius: 18px; background: var(--hairD); }
.s14 .wl { position: absolute; top: 548px; font-size: 24px; font-weight: 600; color: var(--text2d); }
.s14 .wall { position: absolute; left: 96px; top: 592px; width: 1134px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; row-gap: 14px; }
.s14 .lg { display: flex; align-items: center; justify-content: center; }
.s14 .wall .lg { width: 126px; height: 76px; }
.s14 .lg img { max-width: 100px; max-height: 54px; width: auto; height: auto; display: block; }
.s14 .hosts { position: absolute; left: 1326px; top: 592px; width: 498px; }
.s14 .hosts .lg { height: 80px; width: 100%; border-top: 1px solid var(--hairD); }
.s14 .hosts .lg:first-child { border-top: none; }
.s14 .hosts .lg img { max-width: 220px; max-height: 68px; }
.s14 .hostnote { position: absolute; left: 1326px; top: 846px; width: 498px; padding-top: 16px; border-top: 1px solid var(--hairD); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.s14 .funded { position: absolute; left: 96px; top: 900px; font-size: 32px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.s14 .samnan { display: none; position: absolute; left: 1326px; top: 922px; width: 498px; padding-top: 14px; border-top: 1px solid var(--hairD); }
body.show-samnan .s14 .samnan { display: block; }
.s14 .samnan b { display: block; font-size: 28px; font-weight: 600; color: #fff; letter-spacing: -0.015em; }
.s14 .samnan span { display: block; margin-top: 2px; font-size: 24px; color: var(--text2d); }
.s14 .precommit { position: absolute; left: 96px; top: 950px; font-size: 32px; font-weight: 400; letter-spacing: -0.015em; color: var(--text2d); }
.s14 .precommit b { color: var(--green); font-weight: 600; }
.s14 .funded span { color: var(--text2d); font-weight: 400; }

/* ==========================================================================
   S15 · team
   ========================================================================== */
.s15 .photo { position: absolute; left: 96px; top: 190px; width: 840px; height: 734px; border-radius: 24px; overflow: hidden; }
.s15 .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.s15 .cap { position: absolute; left: 96px; top: 944px; font-size: 24px; color: var(--text2); }
.s15 .p { position: absolute; width: 412px; height: 230px; border-radius: 24px; background: var(--surface); }
.s15 .p .pic { position: absolute; left: 24px; top: 24px; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: #E9EEF1; }
.s15 .p .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s15 .p .t { position: absolute; left: 148px; top: 26px; right: 16px; }
.s15 .p .t b { display: block; font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); }
.s15 .p .t em { display: block; margin-top: 8px; font-style: normal; font-size: 24px; font-weight: 600; color: var(--green-text); }
.s15 .p .l2 { position: absolute; left: 24px; right: 20px; top: 150px; font-size: 24px; line-height: 1.25; color: var(--text2); }
.s15 .p.wide { width: 848px; }
.s15 .p.wide .pic { width: 168px; height: 168px; left: 28px; top: 31px; }
.s15 .p.wide .t { left: 224px; top: 40px; right: 28px; }
.s15 .p.wide .t b { font-size: 44px; letter-spacing: -0.03em; }
.s15 .p.wide .t em { margin-top: 10px; font-size: 28px; }
.s15 .p.wide .l2 { left: 224px; right: 28px; top: 146px; font-size: 28px; line-height: 1.3; }

/* ==========================================================================
   S16 · financials   S17 · growth + use of funds
   ========================================================================== */
.s16 .rowlab { position: absolute; left: 96px; width: 250px; font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--text2); }
.s16 .base { position: absolute; left: 96px; width: 1728px; height: 1px; background: var(--hair); }
.s16 .bar { position: absolute; border-radius: 12px 12px 0 0; background: var(--navy); overflow: hidden; }
.s16 .bar .net { position: absolute; left: 0; right: 0; top: 0; background: var(--green-bar); }
.s16 .bar.exp { background: #8CA0AE; }
.s16 .val { position: absolute; width: 260px; margin-left: -130px; text-align: center; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s16 .val small { font-size: 24px; font-weight: 600; color: var(--text2); letter-spacing: 0; }
.s16 .netl { position: absolute; width: 220px; margin-left: -110px; text-align: center; color: var(--deep); font-size: 24px; font-weight: 600; line-height: 1.15; }
.s16 .ch { position: absolute; width: 200px; margin-left: -100px; text-align: center; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s16 .eb { position: absolute; top: 842px; width: 220px; margin-left: -110px; text-align: center; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--text2); font-variant-numeric: tabular-nums; }
.s16 .eb.pos { color: var(--green-text); }
.s16 .yr { position: absolute; top: 918px; width: 220px; margin-left: -110px; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.s16 .lgd { position: absolute; left: 1640px; top: 420px; width: 190px; font-size: 24px; line-height: 1.3; color: var(--text2); }
.s16 .lgd div { display: flex; gap: 12px; margin-bottom: 22px; align-items: flex-start; }
.s16 .lgd i { flex: none; width: 18px; height: 18px; border-radius: 4px; margin-top: 5px; }
.s16 svg.line { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }

.s17 .pil { position: absolute; border-radius: 14px 14px 0 0; background: var(--navy); }
.s17 .pil.last { background: var(--green-bar); }
.s17 .pn { position: absolute; text-align: center; color: #fff; font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.s17 .pn.dk { color: var(--deep); }
.s17 .pn small { display: block; margin-top: 0; font-size: 24px; line-height: 1.1; font-weight: 500; letter-spacing: 0; }
.s17 .ml { position: absolute; width: 270px; }
.s17 .photo17 { position: absolute; left: 96px; top: 190px; width: 520px; height: 340px; }
.s17 .ml b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--navy); }
.s17 .ml span { display: block; margin-top: 8px; font-size: 24px; line-height: 1.3; color: var(--text2); }
.s17 .base { position: absolute; left: 96px; top: 906px; width: 840px; height: 1px; background: var(--hair); }
.s17 .big { position: absolute; left: 1000px; top: 206px; font-size: 230px; line-height: .92; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s17 .big small { font-size: .42em; margin-right: 12px; letter-spacing: -0.03em; }
.s17 .askcap { position: absolute; left: 1004px; top: 436px; font-size: 28px; color: var(--text2); }
.s17 .fund { position: absolute; left: 1000px; top: 490px; width: 824px; height: 48px; display: flex; gap: 3px; }
.s17 .fund i { display: block; height: 100%; border-radius: 6px; transform-origin: 0 50%; }
.s17 .fund i:first-child { border-radius: 12px 6px 6px 12px; } .s17 .fund i:last-child { border-radius: 6px 12px 12px 6px; }
.s17 .leg { position: absolute; left: 1000px; top: 568px; width: 824px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 18px; row-gap: 26px; }
.s17 .leg div { font-size: 24px; line-height: 1.25; color: var(--text2); }
.s17 .leg b { display: flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; margin-bottom: 4px; white-space: nowrap; }
.s17 .leg b i { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.s17 .revolve { position: absolute; left: 1000px; top: 860px; width: 824px; font-size: 28px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.s17 .revolve i { font-style: normal; color: var(--green-text); }

/* ==========================================================================
   S18 · two ways to own the charge
   ========================================================================== */
.s18 .card { position: absolute; top: 236px; width: 840px; height: 760px; border-radius: 24px; background: var(--surface); overflow: hidden; }
.s18 .card .ph { left: 0; top: 0; right: 0; height: 236px; border-radius: 0; }
.s18 .card h2 { position: absolute; left: 48px; top: 262px; font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; color: var(--navy); }
.s18 .card p { position: absolute; left: 48px; top: 340px; width: 390px; font-size: 30px; line-height: 1.35; color: var(--text2); }
.s18 .btn { position: absolute; left: 48px; bottom: 48px; height: 72px; padding: 0 30px; border-radius: 36px; background: var(--green-bar); color: var(--deep); font-size: 28px; font-weight: 600; display: flex; align-items: center; }
.s18 .qr { position: absolute; right: 48px; bottom: 48px; width: 340px; background: #fff; border-radius: 24px; padding: 24px 24px 18px; text-align: center; }
.s18 .qr svg { width: 292px; height: 292px; display: block; margin: 0 auto; shape-rendering: crispEdges; }
.s18 .qr span { display: block; margin-top: 10px; font-size: 24px; font-weight: 600; color: var(--navy); }
.s18 .big { position: absolute; left: 48px; top: 344px; font-size: 150px; line-height: .92; font-weight: 700; letter-spacing: -0.055em; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s18 .big small { font-size: .42em; margin-right: 10px; color: var(--text2); letter-spacing: -0.03em; }
.s18 .big em { font-style: normal; font-size: .2em; margin-left: 16px; color: var(--text2); letter-spacing: 0; font-weight: 600; }
.s18 .contact { position: absolute; left: 48px; bottom: 48px; font-size: 30px; line-height: 1.4; color: var(--navy); }
.s18 .contact b { font-weight: 600; display: block; } .s18 .contact span { color: var(--text2); display: block; }
.s18 .invp { position: absolute; left: 48px; top: 508px; width: 700px; font-size: 32px; line-height: 1.35; color: var(--text2); }
.s18 .qrfn { position: absolute; left: 96px; bottom: 30px; font-size: 12px; color: var(--text3); }

/* ==========================================================================
   S19 · everything Auton is (bento)
   ========================================================================== */
.s19 { --slide-bg: #EEF2F4; background: #EEF2F4; }
.s19 .bento { position: absolute; left: 18px; top: 18px; width: 1884px; height: 1022px; display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "hero hero cust chg dc dc" "hero hero store store dc dc" "inst inst prod net app app" "mfg jd own own qr qr"; }
.s19 .t { position: relative; border-radius: 34px; background: #fff; overflow: hidden; padding: 24px 26px; }
.s19 .t img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s19 .t .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,28,39,0) 34%, rgba(15,28,39,.78) 100%); }
.s19 .t .big { position: absolute; left: 28px; top: 26px; font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s19 .t .big.gr { color: var(--green-text); }
.s19 .t .cap { position: absolute; left: 28px; right: 24px; bottom: 24px; font-size: 24px; line-height: 1.2; color: var(--text2); font-weight: 500; }
.s19 .t .nm { position: absolute; left: 28px; right: 24px; bottom: 24px; font-size: 32px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; color: var(--navy); }
.s19 .t .nm small { display: block; margin-top: 6px; font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: 0; color: var(--text2); }
.s19 .t.ph .nm, .s19 .t.ph .nm small { color: #fff; }
.s19 .t .ic { position: absolute; left: 28px; top: 28px; font-size: 56px; color: var(--navy); }
.s19 .t.gradt { background: var(--grad); }
.s19 .t.gradt .nm, .s19 .t.gradt .nm small, .s19 .t.gradt .cap, .s19 .t.gradt .big, .s19 .t.gradt .ic { color: var(--deep); }
.s19 .t.navyt { background: var(--navy); }
.s19 .t.navyt .nm, .s19 .t.navyt .big { color: #fff; } .s19 .t.navyt .nm small, .s19 .t.navyt .cap { color: #C3D0D9; } .s19 .t.navyt .ic { color: var(--green); }
.s19 .hero { grid-area: hero; } .s19 .hero .nm { font-size: 48px; left: 34px; bottom: 30px; }
.s19 .cust { grid-area: cust; } .s19 .chg { grid-area: chg; } .s19 .dc { grid-area: dc; } .s19 .store { grid-area: store; }
.s19 .inst { grid-area: inst; } .s19 .prod { grid-area: prod; } .s19 .net { grid-area: net; } .s19 .app { grid-area: app; }
.s19 .mfg { grid-area: mfg; } .s19 .jd { grid-area: jd; } .s19 .mena { grid-area: mena; } .s19 .own { grid-area: own; } .s19 .qr { grid-area: qr; }
.s19 .t .big2 { position: absolute; left: 28px; top: 28px; font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.s19 .app .phones { position: absolute; right: 30px; top: 44px; width: 260px; height: 300px; }
.s19 .app .phones img { position: absolute; width: 120px; height: auto; display: block; }
.s19 .app .phones img:nth-child(1) { right: 118px; top: 4px; } .s19 .app .phones img:nth-child(2) { right: 0; top: 40px; }
.s19 .app .nm { right: 300px; }
.s19 .own .nm { font-size: 48px; }
.s19 .own .nm small { font-size: 28px; margin-top: 8px; }
.s19 .own .ic { font-size: 72px; }
.s19 .qr { display: flex; align-items: center; gap: 20px; padding: 18px 22px; }
.s19 .qr .box { flex: none; width: 150px; height: 150px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--hair); padding: 10px; }
.s19 .qr .box svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.s19 .qr .tx { font-size: 24px; line-height: 1.3; color: var(--text2); }
.s19 .qr .tx b { display: block; font-size: 28px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; }
.s19 .legal { position: absolute; left: 36px; bottom: 10px; font-size: 12px; color: var(--text3); }
.slide.play.s19 .t { animation: tileIn .8s var(--ease) both; animation-delay: calc(var(--d, 0) * var(--k) * 1ms); }
@keyframes tileIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Reduced motion, embed + print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .slide.play *, .slide.play { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
  .slide { transition-duration: .2s !important; }
}
body.static *, body.static *::before, body.static *::after { animation: none !important; transition: none !important; }
body.embed .progress, body.embed .blackout { display: none; }

@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { width: 1920px; height: auto; overflow: visible; background: #fff; }
  .deck-viewport { position: static; overflow: visible; background: #fff; }
  .deck-stage { position: static; width: auto; height: auto; transform: none !important; background: none; overflow: visible; }
  .slide { position: relative; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: 1920px; height: 1080px; break-after: page; page-break-after: always; transition: none !important; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide *, .slide { animation: none !important; transition: none !important; }
  .progress, .blackout, .deck-controls { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}