/* Breadslice investor deck, draft 3 (2026-10-30): poster style.
   Big Shoulders Display, condensed and set big and tight, over solid fields of the brand's colours:
   maroon, toast orange, black and cream. Lato (the brand's face) for reading. Photos sit in the
   bread-slice silhouette from the logo. No mono labels, no italics, no rules for decoration. */
:root {
	--cream: #f3e9da; --cream-2: #e9dcc8; --maroon: #8a2433; --maroon-d: #6d1a27; --orange: #ea8a2e; --black: #18100e; --ink: #241714;
	--disp: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --sans: 'Lato', system-ui, sans-serif;
	--px: 130px; --py: 120px;
	--slice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M50 4C30 2 13 8 8 23 3 37 9 47 15 51V99c0 5 4 8 8 8h54c4 0 8-3 8-8V51c6-4 12-14 7-28C87 8 70 2 50 4Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0807; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; }
#deck { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }
.s { position: absolute; inset: 0; padding: var(--py) var(--px); display: none; overflow: hidden; background: var(--cream); }
.s.on { display: block; }
.s.f-maroon { background: var(--maroon); color: var(--cream); }
.s.f-orange { background: var(--orange); color: var(--black); }
.s.f-black { background: var(--black); color: var(--cream); }

h1, h2, h3 { font-family: var(--disp); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; margin: 0; }
h1 { font-size: 150px; line-height: 0.86; }
h2 { font-size: 124px; line-height: 0.87; }
h3 { font-size: 62px; line-height: 0.9; }
mark { background: none; color: var(--maroon); }
.f-maroon mark, .f-black mark { color: var(--orange); }
.f-orange mark { color: var(--cream); }
p { font-size: 30px; line-height: 1.42; margin: 0 0 22px; max-width: 860px; }
cite { font-style: normal; font-size: 18px; font-weight: 700; display: block; opacity: 0.6; }
.mono, .mono-h, .mono-cite { font-family: var(--sans); }
.mono-h { font-family: var(--disp); font-weight: 800; font-size: 34px; text-transform: uppercase; margin: 0 0 16px; letter-spacing: 0.01em; }
.acc { color: var(--maroon); }
.src { position: absolute; left: var(--px); bottom: 104px; font-size: 16px; opacity: 0.6; margin: 0; max-width: 1500px; }
figure { margin: 0; }

/* chrome: brand and page number */
#chrome { position: absolute; left: var(--px); right: var(--px); bottom: 46px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 10; color: var(--ink); }
#chrome.f-maroon, #chrome.f-black { color: var(--cream); }
#chrome.f-orange { color: var(--black); }
.ch-brand { display: flex; align-items: center; gap: 10px; font: 900 22px var(--sans); letter-spacing: -0.01em; }
.ch-brand img { width: 28px; height: 28px; }
.ch-no { font: 800 26px var(--disp); letter-spacing: 0.04em; }

/* slice-shaped photo frame, bleeding off the right */
.slicef { position: absolute; right: -60px; top: 70px; width: 860px; height: 1010px; -webkit-mask: var(--slice) center / 100% 100% no-repeat; mask: var(--slice) center / 100% 100% no-repeat; }
.slicef img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1 · the button */
.s-button h1 { max-width: 1660px; margin: 0 0 56px; font-size: 136px; }
.s-button h1 mark { white-space: nowrap; }
.hero { width: 1660px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 18px 18px 0 var(--maroon); }
.hero-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #f2eeeb; border-bottom: 1px solid #e8e1dc; }
.hero-bar i { width: 12px; height: 12px; border-radius: 50%; background: #dcd2cd; }
.hero-bar span { margin-left: 18px; font: 15px var(--sans); color: #8a7f7b; background: #fff; padding: 5px 18px; border-radius: 7px; }
.hero-nav { display: flex; align-items: center; gap: 36px; padding: 22px 54px; font: 18px var(--sans); color: #5d6675; }
.hero-nav b { display: flex; align-items: center; gap: 10px; font-size: 22px; color: #152237; margin-right: auto; letter-spacing: -0.01em; }
/* Tallyroom's own logo: the tally mark in a navy-to-teal tile, as on the Tallyroom site */
.hero-logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #1e3a8a, #14b8a6); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.hero-logo::before { content: ''; width: 21px; height: 21px; background: #fff; -webkit-mask: url(./img/tallyroom-mark.png) center / contain no-repeat; mask: url(./img/tallyroom-mark.png) center / contain no-repeat; }
.hero-sign { border: 1px solid #d6dbe3; border-radius: 8px; padding: 7px 16px; }
.hero-body { position: relative; padding: 26px 54px 58px; }
.hero-eye { font-size: 17px; font-weight: 700; color: #0e7f7e; margin: 0 0 12px; }
.hero-h { font-weight: 900; font-size: 58px; line-height: 1.05; color: #152237; letter-spacing: -0.025em; margin: 0 0 14px; max-width: 980px; }
.hero-sub { font-size: 23px; color: #5d6675; max-width: 640px; margin: 0 0 32px; }
.hero-ctas { display: flex; gap: 14px; }
.cta { font-size: 20px; font-weight: 700; padding: 15px 28px; border-radius: 10px; }
.cta.ghost { border: 1.5px solid #c9d0da; color: #152237; }
.cta.paid { background: var(--maroon); color: #fff; }
.pencil { position: absolute; left: 478px; top: 170px; width: 220px; height: 84px; overflow: visible; }
.pencil path { fill: none; stroke: #464646; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pencil .p2 { stroke-width: 1.6; opacity: 0.45; }
.pnote { position: absolute; left: 700px; top: 168px; margin: 0; white-space: nowrap; font-family: 'Gochi Hand', cursive; font-size: 29px; line-height: 1.12; color: #3d3d3d; transform: rotate(-3deg); max-width: none; }

/* 2 · thesis */
.thesis-copy { position: relative; width: 1040px; }
.thesis-copy h1 { font-size: 96px; margin-bottom: 40px; }
.thesis-copy p { max-width: 820px; opacity: 0.85; }

/* 3 · evidence */
.s-evidence.on { display: grid; grid-template-columns: 720px 1fr; gap: 90px; align-items: center; }
.ev-nums > div + div { margin-top: 46px; }
.ev-nums b { display: block; font-family: var(--disp); font-weight: 900; font-size: 300px; line-height: 0.8; letter-spacing: -0.02em; }
.ev-nums span { display: block; font-size: 27px; font-weight: 700; margin: 14px 0 6px; line-height: 1.25; }
.ev-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; align-items: end; }
.grid-apps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; align-content: end; height: 640px; }
.grid-apps i { aspect-ratio: 1; border-radius: 6px; background: var(--maroon); }
.grid-apps i.old { background: var(--ink); }
.row-ppl { display: grid; grid-template-columns: repeat(26, 1fr); gap: 4px; margin-top: 20px; }
.row-ppl i { aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
.ev-key { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin: 0; max-width: none; }
.ev-key span { display: inline-block; width: 18px; height: 18px; margin-left: 22px; }
.ev-key span:first-child { margin-left: 0; }
.k-app { border-radius: 4px; background: var(--maroon); }
.k-ppl { border-radius: 50%; background: var(--orange); }

/* 4 · no-shows, on orange */
.s-promise.on { display: grid; grid-template-columns: 900px 1fr; gap: 100px; align-items: center; }
.big-n { font-family: var(--disp); font-weight: 900; font-size: 290px; line-height: 0.8; margin: 0 0 18px; white-space: nowrap; max-width: none; color: var(--black); }
.mono-cite { font-size: 20px; font-weight: 700; margin-bottom: 56px; opacity: 0.75; }
.s-promise h2 { font-size: 84px; margin-bottom: 26px; color: var(--maroon-d); }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cal i { height: 74px; border-radius: 10px; background: var(--black); position: relative; }
.cal i::after { content: ''; position: absolute; left: 14px; top: 18px; width: 46%; height: 9px; border-radius: 5px; background: var(--orange); box-shadow: 0 20px 0 -1px rgba(234, 138, 46, 0.45); }
.cal i.gone { background: none; border: 3px dashed var(--black); }
.cal i.gone::after { background: none; box-shadow: none; content: 'NO-SHOW'; font: 800 20px var(--disp); color: var(--black); width: auto; height: auto; top: 22px; letter-spacing: 0.04em; }
.cal-cap { font-size: 19px; font-weight: 700; margin: 22px 0 0; }

/* 5 · receipt */
.s-fake.on { display: grid; grid-template-columns: 1fr 640px; gap: 110px; align-items: center; }
.fake-copy h2 { margin-bottom: 40px; }
.fake-copy p { opacity: 0.8; max-width: 760px; }
.receipt { position: relative; background: #fffdf8; padding: 54px 56px 70px; font-family: 'Courier New', Courier, monospace; font-size: 22px; color: #2b2422; transform: rotate(2.5deg); box-shadow: 14px 14px 0 var(--orange);
	-webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 18px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 26px 18px repeat-x;
	mask: linear-gradient(#000 0 0) top / 100% calc(100% - 18px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 26px 18px repeat-x; }
.rc-h { font-family: inherit; font-size: 19px; font-weight: 700; letter-spacing: 0.12em; text-align: center; margin: 0 auto 36px; line-height: 1.6; max-width: none; }
.rc-h span { display: block; color: #9a8d89; letter-spacing: 0.06em; font-weight: 400; }
.rc-l { display: flex; align-items: flex-end; gap: 10px; padding: 9px 0; line-height: 1.35; }
.rc-l i { flex: 1; border-bottom: 2px dotted #c7bab5; margin-bottom: 7px; min-width: 20px; }
.rc-l b { font-weight: 400; white-space: nowrap; }
.rc-rule { border-top: 2px dashed #c7bab5; margin: 22px 0 14px; }
.rc-real { font-weight: 700; color: var(--maroon); }
.rc-real b { font-weight: 700; font-size: 32px; }
.rc-f { text-align: center; font-family: inherit; font-size: 18px; color: #9a8d89; margin: 34px auto 0; max-width: none; line-height: 1.5; }

/* 6 · product, on maroon */
.s-product.on { display: grid; grid-template-columns: 560px 1fr; gap: 80px; align-items: center; }
.prod-copy h2 { margin-bottom: 36px; }
.prod-copy p { opacity: 0.88; }
.annot { position: relative; }
.annot img { display: block; width: 100%; border-radius: 22px; box-shadow: 16px 16px 0 var(--black); }
.call { position: absolute; display: inline-flex; align-items: center; gap: 12px; font: 800 24px var(--disp); text-transform: uppercase; letter-spacing: 0.02em; color: var(--black); background: var(--orange); padding: 8px 16px 8px 8px; border-radius: 8px; white-space: nowrap; }
.call b { background: var(--black); color: var(--orange); border-radius: 5px; padding: 2px 8px; }

/* 7 · how it works */
.s-how h2 { margin-bottom: 70px; max-width: 1060px; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); width: 1090px; counter-reset: st; }
.track li { counter-increment: st; padding: 0 26px 0 0; position: relative; }
.track li::before { content: counter(st); display: block; font: 900 120px/0.8 var(--disp); color: var(--maroon); margin-bottom: 18px; }
.track li:nth-child(4)::before { color: var(--orange); }
.track time { display: block; font: 800 22px var(--disp); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; margin-bottom: 6px; }
.track b { display: block; font: 800 40px/0.95 var(--disp); text-transform: uppercase; margin-bottom: 12px; }
.track span { display: block; font-size: 20px; line-height: 1.42; opacity: 0.8; }
.how-chat { position: absolute; right: var(--px); top: 120px; width: 440px; border-radius: 22px; overflow: hidden; transform: rotate(3deg); box-shadow: 16px 16px 0 var(--maroon); }
.how-chat img { width: 100%; display: block; }

/* 8 · payouts */
.s-pay.on { display: flex; flex-direction: column; justify-content: center; }
.s-pay h2 { margin-bottom: 60px; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.ph { display: grid; grid-template-columns: 380px 1fr; gap: 50px; align-items: center; }
.ph figure { border-radius: 26px; overflow: hidden; transform: rotate(-2deg); box-shadow: 14px 14px 0 var(--maroon); }
.ph:nth-child(2) figure { transform: rotate(2deg); box-shadow: 14px 14px 0 var(--orange); }
.ph figure img { width: 100%; display: block; }
.ph h3 { margin-bottom: 16px; }
.ph p { font-size: 24px; opacity: 0.8; }

/* 9 · privacy, on black */
.blind-copy { position: relative; width: 1000px; }
.blind-copy h2 { margin-bottom: 48px; }
.blind-copy p { opacity: 0.8; max-width: 820px; }
.blind-copy .pull { font: 800 52px/0.95 var(--disp); text-transform: uppercase; color: var(--orange); opacity: 1; margin-top: 40px; }

/* 10 · competition */
.s-comp h2 { font-size: 96px; margin-bottom: 44px; max-width: 1660px; }
.comp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 20px; line-height: 1.33; }
.comp th, .comp td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 2px solid var(--cream-2); }
.comp thead th { font: 800 26px var(--disp); text-transform: uppercase; border-bottom: 4px solid var(--ink); }
.comp tbody th { font: 800 22px var(--disp); text-transform: uppercase; width: 180px; opacity: 0.7; }
.comp .us { background: var(--maroon); color: #fff; font-weight: 700; border-bottom-color: rgba(255, 255, 255, 0.15); }
.comp thead .us { color: var(--orange); border-radius: 14px 14px 0 0; border-bottom-color: var(--maroon); }
.comp tbody tr:last-child .us { border-radius: 0 0 14px 14px; }

/* 11 · why now, on maroon */
.s-now h2 { margin-bottom: 60px; }
.now-h, .now-r { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 60px; }
.now-h span { font: 800 28px var(--disp); text-transform: uppercase; padding-bottom: 12px; opacity: 0.6; }
.now-h span:last-child { color: var(--orange); opacity: 1; }
.now-r { padding: 24px 0; border-top: 2px solid rgba(243, 233, 218, 0.18); font-size: 26px; line-height: 1.4; }
.now-r b { font: 800 52px/0.9 var(--disp); text-transform: uppercase; }
.now-r span:nth-child(2) { opacity: 0.55; }

/* 12 · business model */
.s-money.on { display: grid; grid-template-columns: 1fr 720px; gap: 100px; align-items: center; }
.money-copy h2 { margin-bottom: 50px; font-size: 110px; }
.model { margin: 0; }
.model div { display: grid; grid-template-columns: 270px 1fr; gap: 30px; padding: 16px 0; align-items: center; }
.model dt { font: 900 84px/0.85 var(--disp); color: var(--maroon); text-transform: uppercase; }
.model dd { margin: 0; font-size: 24px; line-height: 1.38; }
.ticks { display: grid; grid-template-columns: repeat(21, 1fr); gap: 9px; }
.ticks i { height: 54px; border-radius: 3px; background: var(--ink); }
.ticks i.bs { background: var(--orange); }
.tick-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; }
.tick-sum span { display: block; font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.tick-sum b { font: 900 110px/0.85 var(--disp); }
.tick-sum .acc b { color: var(--orange); }
.tick-sum .acc span { color: var(--ink); }

/* 13 · where it goes, on black with the photo */
.bleed-full { position: absolute; inset: 0; }
.bleed-full img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bleed-full::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 16, 14, 0.96) 0%, rgba(24, 16, 14, 0.82) 40%, rgba(24, 16, 14, 0) 66%); }
.door-copy { position: relative; width: 980px; }
.door-copy h2 { margin-bottom: 28px; }
.door-copy > p { opacity: 0.8; margin-bottom: 30px; }
.door { list-style: none; margin: 0; padding: 0; }
.door li { padding: 12px 0; font-size: 22px; line-height: 1.35; opacity: 0.85; }
.door li b { display: block; font: 800 40px/0.95 var(--disp); text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }

/* 14 · team and ask, on orange */
.s-ask.on { display: grid; grid-template-columns: 1fr 1fr; gap: 140px; align-content: center; }
.ask-name { font: 900 120px/0.85 var(--disp); text-transform: uppercase; margin-bottom: 30px; }
.ask-name span { display: block; font: 700 22px var(--sans); text-transform: none; margin-top: 14px; }
.ask-meter { position: absolute; left: var(--px); right: var(--px); bottom: 120px; display: flex; justify-content: space-between; align-items: baseline; font: 800 56px/1 var(--disp); text-transform: uppercase; color: var(--black); max-width: none; margin: 0; }
.ask-meter b { color: var(--cream); }
.ask-meter .am-c { font: 700 20px var(--sans); text-transform: none; }
/* not written yet: striped so it can't go out unnoticed */
.tk { background: repeating-linear-gradient(135deg, #fbe6a8 0 12px, #f6d77d 12px 24px); outline: 2px dashed #8a6a10; padding: 3px 12px; border-radius: 4px; color: #4a3600; font: 700 0.72em var(--sans); }
.tk-big { font-size: 40px; display: inline-block; margin-bottom: 20px; }

/* ?all: every slide in a column, for review and printing */
body.all { overflow: auto; background: #241614; }
body.all #deck { position: static; transform: none !important; width: auto; height: auto; padding: 40px 0; overflow: visible; }
body.all .s { position: relative; display: block !important; width: 1920px; height: 1080px; margin: 0 auto 40px; zoom: var(--allzoom, 0.5); }
body.all .s-evidence, body.all .s-promise, body.all .s-fake, body.all .s-product, body.all .s-money, body.all .s-ask { display: grid !important; }
body.all .s-pay, body.all .s-lead, body.all .s-time, body.all .s-thanks, body.all .s-tss { display: flex !important; }
body.all .s-button2, body.all .s-link, body.all .s-priv { display: grid !important; }
body.all #chrome { display: none; }
@media print {
	@page { size: 1920px 1080px; margin: 0; }
	body, body.all { background: none; overflow: visible; }
	body.all .s { zoom: 1; margin: 0; page-break-after: always; }
}

/* 2 · the buyer's software budget, in the slice (2026-10-30). The slice's body runs from 15% to 85%
   of its width, so the sheet keeps inside that; the top lobes hold the sheet's title bar. */
.sheetf { top: 84px; right: 90px; width: 820px; height: 880px; background: #fff; }
.sheet { position: absolute; inset: 0; padding: 96px 15.5% 0 15.5%; font-family: Arial, Helvetica, sans-serif; color: #202124; }
.sh-top { display: flex; align-items: center; gap: 12px; font-size: 20px; padding: 0 4px 12px; }
.sh-ic { width: 22px; height: 28px; border-radius: 3px; background: #188038; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15); }
.sh-top b { font-weight: 400; }
.sh-who { margin-left: auto; font-size: 15px; color: #5f6368; }
.sh-fx { display: flex; gap: 14px; font-size: 15px; color: #3c4043; border-top: 1px solid #dadce0; border-bottom: 1px solid #dadce0; padding: 7px 8px; background: #fff; }
.sh-fx span { color: #80868b; font-style: italic; border-right: 1px solid #dadce0; padding-right: 12px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 14.5px; table-layout: fixed; }
.sheet th, .sheet td { border: 1px solid #e2e3e3; padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.sheet thead th { background: #f8f9fa; color: #5f6368; font-weight: 400; text-align: center; font-size: 13px; padding: 3px; }
.sheet .rn { width: 34px; background: #f8f9fa; color: #5f6368; text-align: center; font-size: 13px; }
.sheet th:nth-child(2) { width: 31%; } .sheet th:nth-child(3) { width: 15%; } .sheet th:nth-child(4) { width: 10.5%; } .sheet th:nth-child(5) { width: 14%; } .sheet th:nth-child(6) { width: 12%; }
.sheet .hd td { font-weight: 700; background: #e8f0fe; }
.sheet .hd .rn { font-weight: 400; background: #f8f9fa; }
.sheet .n { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .st { font-size: 13.5px; }
.sheet .st-review { color: #b06000; }
.sheet .st-cut { color: #c5221f; }
.sheet .st-new { color: #8a2433; font-weight: 700; }
.sheet .tot td { font-weight: 700; border-top: 2px solid #5f6368; }
.sheet .cap td { font-weight: 700; color: #c5221f; }
.sheet .cap .left { text-align: left; }
.sheet .rq td { background: #fce8e6; }
.sheet .rq .rn { background: #f8f9fa; }
.sheet .mut { color: #80868b; }

/* 2 · the sheet on an iPad (2026-10-30): a generated photo with its green screen keyed out, the
   real sheet behind it, so the finger sits on top. Screen box measured on the 1024 x 1536 photo. */
.ipadf { position: absolute; right: 70px; top: 0; height: 1080px; aspect-ratio: 2 / 3; }
.ipadf > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.ipad-screen { position: absolute; left: 16.3%; top: 11.2%; width: 66.4%; height: 62.6%; background: #fff; overflow: hidden; z-index: 1; border-radius: 10px; }
.ipadf .sheet { position: absolute; left: 0; top: 0; inset: auto; width: 600px; height: 860px; padding: 22px 14px 0; transform-origin: 0 0; transform: scale(var(--k, 0.795)); }
.ipadf .sheet table { font-size: 15.5px; }
.ipadf .sheet th, .ipadf .sheet td { padding: 7px 6px; }
.ipadf .sh-top { font-size: 22px; padding-top: 6px; }

/* 0 · the question: the real post, then our answer to it */
.s-tweet.on { display: grid; grid-template-columns: 900px 1fr; gap: 110px; align-items: center; }
.tweet { transform: rotate(-2.5deg); }
.tweet img { width: 100%; display: block; background: #fff; border-radius: 22px; padding: 26px 30px 16px; box-shadow: 16px 16px 0 var(--orange); }
.tweet figcaption { margin-top: 64px; font: 700 20px var(--sans); opacity: 0.6; transform: rotate(2.5deg); }
.s-tweet h1 { font-size: 150px; }
.s-tweet .the { color: var(--orange); }
.s-tweet .q1 { display: block; margin-bottom: 36px; }

/* title */
.s-title.on { display: flex; flex-direction: column; justify-content: center; }
.title-wm { width: 1500px; height: auto; display: block; margin: -40px 0 70px -6px; }
.title-tag { font: 800 110px/0.9 var(--disp); text-transform: uppercase; color: var(--orange); margin: 0 0 40px; max-width: none; }
.title-meta { font: 700 26px var(--sans); opacity: 0.7; margin: 0; }
#chrome.f-maroon .ch-brand { visibility: visible; }
/* tweet links and the note under it */
.tweet figcaption { font: 400 22px/1.45 var(--sans); opacity: 0.75; max-width: 820px; }
.tw-links { display: flex; gap: 14px; margin-bottom: 18px; }
.tw-links a { pointer-events: auto; font: 800 24px var(--disp); text-transform: uppercase; letter-spacing: 0.03em; color: var(--cream); text-decoration: none; border: 2px solid rgba(243, 233, 218, 0.45); border-radius: 999px; padding: 8px 18px; }
.tw-links a:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }

/* what a paid demo signals */
.s-signal.on { display: flex; flex-direction: column; justify-content: center; }
.sig-lead { font-size: 40px; line-height: 1.3; max-width: 1360px; margin-bottom: 56px; }
.sig-lead q { quotes: '\201C' '\201D'; color: var(--maroon); font-weight: 700; }
.sig { list-style: none; margin: 0; padding: 0; counter-reset: sg; }
.sig li { counter-increment: sg; display: grid; grid-template-columns: 110px 650px 1fr; gap: 30px; align-items: baseline; padding: 26px 0; border-top: 4px solid var(--ink); }
.sig li::before { content: counter(sg); font: 900 110px/0.8 var(--disp); color: var(--orange); }
.sig b { font: 800 80px/0.9 var(--disp); white-space: nowrap; text-transform: uppercase; color: var(--maroon); }
.sig span { font-size: 30px; line-height: 1.4; }
.sig-lead .hl { color: var(--maroon); }

/* powered flight: the photo bleeds off the left, the list of musts on the right */
.flight-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 900px; }
.flight-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 40%; display: block; filter: contrast(1.05); }
.flight-photo figcaption { position: absolute; left: 24px; top: 22px; font: 700 17px var(--sans); color: #fff; background: rgba(0, 0, 0, 0.55); padding: 6px 12px; border-radius: 6px; }
.flight-copy { margin-left: 820px; }
.flight-copy h2 { font-size: 84px; margin-bottom: 24px; }
.flight-copy > p { font-size: 28px; opacity: 0.85; max-width: 880px; margin-bottom: 26px; }
.musts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; max-width: 840px; }
.musts li { font: 800 28px/1 var(--disp); text-transform: uppercase; letter-spacing: 0.01em; padding: 10px 16px; border: 2px solid rgba(243, 233, 218, 0.35); border-radius: 10px; }
.musts li:nth-child(3n+1) { background: var(--orange); border-color: var(--orange); color: var(--black); }
.musts-more { font: 800 30px var(--disp) !important; text-transform: uppercase; opacity: 0.6 !important; margin-top: 22px; }
/* pencil notes over the iPad photo, in orange coloured pencil so they read on the sheet and the wood */
.ipad-notes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.ipad-notes path { fill: none; stroke: var(--orange); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.inote { position: absolute; z-index: 4; margin: 0; max-width: none; white-space: nowrap; font: 40px/1 'Gochi Hand', cursive; color: var(--orange); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.in-sw { left: 330px; top: 18px; transform: rotate(-3deg); }
.in-hand { left: 26px; top: 952px; transform: rotate(-3deg); }

/* how we tackle each one: a two-column reference table */
.s-tackle { padding-top: 96px; }
.s-tackle h2 { font-size: 88px; margin-bottom: 26px; }
.tackle { width: 100%; border-collapse: collapse; }
.tackle th, .tackle td { text-align: left; vertical-align: top; padding: 10px 0; border-top: 2px solid var(--cream-2); }
.tackle tr:first-child th, .tackle tr:first-child td { border-top: 4px solid var(--ink); }
.tackle th { width: 430px; padding-right: 30px; font: 800 33px/1 var(--disp); text-transform: uppercase; color: var(--maroon); }
.tackle td { font-size: 19.5px; line-height: 1.36; }
.tackle .tk { font-size: 15px; margin-left: 6px; }

/* why 2026: three stacked rows, title left, reason right */
.s-why26.on { display: flex; flex-direction: column; justify-content: center; }
.s-why26 h2 { font-size: 104px; margin-bottom: 56px; max-width: 1560px; }
.w26 > div { display: grid; grid-template-columns: 760px 1fr; gap: 60px; align-items: baseline; padding: 28px 0; border-top: 3px solid rgba(243, 233, 218, 0.25); }
.w26 b { font: 800 54px/0.92 var(--disp); text-transform: uppercase; color: var(--orange); }
.w26 p { font-size: 28px; line-height: 1.4; margin: 0; opacity: 0.9; }
.w26-logos { display: flex; align-items: center; gap: 26px; margin-top: 22px; }
.w26-logos img { height: 72px; width: auto; display: block; }

/* the moat: a slice, its moat, and six things the moat is made of */
.s-moat h2 { position: absolute; left: 0; right: 0; top: 96px; text-align: center; font-size: 120px; }
.moat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.moat .water { fill: none; stroke-linejoin: round; }
.moat .w1 { stroke: var(--orange); stroke-width: 9; }
.moat .w2 { stroke: rgba(234, 138, 46, 0.4); stroke-width: 5; }
.moat .ml { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.moat .md { fill: var(--ink); }
.mslice .ms-sh { fill: var(--ink); }
.mslice .ms-fill { fill: var(--maroon); }
.mslice .ms-crust { fill: none; stroke: var(--cream); stroke-width: 2.2; stroke-dasharray: 5 4; opacity: .55; }
.mc { position: absolute; width: 460px; }
.mc-tr, .mc-r, .mc-br { text-align: right; }
.mh { position: absolute; top: 222px; width: 460px; }
.mh-r { text-align: right; }
.mh b { display: block; font: 900 50px/0.9 var(--disp); text-transform: uppercase; color: var(--orange); }
.mh span { display: block; font: 700 19px var(--sans); margin-top: 6px; opacity: 0.75; }
.s-moat .mc b { font-size: 34px; }
.s-moat .mc span { font-size: 17.5px; line-height: 1.32; }
.mc b { display: block; font: 800 38px/0.95 var(--disp); text-transform: uppercase; color: var(--maroon); margin-bottom: 8px; }
.mc span { display: block; font-size: 20px; line-height: 1.38; }

/* fairness: the product's rate picker, live, against the alternatives */
.s-fair.on { display: grid; grid-template-columns: 840px 1fr; gap: 110px; align-items: center; padding-top: 100px; }
.fair-kick { font: 800 30px var(--disp); text-transform: uppercase; color: var(--orange); margin: 0 0 14px; letter-spacing: 0.02em; }
.fair-l h2 { font-size: 96px; margin-bottom: 22px; }
.fair-l > p { font-size: 26px; margin-bottom: 14px; }
.fair-stop { list-style: none; margin: 0 0 24px; padding: 0; font-size: 24px; }
.fair-stop li { padding: 3px 0; }
.fair-stop b { color: var(--maroon); }
.rate { background: #fff; border-radius: 20px; padding: 24px 28px; box-shadow: 12px 12px 0 var(--maroon); font-family: var(--sans); }
.rate-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; color: #6a5a57; }
.rate-top b { font: 900 46px var(--sans); color: var(--maroon); }
#rateR { width: 100%; margin: 12px 0 16px; accent-color: var(--maroon); pointer-events: auto; }
.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #f6f1ee; border-radius: 12px; }
.rate-grid div { padding: 10px 6px; text-align: center; border-left: 1px solid #e8dfdb; }
.rate-grid div:first-child { border-left: 0; }
.rate-grid span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #7d6965; }
.rate-grid b { font-size: 24px; color: var(--ink); }
.rate-or { font-size: 17px; font-weight: 700; margin: 16px 0 10px; }
.rate-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.rate-picks button { font: 700 18px var(--sans); border: 1.5px solid #e2d6d1; background: #fff; border-radius: 999px; padding: 8px 15px; cursor: pointer; color: var(--ink); }
.rate-picks button.on { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.alt { display: grid; grid-template-columns: 250px 1fr; column-gap: 26px; padding: 18px 0; border-top: 3px solid var(--cream-2); }
.alt b { grid-row: span 2; font: 800 40px/0.95 var(--disp); text-transform: uppercase; }
.alt .who { font-size: 19px; opacity: 0.65; margin-bottom: 4px; }
.alt .why { font-size: 22px; line-height: 1.38; }
.alt.us { border-top: 4px solid var(--maroon); }
.alt.us b { color: var(--maroon); }
.alt.us .why { font-weight: 700; color: var(--maroon); align-self: center; }
.fair-kick.fair-start { font-size: 56px; margin-bottom: 18px; }
.s-why26 h2 { font-size: 78px; margin-bottom: 40px; }
.s-why26 .h2-sub { opacity: 0.55; }
.s-why26 .w26 > div { padding: 22px 0; }

/* the logo set in the deck's display face (2026-10-30): the brand's slice glyph, coloured by the text it sits with */
.glyph { display: inline-block; background: currentColor; -webkit-mask: url(./img/glyph-ink.svg) center / contain no-repeat; mask: url(./img/glyph-ink.svg) center / contain no-repeat; }
.title-logo { display: flex; align-items: center; gap: 40px; margin: -30px 0 60px; color: var(--cream); }
.title-logo .glyph { width: 230px; height: 207px; }
.title-logo span { font: 900 290px/0.8 var(--disp); text-transform: uppercase; letter-spacing: -0.01em; }
.ch-brand { gap: 10px; font: 800 26px var(--disp) !important; text-transform: uppercase; letter-spacing: 0.02em; }
.ch-brand .glyph { width: 26px; height: 24px; }
/* a solid slice holds its own beside the heavy letters, where the thin outline glyph looked light */
.glyph { -webkit-mask: var(--slice) center / 100% 100% no-repeat; mask: var(--slice) center / 100% 100% no-repeat; }
.title-logo .glyph { width: 200px; height: 220px; }
.ch-brand .glyph { width: 22px; height: 24px; }
.w26 .w26-k { font: inherit; font-weight: 700; color: var(--orange); text-transform: none; }
.w26 .w26-2 { margin-top: 10px; }
.w26 > div > p { grid-column: 2; }
.w26 > div { align-items: start; }
.w26 > div > b { grid-row: span 2; }
.w26 .w26-2 { margin-top: 8px; }
.s-why26 .w26 > div { padding: 18px 0; }
.w26-logos { margin-top: 14px; }
.w26-logos img { height: 58px; }
.s-why26 h2 { margin-bottom: 30px; }
.w26 p { font-size: 25px; }
.w26 > div > b { grid-row: auto; }
.w26-txt p + p { margin-top: 10px; }

/* TAM */
.s-tam.on { display: grid; grid-template-columns: 700px 1fr; gap: 110px; align-items: center; }
.tam-k { font: 800 32px/1 var(--disp); text-transform: uppercase; color: var(--orange); margin-bottom: 52px; max-width: 640px; }
.tam-n { font: 900 270px/0.86 var(--disp); color: var(--maroon); margin: 0 0 26px; letter-spacing: -0.02em; max-width: none; }
.tam-calc { font-size: 22px; line-height: 1.5; margin-bottom: 30px; }
.tam-calc b { font-weight: 900; }
.tam-calc cite { display: inline; font-size: 16px; }
.tam-1 { font-size: 26px; line-height: 1.4; border-top: 4px solid var(--ink); padding-top: 20px; }
.tam-1 b { color: var(--maroon); }
.tam-r h2 { font-size: 80px; margin-bottom: 50px; }
.bar { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; margin-bottom: 34px; }
.bar span { grid-column: 1 / -1; font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.bar i { display: block; height: 56px; background: var(--ink); border-radius: 6px; min-width: 18px; }
.bar.us i { background: var(--orange); }
.bar b { font: 900 64px/1 var(--disp); }
.bar.us b { color: var(--maroon); }
.bar cite { grid-column: 1 / -1; margin-top: 8px; font-weight: 400; font-size: 17px; }

/* the wedge */
.s-wedge { padding-top: 110px; }
.s-wedge h2 { font-size: 104px; margin-bottom: 14px; }
.wedge-amb { font-size: 34px; margin-bottom: 30px; max-width: none; }
.wedge-amb b { color: var(--maroon); }
.wedge { position: relative; height: 560px; }
.wedge svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 400px; }
.wls { position: absolute; left: 0; right: 0; top: 410px; }
.wl { position: absolute; padding-right: 18px; }
.wl b { display: block; font: 800 30px/0.95 var(--disp); text-transform: uppercase; margin-bottom: 6px; }
.wl span { display: block; font-size: 18px; line-height: 1.35; opacity: 0.75; }
.wl em { position: absolute; top: -224px; left: 12px; font: 800 24px var(--disp); font-style: normal; text-transform: uppercase; color: var(--cream); }
.wedge-foot { position: absolute; left: var(--px); bottom: 100px; font-size: 22px; opacity: 0.7; margin: 0; max-width: none; }

/* rising CAC */
.s-cac.on { display: grid; grid-template-columns: 600px 1fr; gap: 90px; align-items: center; padding-top: 100px; }
.cac-k { font: 800 32px var(--disp); text-transform: uppercase; color: var(--orange); margin: 0 0 18px; }
.cac-n { font: 900 158px/0.82 var(--disp); color: var(--maroon); margin: 0 0 16px; letter-spacing: -0.02em; max-width: none; white-space: nowrap; }
.cac-sub { font-size: 25px; line-height: 1.38; margin-bottom: 30px; }
.cac-pair { display: flex; gap: 34px; align-items: flex-end; height: 300px; border-bottom: 4px solid var(--ink); }
.cac-pair div { position: relative; width: 140px; height: 100%; display: flex; flex-direction: column-reverse; }
.cac-pair i { display: block; width: 100%; background: var(--ink); }
.cac-pair div:last-child i:first-child { background: var(--maroon); }
.cac-pair i.rng { background: repeating-linear-gradient(135deg, var(--maroon) 0 8px, rgba(138, 36, 51, 0.35) 8px 16px); }
.cac-pair span { position: absolute; bottom: -40px; left: 0; font: 800 26px var(--disp); }
.cac-r h2 { font-size: 76px; margin-bottom: 30px; }
.cb { display: grid; grid-template-columns: 300px 1fr 170px; column-gap: 18px; align-items: center; padding: 7px 0; }
.cb span { font-size: 19px; font-weight: 700; }
.cb-track { display: flex; height: 28px; background: var(--cream-2); border-radius: 4px; overflow: hidden; }
.cb-solid { display: block; background: var(--ink); height: 100%; }
.cb-range { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--ink) 0 7px, rgba(36, 23, 20, 0.3) 7px 14px); }
.cb b { font: 800 28px var(--disp); text-align: right; }
.cb em { grid-column: 2 / -1; font-style: normal; font-size: 15px; font-weight: 700; color: var(--orange); margin-top: 2px; }
.cb-ref .cb-solid, .cb-ref .cb-range { background: var(--orange); }
.cac-pts { list-style: none; margin: 26px 0 0; padding: 0; }
.cac-pts li { font-size: 20px; line-height: 1.4; padding: 9px 0; border-top: 2px solid var(--cream-2); }
.cac-pts b { color: var(--maroon); }
.s-cac .src { bottom: 96px; }

/* prediction: human-to-human sales comes back */
.s-pred.on { display: grid; grid-template-columns: 1fr 760px; gap: 90px; align-items: center; }
.pred-k { font: 800 44px var(--disp); text-transform: uppercase; color: var(--cream); margin: 0 0 12px; }
.s-pred h2 { font-size: 100px; margin-bottom: 40px; color: var(--black); }
.pred-want { list-style: none; margin: 0; padding: 0; }
.pred-want li { font-size: 28px; line-height: 1.35; padding: 7px 0; color: var(--black); }
.pred-want li.last { font: 800 52px/1 var(--disp); text-transform: uppercase; color: var(--maroon-d); padding-top: 14px; }
.tweet-2 { transform: rotate(2.5deg); }
.tweet-2 img { box-shadow: 16px 16px 0 var(--black); }
.tweet .tw2-cap { margin-top: 56px; font-size: 20px; line-height: 1.45; color: var(--black); transform: rotate(-2.5deg); display: flex; align-items: center; gap: 16px; }
.tw2-cap a { pointer-events: auto; font: 800 22px var(--disp); text-transform: uppercase; letter-spacing: 0.03em; color: var(--black); text-decoration: none; border: 2px solid rgba(24, 16, 14, 0.5); border-radius: 999px; padding: 7px 16px; white-space: nowrap; }
.tw2-cap a:hover { background: var(--black); color: var(--orange); }
/* footnotes */
h1 sup.fn { font-size: 0.32em; vertical-align: top; position: relative; top: 0.15em; margin-left: 4px; color: var(--orange); }
.fnote { position: absolute; left: var(--px); bottom: 96px; font-size: 17px; opacity: 0.7; margin: 0; max-width: 1000px; z-index: 5; }
.fnote sup { color: var(--orange); font-weight: 700; margin-right: 4px; }
.s-fake.on { grid-template-columns: 1fr 720px; }
.rc-l span { white-space: nowrap; }
.receipt { font-size: 21px; }

/* the leadership: three portraits, each cut to the slice */
.s-lead.on { display: flex; flex-direction: column; justify-content: center; }
.s-lead h2 { margin-bottom: 70px; }
.leads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 90px; }
.lead { margin: 0; }
.lead-ph { position: relative; width: 340px; aspect-ratio: 100 / 110; background: var(--maroon); -webkit-mask: var(--slice) center / 100% 100% no-repeat; mask: var(--slice) center / 100% 100% no-repeat; }
.lead-ph::before { content: attr(data-in); position: absolute; inset: 0; display: grid; place-items: center; padding-top: 30px; font: 900 120px var(--disp); color: var(--cream); opacity: 0.5; }
.lead-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.lead figcaption { margin-top: 30px; }
.lead b { display: block; font: 900 64px/0.9 var(--disp); text-transform: uppercase; }
.lead span { display: block; font: 800 30px var(--disp); text-transform: uppercase; color: var(--maroon); margin-top: 10px; letter-spacing: 0.02em; }
.lead em { display: block; font: 400 21px/1.4 var(--sans); font-style: normal; margin-top: 10px; max-width: 460px; }

/* timeline: one rule across, a dot per milestone (filled done, hollow planned) and a Today marker */
.s-time.on { display: flex; flex-direction: column; justify-content: center; }
.s-time h2 { margin-bottom: 110px; }
.tline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; }
.tline::before { content: ''; position: absolute; left: 0; right: 0; top: 112px; height: 4px; background: linear-gradient(to right, var(--cream) 0 39%, rgba(243, 233, 218, 0.3) 39%); }
.tline li:nth-child(2)::after { content: 'Today'; position: absolute; left: calc(50% + 43px); top: 97px; transform: translateX(-50%); padding: 5px 13px 4px; border-radius: 999px; background: var(--orange); color: var(--black); font: 800 22px/1 var(--disp); text-transform: uppercase; letter-spacing: 0.04em; }
.tline li { position: relative; display: flex; flex-direction: column; }
.tline li::before { order: 1; } .tline b { order: 2; } .tline span { order: 3; }
.tline time { display: block; font: 900 84px/0.9 var(--disp); text-transform: uppercase; height: 90px; }
.tline li::before { content: ''; display: block; width: 26px; height: 26px; border-radius: 50%; margin: 9px 0 40px; box-sizing: border-box; border: 4px solid var(--cream); }
.tline li.done::before { background: var(--cream); }
.tline li.plan::before { background: var(--maroon); }
.tline li.plan time { color: var(--orange); }
.tline b { display: block; font: 800 44px/0.95 var(--disp); text-transform: uppercase; margin-bottom: 14px; }
.tline span { display: block; font-size: 21px; line-height: 1.42; opacity: 0.85; }
.lead em.lead-loc { font-weight: 700; color: var(--maroon); margin-top: 12px; }
.s-lead h2 { margin-bottom: 56px; }
.lead-ph { width: 300px; }

/* Google as the anchor: the G in a white disc, six spokes out to what each Google piece does */
.s-goog h2 { position: absolute; left: 0; right: 0; top: 96px; text-align: center; font-size: 110px; }
.gsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gsvg .gl { stroke: var(--ink); stroke-width: 2.5; }
.gsvg .gd { fill: var(--ink); }
.gsvg .gc { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.gsvg .gring { fill: none; stroke: var(--orange); stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round; }
.g-logo { position: absolute; width: 160px; height: 160px; }
.gs { position: absolute; width: 420px; }
.gs-r { text-align: right; }
.gs b { display: block; font: 800 36px/0.95 var(--disp); text-transform: uppercase; color: var(--maroon); margin-bottom: 8px; }
.gs span { display: block; font-size: 19px; line-height: 1.38; }
.gs .gs-sample { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; font: 700 16px var(--sans); box-shadow: 0 0 0 2px var(--ink); }
.gs-sample i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8f0fe; color: #1a73e8; font: 800 12px var(--sans); font-style: normal; }
.gs-sample em { font-style: normal; color: #1e8e3e; background: #e6f4ea; padding: 2px 8px; border-radius: 999px; font-size: 14px; }

/* thank you: big orange line, the wordmark smaller, the address */
.s-thanks.on { display: flex; flex-direction: column; justify-content: center; }
.thx { font: 900 230px/0.85 var(--disp); text-transform: uppercase; color: var(--orange); margin: 0 0 60px; max-width: none; }
.thx-logo { margin: 0 0 56px; gap: 26px; }
.thx-logo .glyph { width: 100px; height: 110px; }
.thx-logo span { font-size: 140px; }
.thx-mail { font: 700 44px var(--sans); color: var(--cream); text-decoration: none; border-bottom: 3px solid var(--orange); align-self: flex-start; padding-bottom: 4px; }

/* in the meeting: Google Meet drawn, with the Breadslice side panel and a live meter per visitor */
.s-gmeet h2 { font-size: 96px; margin-bottom: 34px; }
.gx-win { width: 1640px; border-radius: 16px; overflow: clip; overflow-clip-margin: 30px; background: #fff; box-shadow: 18px 18px 0 var(--maroon); }
.gx-bar-top { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: #ece4da; }
.gx-bar-top > i { width: 12px; height: 12px; border-radius: 50%; background: #cdbfb0; }
.gx-url { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; font: 15px var(--sans); color: #5f6368; background: #fff; padding: 5px 16px; border-radius: 7px; }
.gx-url img { width: 18px; height: 18px; }
.gx-ext { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--maroon); color: var(--cream); box-shadow: 0 0 0 3px var(--orange); }
.gx-ext .glyph { width: 15px; height: 16px; }
.gx-body { display: grid; grid-template-columns: 1fr 470px; height: 540px; }
.gx-meet { position: relative; background: #202124; display: flex; flex-direction: column; padding: 18px; }
.gx-tiles { flex: 1; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.gx-tile { position: relative; border-radius: 12px; background: #3c4043; display: grid; place-items: center; }
.gx-share { grid-row: span 2; background: #2b2d30; padding: 22px 22px 48px; place-items: stretch; }
.gx-screen { border-radius: 8px; background: #f6f8fb; padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.gx-screen b { font: 800 30px var(--sans); color: #0f1b2d; }
.gx-screen span { font: 17px var(--sans); color: #5b6678; margin-bottom: 8px; }
.gx-screen i { height: 26px; border-radius: 6px; background: #e4e8ef; }
.gx-screen i:nth-of-type(2) { width: 80%; } .gx-screen i:nth-of-type(3) { width: 60%; background: #c9ede8; }
.gx-face { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 34px var(--sans); }
.gx-name { position: absolute; left: 14px; bottom: 10px; font: 600 15px var(--sans); color: #fff; }
.gx-ctrl { display: flex; align-items: center; gap: 12px; padding-top: 14px; color: #e8eaed; font: 15px var(--sans); }
.gx-ctrl span { margin-right: auto; }
.gx-ctrl i { width: 44px; height: 44px; border-radius: 50%; background: #3c4043; }
.gx-ctrl .gx-hang { width: 64px; border-radius: 999px; background: #ea4335; margin-right: auto; }
.gx-side { position: relative; overflow: visible; background: #fffdfa; border-left: 1px solid #e7dcd3; padding: 0 22px 20px; font-family: var(--sans); }
.gx-hd { display: flex; align-items: center; gap: 10px; margin: 0 -22px 14px; padding: 14px 22px; background: var(--maroon); color: #fff; }
.gx-hd .glyph { width: 20px; height: 22px; color: var(--cream); }
.gx-hd b { font: 800 18px var(--sans); }
.gx-hd span { margin-left: auto; font: 700 13px var(--sans); background: rgba(255,255,255,.16); padding: 4px 11px; border-radius: 999px; }
.gx-k { font: 700 14px var(--sans); color: #8d7a75; margin: 0 0 12px; }
.gx-v { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "av n live" "amt amt next" "bar bar bar"; column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px #efe4dc; }
.gx-av { grid-area: av; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 15px var(--sans); }
.gx-n { grid-area: n; } .gx-n b { display: block; font: 800 17px var(--sans); color: #241714; } .gx-n small { font: 13px var(--sans); color: #8d7a75; }
.gx-live { grid-area: live; display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--sans); color: #1f8a4c; font-variant-numeric: tabular-nums; }
.gx-live i { width: 8px; height: 8px; border-radius: 50%; background: #1f8a4c; animation: gxp 2s infinite; }
@keyframes gxp { 0% { box-shadow: 0 0 0 0 rgba(31,138,76,.45); } 70% { box-shadow: 0 0 0 7px rgba(31,138,76,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,76,0); } }
.gx-amt { grid-area: amt; font: 800 40px/1 var(--sans); color: #1f8a4c; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gx-next { grid-area: next; font: 13px var(--sans); color: #8d7a75; } .gx-next b { color: #241714; }
.gx-bar { grid-area: bar; height: 7px; border-radius: 999px; background: #f0e6e2; overflow: hidden; }
.gx-bar i { display: block; height: 100%; width: 0; background: #1f8a4c; border-radius: 999px; transition: width .6s ease; }
.gx-tot { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 4px 0; border-top: 1px solid #f0e6e2; font: 700 15px var(--sans); color: #8d7a75; }
.gx-tot b { font: 800 24px var(--sans); color: #241714; font-variant-numeric: tabular-nums; }
.gx-stop { display: block; margin-top: 14px; text-align: center; font: 800 15px var(--sans); color: #fff; background: var(--maroon); padding: 11px; border-radius: 999px; }
.gx-badge { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--black); font: 900 28px var(--disp); box-shadow: 0 0 0 4px var(--cream); z-index: 2; }
.gx-legend { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; width: 1640px; }
.gx-legend li { display: flex; gap: 16px; font-size: 19px; line-height: 1.4; }
.gx-legend li b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); font: 900 25px var(--disp); }

/* market size: three nested rings, and TAM, SAM, SOM beside them */
.s-tss.on { display: flex; flex-direction: column; justify-content: center; }
.s-tss h2 { margin-bottom: 60px; }
.tss { display: grid; grid-template-columns: 560px 1fr; gap: 100px; align-items: center; }
.tss-rings { position: relative; width: 560px; height: 560px; }
.tss-rings i { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-mask: var(--slice) center / 100% 100% no-repeat; mask: var(--slice) center / 100% 100% no-repeat; }
.tss-rings .r1 { width: 500px; height: 550px; background: var(--maroon); }
.tss-rings .r2 { width: 280px; height: 308px; bottom: 24px; background: var(--orange); }
.tss-rings .r3 { width: 110px; height: 121px; bottom: 44px; background: var(--cream); }
.tss dl { margin: 0; display: grid; gap: 40px; }
.tss dl > div { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; }
.tss dt { font: 900 56px/1 var(--disp); color: var(--maroon); }
.tss dl > div:nth-child(2) dt { color: var(--orange); }
.tss dl > div:nth-child(3) dt { color: var(--black); }
.tss dd { margin: 0; }
.tss dd b { display: block; font: 900 110px/0.85 var(--disp); margin-bottom: 10px; }
.tss dd span { display: block; font-size: 21px; line-height: 1.42; max-width: 780px; }

/* Book a paid demo, version B: the question left, the Tallyroom site right */
.s-button2.on { display: grid; grid-template-columns: 560px 1fr; gap: 70px; align-items: center; }
.s-button2 h1 { font-size: 118px; line-height: 0.9; }
.b2-shot { margin: 0 -40px 0 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 18px 18px 0 var(--maroon); }
.b2-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: #ece4da; }
.b2-bar i { width: 12px; height: 12px; border-radius: 50%; background: #cdbfb0; }
.b2-bar span { margin-left: 16px; font: 15px var(--sans); color: #5f6368; background: #fff; padding: 5px 16px; border-radius: 7px; }
.b2-shot img { display: block; width: 100%; }

/* ?print (the PDF export): each slide as presented, one per page, with its own brand and page number */
body.pmode { overflow: visible; background: none; }
body.pmode #deck { position: static; transform: none !important; width: 1920px; height: auto; overflow: visible; }
body.pmode .s { position: relative; width: 1920px; height: 1080px; break-after: page; page-break-after: always; }
body.pmode #chrome { display: none; }
.chrome-p { position: absolute; left: var(--px); right: var(--px); bottom: 46px; display: flex; justify-content: space-between; align-items: center; z-index: 10; color: var(--ink); }
.chrome-p.f-maroon, .chrome-p.f-black { color: var(--cream); }
.chrome-p.f-orange { color: var(--black); }
/* the title slide's Download PDF button (local only) */
.pdf-btn { position: absolute; top: 70px; right: var(--px); display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--cream); color: var(--maroon); font: 900 22px var(--sans); text-decoration: none; box-shadow: 6px 6px 0 var(--black); }
.pdf-btn:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--black); }
.pdf-btn.busy { opacity: 0.7; pointer-events: none; }

/* Or just a link: the heading on the left, two mock chats on the right (a phone messenger and a business
   network inbox), each with the paid-demo link sent by hand. */
.s-link.on { display: grid; grid-template-columns: 500px 1fr; gap: 70px; align-items: center; }
.s-link h1 { font-size: 112px; line-height: 0.9; }
.lk-chats { display: flex; gap: 54px; align-items: stretch; }
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 18px 18px 0 var(--maroon); color: #111b21; }
.chat header { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.chat header span { display: flex; flex-direction: column; min-width: 0; }
.chat header b { font: 700 24px/1.2 var(--sans); }
.chat header small { font: 17px/1.3 var(--sans); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .av { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 800 20px var(--sans); font-style: normal; background: #cdbfb0; color: #fff; }
.chat .av-me { background: var(--maroon); }
.chat time { font: 14px var(--sans); color: #667781; }
.chat p { max-width: none; }
.lk-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.06); text-decoration: none; color: inherit; }
.lk-card img { width: 52px; height: 52px; flex: none; }
.lk-card span { display: flex; flex-direction: column; min-width: 0; }
.lk-card b { font: 700 20px/1.25 var(--sans); }
.lk-card i { font: 17px/1.3 var(--sans); font-style: normal; opacity: 0.75; }
.lk-card u { font: 16px/1.4 var(--sans); text-decoration: none; color: #0a66c2; }
/* phone messenger */
.chat-wa header { background: #075e54; color: #fff; }
.chat-wa .chat-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 26px; background: #efe7dd; }
.chat-wa p { position: relative; margin: 0; max-width: 86%; padding: 10px 14px 24px; border-radius: 12px; font-size: 22px; line-height: 1.32; background: #fff; align-self: flex-start; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); }
.chat-wa p.out { align-self: flex-end; background: #d9fdd3; }
.chat-wa p time { position: absolute; right: 12px; bottom: 6px; }
/* business network inbox */
.chat-li header { border-bottom: 1px solid #e0dfdc; }
.chat-li header small { color: #5e5e5e; opacity: 1; }
.chat-li .chat-body { display: flex; flex-direction: column; gap: 22px; padding: 24px 22px; }
.li-msg { display: flex; gap: 14px; align-items: flex-start; }
.li-msg .av { width: 46px; height: 46px; font-size: 17px; }
.li-msg > div { min-width: 0; flex: 1; }
.li-msg b { font: 700 20px var(--sans); margin-right: 10px; }
.li-msg p { margin: 4px 0 0; font-size: 21px; line-height: 1.36; }
.li-msg .lk-card { margin-top: 12px; border: 1px solid #e0dfdc; background: #f8f6f2; }
.chat-li footer { margin: 0 22px 22px; padding: 14px 18px; border-radius: 10px; background: #f4f2ee; font: 19px var(--sans); color: #8a8a8a; }
.chat .chat-body { flex: 1; }
/* fairness: a rule down the middle, ours on the left and everyone else's on the right */
.s-fair::before { content: ''; position: absolute; left: 1024px; top: 150px; bottom: 150px; width: 3px; background: var(--cream-2); }
.s-fair .alt:last-child { border-bottom: 3px solid var(--cream-2); }
.s-goog .goog-sub { position: absolute; left: 0; right: 0; top: 208px; margin: 0; max-width: none; text-align: center; font-size: 28px; opacity: 0.8; }
.sig { border-bottom: 4px solid var(--ink); }
.sig-end { font-size: 40px; line-height: 1.3; max-width: none; margin: 44px 0 0; font-weight: 700; color: var(--maroon); }
.s-tss h2 { font-size: 92px; margin-bottom: 18px; text-wrap: balance; }
.s-tss .tss-sub { font-size: 32px; max-width: none; margin: 0 0 40px; }
/* The hard questions: five animals in a row, each asking one in a speech bubble. */
.s-qs.on { display: flex; flex-direction: column; justify-content: center; }
.s-qs h2 { font-size: 104px; margin-bottom: 16px; }
.s-qs .qs-sub { font-size: 32px; max-width: none; margin: 0 0 36px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.qs li { display: flex; flex-direction: column; align-items: center; }
.qs p { position: relative; flex: 1; width: 100%; max-width: none; margin: 0 0 30px; padding: 22px 24px; border-radius: 22px; background: var(--maroon); color: var(--cream); font-size: 23px; line-height: 1.34; font-weight: 700; }
.qs p::after { content: ''; position: absolute; left: 50%; bottom: -22px; margin-left: -18px; border: 18px solid transparent; border-top: 24px solid var(--maroon); border-bottom: 0; }
.qs li:nth-child(even) p { background: var(--orange); color: var(--black); }
.qs li:nth-child(even) p::after { border-top-color: var(--orange); }
.qs img { display: block; height: 320px; width: auto; max-width: 100%; object-fit: contain; }
/* Private and verifiable: copy on the left, a picture of where the customer data runs on the right. */
.s-priv.on { display: grid; grid-template-columns: 700px 1fr; gap: 110px; align-items: center; }
.priv-l h2 { font-size: 104px; margin-bottom: 30px; }
.priv-l p { font-size: 30px; max-width: none; }
.priv-l b { color: var(--maroon); }
.priv-fig { position: relative; width: 840px; height: 750px; }
.priv-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-flow { stroke: var(--orange); stroke-width: 10; stroke-linecap: round; }
.pv-cut { stroke: var(--ink); stroke-width: 5; stroke-dasharray: 4 14; stroke-linecap: round; }
.pv-x { fill: var(--maroon); }
.pv-xm { stroke: var(--cream); stroke-width: 6; stroke-linecap: round; fill: none; }
.pv-n { position: absolute; border-radius: 18px; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.pv-n b { font: 800 42px/0.95 var(--disp); text-transform: uppercase; }
.pv-n span { font-size: 21px; line-height: 1.35; margin-top: 8px; }
.pv-biz { width: 250px; height: 150px; background: var(--maroon); color: var(--cream); }
.pv-goog { width: 250px; height: 150px; background: #fff; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 22px 20px; }
.pv-goog img { width: 52px; height: 52px; flex: none; }
.pv-goog div { display: flex; flex-direction: column; }
.pv-lab { position: absolute; margin: 0; text-align: center; font: 800 26px/1 var(--disp); text-transform: uppercase; letter-spacing: 0.02em; color: var(--maroon); }
.pv-seal { width: 460px; min-height: 202px; background: var(--black); color: var(--cream); outline: 4px dashed var(--orange); outline-offset: 8px; }
.pv-seal b { display: flex; align-items: center; gap: 12px; }
.pv-seal svg { position: static; width: 36px; height: 36px; fill: var(--orange); flex: none; }
.pv-seal .pv-ver { color: var(--orange); font-weight: 700; }
.pv-no { position: absolute; margin: 0; font: 800 30px/1 var(--disp); text-transform: uppercase; color: var(--maroon); }
.pv-bs { width: 300px; height: 96px; flex-direction: row; align-items: center; justify-content: center; gap: 14px; background: var(--orange); color: var(--black); }
.pv-bs img { width: 44px; height: 44px; }
/* acquisition costs: the two channel figures as plain numbers (the bars were unclear, 2026-11-11) */
.cac-stats { display: flex; gap: 70px; }
.cac-stats b { display: block; font: 900 84px/0.9 var(--disp); color: var(--ink); white-space: nowrap; }
.cac-stats span { display: block; font-size: 22px; font-weight: 700; margin-top: 8px; }
/* title slide: the no-tracking note, closed with its button (not kept: the deck stores nothing) */
.no-track { position: absolute; right: var(--px); bottom: 128px; width: 560px; padding: 30px 34px; border-radius: 18px; background: var(--cream); color: var(--ink); box-shadow: 14px 14px 0 var(--black); }
.no-track p { font-size: 27px; line-height: 1.36; margin: 0 0 20px; max-width: none; }
.no-track button { font: 800 30px/1 var(--disp); text-transform: uppercase; letter-spacing: 0.02em; padding: 12px 30px 11px; border: 0; border-radius: 999px; background: var(--orange); color: var(--black); cursor: pointer; }
.no-track button:hover { background: var(--maroon); color: var(--cream); }
body.pmode .no-track { display: none; }
.nt-btns { display: flex; gap: 12px; }
.no-track button.nt-b2 { background: var(--maroon); color: var(--cream); }
.no-track button.nt-b2:hover { background: var(--orange); color: var(--black); }