/* The Pitch Designers: the page is a deck.
   Brand (2022 style guide): Archivo, greyscale #1D1D1B #424242 #757575 #BDBDBD #FFFFFF.
   Slides are sized in container units (cqi), so the same slide renders as a thumbnail in a stack,
   in the laid-out view and full-screen in the slideshow. */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo-variable.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --white: #fff; --ink: #1d1d1b; --g3: #424242; --g2: #757575; --g1: #bdbdbd; --canvas: #ededeb; --line: #d8d8d6;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { background: var(--canvas); scroll-behavior: smooth }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased }
a { color: inherit }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px }
.skip:focus { top: 12px }

/* Logo: three slides in a pile beside the name */
.mark { position: relative; display: inline-block; width: 30px; height: 22px; flex: none }
.mark i { position: absolute; width: 22px; height: 14px; border: 2px solid currentColor; background: var(--white) }
.mark i:nth-child(1) { left: 0; top: 8px } .mark i:nth-child(2) { left: 4px; top: 4px } .mark i:nth-child(3) { left: 8px; top: 0; background: currentColor }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-stretch: 110%; font-size: 16px; letter-spacing: -.005em }
.brand:hover .mark i:nth-child(1) { transform: translate(-3px, 2px) rotate(-6deg) } .brand:hover .mark i:nth-child(2) { transform: rotate(4deg) }
.mark i { transition: transform .3s ease }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); background: var(--white); border-bottom: 1px solid var(--line) }
.actions { display: flex; gap: 8px }
.btn { font: 600 14px/1 var(--sans); padding: 11px 16px; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap }
.btn.dark { background: var(--ink); color: var(--white) }
.btn:hover { background: var(--ink); color: var(--white) } .btn.dark:hover { background: var(--g3) }
@media (max-width: 520px) { .btn.play-btn span { display: none } }

/* Layout: rail of slide titles + the deck */
.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto;
  padding: 32px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)) }
@media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr) } }
/* The rail: a deck app's slide panel. Each thumbnail is the real slide at 1000px, scaled by --k. */
.rail { position: sticky; top: 86px; align-self: start; display: grid; gap: 14px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px 8px 12px 2px; scrollbar-width: thin }
.thumb { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; text-decoration: none; color: var(--g2) }
.thumb .no { font: 700 12px/1 var(--sans); text-align: right; padding-top: 4px; font-variant-numeric: tabular-nums }
.thumb .frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--white); outline: 1px solid var(--line); border-radius: 3px; transition: outline-color .15s, box-shadow .15s }
.thumb .mini { position: absolute; top: 0; left: 0; width: 1000px; transform: scale(var(--k, .17)); transform-origin: top left; pointer-events: none }
.thumb .mini .page { width: 1000px; aspect-ratio: 16 / 9; box-shadow: none; padding: 5.5% 6.5% }
.thumb:hover .frame { outline: 2px solid var(--g1) }
.thumb[aria-current="true"] { color: var(--ink) }
/* No rail below 960px: after the .rail rule, so it wins. */
@media (max-width: 960px) { .rail { display: none } }
.thumb[aria-current="true"] .frame { outline: 3px solid var(--ink); outline-offset: 1px }
.thumb:focus-visible { outline: none } .thumb:focus-visible .frame { outline: 3px solid var(--ink); box-shadow: 0 0 0 6px var(--g1) }
.deck { display: grid; gap: 28px; min-width: 0 }

/* A page slide */
.page { position: relative; aspect-ratio: 16 / 9; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 12px 32px -20px rgba(0,0,0,.3);
  overflow: hidden; padding: 5.5% 6.5%; display: grid; container-type: inline-size; scroll-margin-top: 90px; min-width: 0 }
@media (max-width: 700px) { .page { aspect-ratio: auto; padding: 32px 22px 40px } }
.corner { position: absolute; font: 800 11px/1 var(--sans); font-stretch: 125%; color: var(--g2); letter-spacing: .04em }
.corner.n { bottom: 14px; right: 18px } .corner.t { top: 16px; left: 18px }
.page h1, .page h2 { margin: 0; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; text-wrap: balance }
.page h1 { font-size: clamp(30px, 5.6cqi, 70px) }
.page h2 { font-size: clamp(24px, 3.8cqi, 46px) }
.lede { font-size: clamp(16px, 1.8cqi, 22px); line-height: 1.45; max-width: 44ch; margin: 0; color: var(--g3) }
.lede u { text-decoration-thickness: 2px; text-underline-offset: 4px }
.kicker { font: 700 12px/1.3 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--g2) }

/* 01 intro */
.intro { align-content: space-between; gap: 24px }
.intro .band { position: relative; height: 15%; min-height: 34px; overflow: hidden;
  background: linear-gradient(100deg, #d4d4d2, #f4f4f1 28%, #c6d4e8 44%, #f2d0da 56%, #e8e2c4 68%, #d4d4d2); background-size: 220% 100% }
.intro.play .band { animation: sheen 4.6s cubic-bezier(.3,.1,.2,1) 1 both }
@keyframes sheen { from { background-position: 100% 0 } to { background-position: 0 0 } }
.intro .cta { display: flex; gap: 10px; flex-wrap: wrap }

/* 02 proof */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; align-self: end }
@media (max-width: 700px) { .proof { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px } }
.proof b { display: block; font-weight: 800; font-stretch: 125%; font-size: clamp(30px, 5.4cqi, 68px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.proof span { display: block; margin-top: 8px; color: var(--g3); font-size: clamp(14px, 1.45cqi, 18px) }
.proof em { font-style: normal; color: var(--g2) }

/* 03 references: the stacks */
.refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5cqi; align-self: end }
@media (max-width: 700px) { .refs { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 24px } }
.ref { display: grid; gap: 10px; min-width: 0 }
.ref h3 { margin: 0; font-weight: 800; font-stretch: 110%; font-size: clamp(15px, 1.5cqi, 19px) }
.ref p { margin: 0; color: var(--g2); font-size: clamp(13px, 1.25cqi, 15px) }
.stack { position: relative; display: block; width: 100%; aspect-ratio: 16 / 11; border: 0; padding: 0; background: none; cursor: pointer }
.stack .card { position: absolute; left: 7%; right: 7%; top: 8%; transition: transform .5s cubic-bezier(.2,.8,.2,1) }
.stack .card:nth-child(1) { transform: translate(-3%, 5%) rotate(-3deg) }
.stack .card:nth-child(2) { transform: translate(2%, 2%) rotate(2deg) }
.stack:hover .card:nth-child(1), .stack:focus-visible .card:nth-child(1) { transform: translate(-16%, 9%) rotate(-9deg) }
.stack:hover .card:nth-child(2), .stack:focus-visible .card:nth-child(2) { transform: translate(13%, 6%) rotate(7deg) }
.stack:hover .card:nth-child(3), .stack:focus-visible .card:nth-child(3) { transform: translateY(-5%) }
.stack:focus-visible { outline-offset: 8px }
.stack .open-hint { position: absolute; right: 7%; bottom: 0; font: 700 11px/1 var(--sans); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 6px 8px; opacity: 0; transition: opacity .3s }
.stack:hover .open-hint, .stack:focus-visible .open-hint { opacity: 1 }

/* 04 services, 05 pricing */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; align-self: end }
@media (max-width: 700px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px } }
.cols h3 { margin: 0 0 8px; font-weight: 800; font-stretch: 112%; font-size: clamp(17px, 2cqi, 25px) }
.cols p { margin: 0; color: var(--g3); font-size: clamp(14px, 1.45cqi, 18px) }
.price { font-weight: 800; font-stretch: 125%; font-size: clamp(26px, 3.8cqi, 48px); line-height: 1; margin: 4px 0 10px; font-variant-numeric: tabular-nums }
.addons { margin: 0; color: var(--g2); font-size: clamp(13px, 1.25cqi, 15px); align-self: end }

/* 07 contact */
.contact { align-content: space-between; gap: 24px }
.contact .mail { font-weight: 800; font-stretch: 125%; font-size: clamp(20px, 3.4cqi, 42px); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; overflow-wrap: anywhere }

footer { max-width: 1320px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--g3); font-size: 14px }

/* ---------- The sample slides (anonymised, redrawn) ---------- */
.s { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; box-shadow: 0 10px 26px -16px rgba(0,0,0,.5); text-align: left; color: #222 }
.s * { box-sizing: border-box }
.s .src { position: absolute; left: 5.5%; bottom: 3.6%; font: 400 1.05cqi/1.2 "Helvetica Neue", Arial, sans-serif; color: rgba(0,0,0,.66) }
.s.dark .src { color: rgba(255,255,255,.75) }
/* motion helpers: everything sits at its final state unless .play is set and motion is allowed */
.s .rise { opacity: 1; transform: none }
.motion .s.armed .rise { opacity: 0; transform: translateY(4cqi) }
.motion .s.play .rise { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 1ms) }

/* A1 · the hook */
.a1 { background: #e6e1f4; padding: 9% 8%; display: grid; align-content: center; gap: 2cqi; font-family: "Helvetica Neue", Arial, sans-serif }
.a1 .em { font-size: 7cqi; line-height: 1 }
.a1 .small { font-size: 3.6cqi; font-weight: 700; color: #3a3a3a }
.a1 .big { font-size: 9cqi; font-weight: 800; line-height: .98; letter-spacing: -.02em; color: #2c2c2c }
.a1 mark { background: linear-gradient(transparent 64%, #f4ea4a 64%) no-repeat; background-size: 100% 100%; color: inherit }
.motion .a1.armed mark { background-size: 0% 100% }
.motion .a1.play mark { background-size: 100% 100%; transition: background-size .9s cubic-bezier(.3,.1,.2,1) .9s }
/* A2 · the market */
.a2 { background: #fbd9dc; display: grid; grid-template-columns: 1.15fr 1fr; font-family: "Helvetica Neue", Arial, sans-serif }
.a2 .copy { padding: 8% 7%; display: grid; align-content: center; gap: 3.4cqi }
.a2 h4 { margin: 0; font-size: 5cqi; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #2b2b2b }
.a2 h4 mark { background: linear-gradient(transparent 62%, #f2e94e 62%); color: inherit }
.a2 .bars { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2cqi; align-items: end; height: 22cqi }
.a2 .bars div { background: #fff; display: grid; place-items: center; height: var(--h) }
.motion .a2.armed .bars div { height: 0 }
.motion .a2.play .bars div { height: var(--h); transition: height 1.5s cubic-bezier(.2,.8,.2,1) .2s }
.a2 .bars b { font-size: 3.8cqi; font-weight: 800; color: #2b2b2b }
.a2 .lbl { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2cqi; font-size: 1.3cqi; color: #4a4a4a; text-align: center; margin-top: -2cqi }
.a2 .photo { background: url(/img/a-necklace.jpg) center / cover }
.motion .a2.armed .photo { transform: scale(1.1) } .motion .a2.play .photo { transform: none; transition: transform 4.5s ease-out }
/* A3 · traction */
.a3 { background: #f7f2ea; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 2.4cqi 3cqi; padding: 5% 6% 6%; font-family: "Helvetica Neue", Arial, sans-serif }
.a3 h4 { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 3.4cqi; font-weight: 800; letter-spacing: -.01em; color: #2b2b2b }
.a3 .chart { background: #fff; padding: 3cqi; display: grid; grid-template-rows: auto 1fr; gap: 1.5cqi }
.a3 .chart b { font-size: 2.2cqi; color: #2b2b2b }
.a3 .bars { display: flex; align-items: flex-end; gap: 1.2cqi; height: 100% }
.a3 .bars i { flex: 1; height: var(--h); background: linear-gradient(#5ce1b5 0 70%, #2fc79a 70%); position: relative }
.a3 .bars i:last-child { background: linear-gradient(#7b6fd6 0 25%, #5ce1b5 25% 75%, #2fc79a 75%) }
.motion .a3.armed .bars i { height: 0 }
.motion .a3.play .bars i { height: var(--h); transition: height .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * 1ms) }
.a3 .stats { background: #f1e3d3; padding: 2.4cqi; display: grid; align-content: start; gap: 1cqi; position: relative; overflow: hidden }
.a3 .stats b { font-size: 2.6cqi; display: block } .a3 .stats span { font-size: 1.25cqi; color: #4f4032 }
.a3 .stats .row { border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: 1cqi }
.a3 .ear { position: absolute; right: -6%; bottom: -10%; width: 55%; aspect-ratio: 1; background: url(/img/a-earrings.jpg) center / contain no-repeat; mix-blend-mode: multiply; opacity: .9 }
/* B · the hospitality deck: navy, serif titles */
.b { font-family: Georgia, "Times New Roman", serif }
.b1 { background: #0b1a3a; color: #fff; display: grid; grid-template-rows: auto 1fr; padding: 5% 6%; gap: 2cqi }
.b1::before { content: ""; position: absolute; inset: 0; background: url(/img/b-living.jpg) center / cover; opacity: .14 }
.b1 h4 { position: relative; margin: 0; text-align: center; font-size: 2.6cqi; font-weight: 700 }
.b1 .venn { position: relative; display: grid; place-items: center }
.b1 .c { position: absolute; width: 36cqi; aspect-ratio: 1; border-radius: 50%; display: grid; align-content: center; justify-items: center; gap: 1.2cqi; padding: 6cqi; font-family: "Helvetica Neue", Arial, sans-serif }
.b1 .c.l { background: rgba(120,140,190,.45); transform: translateX(-11cqi) } .b1 .c.r { background: rgba(70,150,160,.5); transform: translateX(11cqi) }
.motion .b1.armed .c.l { transform: translateX(-30cqi) } .motion .b1.armed .c.r { transform: translateX(30cqi) }
.motion .b1.play .c { transition: transform 1.3s cubic-bezier(.2,.8,.2,1) .2s }
.motion .b1.play .c.l { transform: translateX(-11cqi) } .motion .b1.play .c.r { transform: translateX(11cqi) }
.b1 .c.l { justify-items: start; padding-right: 16cqi } .b1 .c.r { justify-items: end; padding-left: 16cqi }
.b1 .c strong { font-size: 1.7cqi; letter-spacing: .04em; text-transform: uppercase; opacity: .8 }
.b1 .pill { font-size: 1.35cqi; padding: .6cqi 1.2cqi; border-radius: 99px; background: rgba(255,255,255,.16); white-space: nowrap }
.b1 .us { position: relative; z-index: 2; background: #fff; color: #0b1a3a; font: 800 2.4cqi/1 "Helvetica Neue", Arial, sans-serif; padding: 1.2cqi 2cqi; border-radius: .6cqi }
.motion .b1.armed .us { opacity: 0; transform: scale(.6) } .motion .b1.play .us { opacity: 1; transform: none; transition: all .6s cubic-bezier(.2,.8,.2,1) 1.4s }
/* B2 · reviews */
.b2 { background: #0b1a3a; color: #fff; display: grid; grid-template-columns: 1fr 1fr }
.b2 .photo { background: url(/img/b-bedroom.jpg) center / cover }
.b2 .copy { padding: 7% 6%; display: grid; align-content: center; gap: 2.4cqi }
.b2 h4 { margin: 0; font-size: 2.7cqi; line-height: 1.2; font-weight: 700 }
.b2 h4 u { text-decoration-thickness: .2cqi; text-underline-offset: .5cqi }
.b2 .card { background: #fff; color: #0b1a3a; padding: 3cqi; display: grid; gap: .6cqi; font-family: "Helvetica Neue", Arial, sans-serif }
.b2 .card b { font: 400 9cqi/1 Georgia, serif; color: #1c2f6b; font-variant-numeric: tabular-nums }
.b2 .card span { font-style: italic; font-size: 1.6cqi; color: #3a4a6a }
.b2 .stars { display: flex; gap: .6cqi } .b2 .stars i { width: 2.2cqi; aspect-ratio: 1; background: #f2b73a; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) }
.motion .b2.armed .stars i { transform: scale(0) } .motion .b2.play .stars i { transform: none; transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--d) * 1ms) }
/* B3 · the market maths */
.b3 { background: #f6f7fb; color: #1c2f6b; padding: 6% 6%; display: grid; align-content: center; gap: 3cqi }
.b3::after { content: ""; position: absolute; right: 0; top: 0; width: 26%; height: 100%; background: url(/img/b-tower.jpg) center / cover; opacity: .9 }
.b3 h4 { margin: 0; font-size: 2.6cqi; font-weight: 700; max-width: 68% }
.b3 .eq { display: flex; align-items: center; gap: 1.6cqi; max-width: 72%; flex-wrap: nowrap }
.b3 .eq > * { font-family: "Helvetica Neue", Arial, sans-serif }
.b3 .term { display: grid; justify-items: center; gap: .4cqi }
.b3 .term b { font: 400 3.6cqi/1 Georgia, serif; font-variant-numeric: tabular-nums } .b3 .term span { font-size: 1.05cqi; color: #46568a; text-align: center }
.b3 .op { font-size: 2.6cqi; color: #46568a }
.b3 .res { background: #fff; box-shadow: 0 .6cqi 2cqi rgba(28,47,107,.15); padding: 2cqi 2.4cqi; display: grid; justify-items: center }
.b3 .res b { font: 700 5cqi/1 Georgia, serif; color: #2a3fa0 } .b3 .res span { font-size: 1.3cqi }
.b3 .note { font-size: 1.4cqi; color: #46568a; font-family: "Helvetica Neue", Arial, sans-serif }
/* C · the AI marketplace deck: deep green, clean sans */
.c { font-family: "Helvetica Neue", Arial, sans-serif }
.c1 { background: #f5f7f6; padding: 5.5% 6%; display: grid; grid-template-rows: auto auto 1fr; gap: 1.6cqi }
.c1 .tag, .c3 .tag, .c2 .tag { font-size: 1.1cqi; text-transform: uppercase; letter-spacing: .08em; color: #3f4e49; background: #e3e9e7; padding: .4cqi .8cqi; justify-self: start; border-radius: .4cqi }
.c1 h4 { margin: 0; font-size: 3.6cqi; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: #10302a }
.c1 h4 i { font-weight: 600 }
.c1 .table { background: #fff; border: 1px solid #dfe5e3; border-radius: 1cqi; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3cqi; padding: 2.4cqi 3cqi; align-content: start }
.c1 .table > span { font-size: 1.2cqi; color: #4f5d58; border-bottom: 1px solid #e6ebe9; padding-bottom: 1cqi; margin-bottom: 1cqi }
.c1 .item { display: grid; grid-template-columns: 2.2cqi 1fr; gap: 1cqi; align-items: start; padding: 1cqi 0 }
.c1 .item b { font-size: 1.45cqi; color: #10302a } .c1 .item small { display: block; font-size: 1.15cqi; color: #4f5d58; margin-top: .3cqi }
.c1 .dot { width: 2cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.2cqi; font-weight: 700 }
.c1 .no { background: #d64545 } .c1 .yes { background: #1f9e78 }
/* C2 · product flow */
.c2 { background: #0f3b33; color: #fff; display: grid; grid-template-columns: .9fr 1.3fr; gap: 3cqi; padding: 5.5% 5%; align-items: center }
.c2 h4 { margin: 0 0 2cqi; font-size: 3.2cqi; font-weight: 600; line-height: 1.12; letter-spacing: -.02em } .c2 h4 i { color: #8ff0c8 }
.c2 .mail, .c2 .spec, .c2 .opt { background: #fff; color: #10302a; border-radius: 1cqi; padding: 1.8cqi; font-size: 1.25cqi; line-height: 1.45 }
.c2 .mail b { display: block; font-size: 1.35cqi } .c2 .mail p { margin: .8cqi 0 0; color: #4a5a55 }
.c2 .right { display: grid; gap: 1.4cqi }
.c2 .spec h5 { margin: 0 0 1cqi; font-size: 1.6cqi } .c2 .chips { display: flex; flex-wrap: wrap; gap: .6cqi }
.c2 .chips span { background: #d8f6e8; color: #145c48; border-radius: 99px; padding: .3cqi 1cqi; font-size: 1.1cqi }
.c2 .opt { display: flex; justify-content: space-between; align-items: center; gap: 2cqi }
.c2 .opt b { font-size: 2.2cqi; font-variant-numeric: tabular-nums } .c2 .opt small { color: #4a5a55 }
.c2 .ai { display: inline-flex; align-items: center; gap: .8cqi; font-size: 1.2cqi; color: #8ff0c8 }
.c2 .ai i { width: 1cqi; aspect-ratio: 1; border-radius: 50%; background: #8ff0c8 }
.motion .c2.play .ai i { animation: blink 1s steps(1) 4 } @keyframes blink { 50% { opacity: 0 } }
/* C3 · unit economics */
.c3 { background: #f5f7f6; padding: 4.5% 6% 4%; display: grid; grid-template-rows: auto auto auto 1fr; gap: 1.2cqi; justify-items: center }
.c3 h4 { margin: 0; font-size: 3.6cqi; font-weight: 600; letter-spacing: -.02em; color: #10302a }
.c3 .subt { font-size: 1.3cqi; color: #4f5d58; margin-top: -1cqi }
.c3 .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; width: 100%; align-self: center }
.c3 .box { border-radius: 1.2cqi; padding: 2.6cqi; display: grid; grid-template-columns: 1fr auto; gap: 1.6cqi; align-items: end }
.c3 .box.old { background: #fff; border: 1px solid #dfe5e3 } .c3 .box.new { background: #2fe0a0; color: #06352a }
.c3 .box span { grid-column: 1 / -1; font-size: 1.25cqi; font-weight: 600 }
.c3 .box b { font-size: 7cqi; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums }
.c3 .layers { display: grid; gap: .4cqi; width: 9cqi }
.c3 .layers i { display: block; height: 2.2cqi; font-size: .9cqi; font-style: normal; color: #fff; display: grid; place-items: center }
.c3 .old .layers i { background: #b23030 } .c3 .old .layers i:last-child { background: #10302a }
.c3 .new .layers i { background: rgba(6,53,42,.12) } .c3 .new .layers i:nth-last-child(-n+2) { background: #10302a }
.motion .c3.armed .layers i { transform: scaleX(0) } .motion .c3.play .layers i { transform: none; transition: transform .45s ease; transition-delay: calc(var(--d) * 1ms) }
.c3 small.note { font-size: 1.15cqi; color: #4f5d58; grid-column: 1 / -1 }

/* The laid-out view */
.spread { position: fixed; inset: 0; z-index: 30; background: rgba(237,237,235,.98); overflow: auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)) }
.spread[hidden] { display: none }
.spread .bar { max-width: 1320px; margin: 0 auto 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap }
.spread h2 { margin: 0; font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 28px) }
.spread .sub { color: var(--g3); font-size: 14px; margin: 4px 0 0 }
.spread .grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px }
.spread .grid .s { width: 100% }
.motion .spread .grid .s { animation: dealt .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms) }
@keyframes dealt { from { transform: translateY(40px) scale(.95); opacity: 0 } }
.spread .tools { display: flex; gap: 8px }

/* Slideshow mode: one slide fills the screen */
body.show { overflow: hidden; background: #111 }
body.show .top, body.show .rail, body.show footer { display: none }
body.show .layout { display: block; padding: 0; max-width: none }
body.show .page { display: none; position: fixed; inset: 0; margin: auto; width: min(100vw, 177.78vh); height: auto; aspect-ratio: 16 / 9; box-shadow: none; padding: 5.5% 6.5% }
body.show .page.current { display: grid }
.exit { display: none }
body.show .exit { display: inline-flex; position: fixed; top: 12px; right: 12px; z-index: 40 }
.counter { display: none }
body.show .counter { display: block; position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 40; color: var(--g3); background: var(--white); padding: 5px 9px; border-radius: 99px; font: 700 12px/1 var(--sans); font-stretch: 125% }

/* ---------- Motion between slides ---------- */
/* Scroll: a slide below the fold waits a little lower and smaller, then rises into place;
   its contents follow in order. Set only by JS, and only when motion is allowed. */
.page.pending { opacity: 0; transform: translateY(70px) scale(.965) }
.page.arrive { animation: arrive .9s cubic-bezier(.2,.8,.2,1) both }
@keyframes arrive { from { opacity: 0; transform: translateY(70px) scale(.965) } to { opacity: 1; transform: none } }
.page.arrive > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both }
.page.arrive > *:nth-child(2) { animation-delay: .12s } .page.arrive > *:nth-child(3) { animation-delay: .24s } .page.arrive > *:nth-child(4) { animation-delay: .36s }
@keyframes rise { from { opacity: 0; transform: translateY(24px) } }
.page.arrive .proof > *, .page.arrive .cols > *, .page.arrive .refs > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both }
.page.arrive .proof > :nth-child(1), .page.arrive .cols > :nth-child(1), .page.arrive .refs > :nth-child(1) { animation-delay: .26s }
.page.arrive .proof > :nth-child(2), .page.arrive .cols > :nth-child(2), .page.arrive .refs > :nth-child(2) { animation-delay: .38s }
.page.arrive .proof > :nth-child(3), .page.arrive .cols > :nth-child(3), .page.arrive .refs > :nth-child(3) { animation-delay: .5s }
.thumb .page, .thumb .page > *, .thumb .page * { animation: none !important } .thumb .page { opacity: 1 !important; transform: none !important }

/* Slideshow transition: deal. The leaving slide stays on screen while the next one is dealt on. */
body.show .page.leaving { display: grid; z-index: 1 }
body.show .page.current { z-index: 2 }
body.show .page.current.fwd > *, body.show .page.current.back > * { animation: rise .7s cubic-bezier(.2,.8,.2,1) .3s both }
body.show .page.current.fwd { animation: dealIn .7s cubic-bezier(.2,.8,.2,1) both }
body.show .page.leaving.fwd { animation: sink .7s ease both }
body.show .page.current.back { animation: unsink .7s cubic-bezier(.2,.8,.2,1) both }
body.show .page.leaving.back { animation: dealOut .7s cubic-bezier(.6,0,.8,.4) both }
@keyframes dealIn { from { transform: translate(6%, 110%) rotate(6deg) } }
@keyframes sink { to { transform: scale(.9); filter: brightness(.55) } }
@keyframes unsink { from { transform: scale(.9); filter: brightness(.55) } }
@keyframes dealOut { to { transform: translate(6%, 110%) rotate(6deg) } }

/* Phones: a slide in the slideshow takes the full screen and scrolls, instead of a cut-off 16:9 box. */
@media (max-width: 700px) {
  body.show .page { width: 100vw; height: 100dvh; aspect-ratio: auto; overflow-y: auto; padding: 64px 22px 72px }
  #s6 .lede { margin-top: 24px }
  .contact .mail { font-size: 18px }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }