/* Slides are a fixed 1280 x 720 canvas, scaled with CSS transforms. They always render in the
   InnoQuest design system v2 light palette, whatever theme the app chrome is in.
   --red (#FF0F0F) only for big numbers, big fills and display type; --accent (red-ink #D10000) for small red text. */
:root{--font:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--display:'Chakra Petch','IBM Plex Sans Thai',system-ui,sans-serif;--mono:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.slide{--ink:#000000;--ink-2:#33332E;--ink-3:#62625B;--accent:#D10000;--accent-b:#FF0F0F;--red:#FF0F0F;--dark:#262622;--sand:#E5E5E0;--sand-d:#DADAD3;--tile:#F6F6F3;--paper:#FBFBF9;
  width:1280px;height:720px;position:relative;overflow:hidden;background:var(--paper);color:var(--ink-2);
  font-family:var(--font);font-size:24px;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.slide *{box-sizing:border-box}
.slide :where(h2,.disp){font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.02;margin:0;color:var(--ink)}
.slide .ghost{color:#8A8A82;border-bottom:3px dashed #C4C4BC;font-weight:inherit}
.slide .inv .ghost{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.5)}
.slide ul{list-style:none;margin:0;padding:0}
.slide .pre{white-space:pre-line}
.sl-foot{position:absolute;left:64px;right:64px;bottom:26px;display:flex;justify-content:space-between;font:500 14px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.sl-foot.narrow{right:464px}

/* 1 hook */
.s1-main{position:absolute;left:64px;top:56px;width:728px;bottom:70px;display:flex;flex-direction:column}
.s1-head{margin:0 0 32px;font-size:62px;max-height:216px;overflow:hidden}
.s1-head.md{font-size:52px}.s1-head.sm{font-size:44px}
.s1-pas{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.s1-pas h3{font-weight:600;font-size:16px;color:var(--accent);margin:0 0 8px}
.s1-pas p{margin:0;font-size:21px;line-height:1.4;color:var(--ink-2)}
.s1-solve{margin:auto 0 0;padding-top:16px;border-top:2px solid var(--ink);font:700 26px/1.25 var(--font);color:var(--ink)}
.s1-side{position:absolute;right:0;top:0;bottom:0;width:400px;background:var(--accent);color:#fff;padding:56px 44px;display:flex;flex-direction:column;gap:32px}
.s1-side h3{font-weight:600;font-size:16px;color:#fff;margin:0 0 -12px}
.s1-pair .emo{font:700 50px/1 var(--font);color:#fff}
.s1-pair .log{margin-top:8px;font-size:20px;line-height:1.4;color:#fff}

/* 2 solution */
.s2-st{position:absolute;left:64px;right:64px;top:60px;margin:0;font:700 38px/1.25 var(--font);color:var(--ink)}
.s2-st.sm{font-size:32px}
.s2-st .tpl{font-weight:500;color:var(--ink-2)}
.s2-st .f{color:var(--accent)}
.s2-cols{position:absolute;left:64px;right:64px;bottom:68px;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:48px;border-top:2px solid var(--ink);padding-top:24px}
.s2-cols h3{font-weight:600;font-size:16px;margin:0 0 8px;color:var(--ink)}
.s2-job{font-size:21px;line-height:1.45;margin:0}
.s2-cols li{position:relative;padding-left:24px;font-size:21px;line-height:1.35;margin-bottom:8px}
.s2-cols li::before{position:absolute;left:0;top:0;font:700 22px/1.25 var(--font)}
.s2-pains li::before{content:"\2212";color:#B00000}
.s2-gains li::before{content:"+";color:#103C25}

/* 3 market */
.s3-circ{position:absolute;left:64px;bottom:68px;width:520px;height:520px}
.s3-circ div{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50%;display:flex;justify-content:center;padding-top:16px;font:600 17px var(--font)}
.s3-tam{width:520px;height:520px;background:var(--sand);box-shadow:inset 0 0 0 2px var(--sand-d);color:var(--ink-2)}
.s3-sam{width:350px;height:350px;background:var(--red);color:var(--ink)}
.s3-som{width:184px;height:184px;background:var(--dark);color:#fff}
.s3-r{position:absolute;left:660px;right:64px;top:60px;bottom:68px;display:flex;flex-direction:column}
.s3-head{margin:0 0 24px;font-size:38px;line-height:1.1}
.s3-row{display:grid;grid-template-columns:22px 1fr;gap:16px;padding:16px 0 12px;border-top:1px solid var(--sand-d)}
.s3-row i{width:22px;height:22px;border-radius:50%;margin-top:12px}
.s3-val{font:700 54px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.s3-name{font:600 17px var(--font);color:var(--ink);margin-top:4px}
.s3-how{font-size:18px;color:var(--ink-2);line-height:1.4}
.s3-src{margin-top:auto;font-size:16px;color:var(--ink-3)}

/* 4 model */
.s4-l{position:absolute;left:64px;top:56px;width:716px}
.s4-chip{display:inline-block;background:var(--dark);color:#fff;font:600 18px var(--font);padding:4px 16px;border-radius:999px}
.s4-hero{margin:24px 0 0;font-size:124px;line-height:.92;color:var(--red);letter-spacing:-.02em}
.s4-sub{font:600 24px var(--font);margin:8px 0 0;color:var(--ink)}
.s4-calc{position:absolute;left:64px;top:360px;width:716px;display:flex;align-items:stretch;gap:8px}
.s4-calc .op{align-self:center;font:500 30px var(--font);color:var(--ink-3)}
.s4-box{flex:1;border:1px solid var(--sand-d);background:#fff;border-radius:16px;padding:12px 16px;min-width:0}
.s4-box b{display:block;font:700 30px/1.1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.s4-box span{font:500 14px var(--font);color:var(--ink-2)}
.s4-box.res{background:var(--accent);border-color:var(--accent);color:#fff;flex:1.25}
.s4-box.res b{color:#fff}
.s4-box.res span{color:#fff}
.s4-why{position:absolute;left:64px;bottom:68px;width:716px}
.s4-why h3{font-weight:600;font-size:16px;margin:0 0 8px;color:var(--accent)}
.s4-why p{margin:0;font-size:21px;line-height:1.4}
.s4-r{position:absolute;left:830px;right:64px;top:56px;bottom:68px;background:var(--tile);border:1px solid var(--sand-d);border-radius:16px;padding:32px}
.s4-r h3{font-weight:600;font-size:16px;margin:0 0 16px;color:var(--ink)}
.s4-r li{font-size:22px;line-height:1.3;padding:16px 0;border-top:1px solid var(--sand-d);color:var(--ink-2)}

/* 5 ask */
.s5-top{position:absolute;left:64px;right:64px;top:56px;display:flex;align-items:flex-end;gap:48px}
.s5-lab{font:600 20px var(--font);color:var(--ink-2);margin:0 0 8px}
.s5-amt{font-size:128px;line-height:.9;color:var(--red);letter-spacing:-.02em}
.s5-run{font-size:25px;line-height:1.35;max-width:430px;margin:0 0 12px}
.s5-bar{position:absolute;left:64px;right:64px;top:272px;height:56px;display:flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.s5-bar>div{height:100%;min-width:0}
.s5-bar .rest{background:repeating-linear-gradient(45deg,#fff 0 6px,var(--sand) 6px 12px)}
.s5-leg{position:absolute;left:64px;right:64px;top:346px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.s5-leg>div{min-width:0}
.s5-leg i{display:block;width:100%;height:6px;border-radius:3px;margin-bottom:8px}
.s5-leg .l{font:600 17px/1.3 var(--font);color:var(--ink)}
.s5-leg .p{font:500 15px var(--font);font-variant-numeric:tabular-nums;color:var(--ink-2);margin-top:2px}
.s5-road{position:absolute;left:64px;right:64px;bottom:68px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:2px solid var(--ink)}
.s5-road>div{position:relative;padding-top:24px}
.s5-road>div::before{content:"";position:absolute;left:0;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:5px solid var(--red)}
.s5-road .w{font:700 22px var(--font);color:var(--accent)}
.s5-road .t{font-size:21px;line-height:1.35;margin-top:4px}