@import url('/brand.css');
/* 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. */



* { 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 */
/* Hero: the logo and two buttons, centred above the deck-app window */
.hero { display: grid; justify-items: center; gap: 14px; padding: 52px 16px 36px; text-align: center }
.hero .word { margin: 0; font-weight: 700; font-stretch: 110%; font-size: 22px; letter-spacing: -.005em }
.hero .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px }

/* The deck-app window: a toolbar, then the rail and the slides. Everything above aligns to its edges. */
.win { width: calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px))); max-width: 1320px; margin: 0 auto 40px; background: #f6f6f4;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 50px -28px rgba(0,0,0,.3) }
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px 9px 14px;
  background: var(--white); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; font: 700 13px/1 var(--sans); font-stretch: 110%; color: var(--g3) }
.toolbar .dots { display: flex; gap: 6px; width: 54px } .toolbar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--g1) }
.toolbar .btn { padding: 8px 12px; font-size: 13px }
@media (max-width: 700px) { .toolbar .file { display: none } }
.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) }

/* 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: 24px 24px 32px }
@media (max-width: 700px) { .layout { padding: 16px 12px 20px } }
@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: 70px; align-self: start; display: grid; gap: 14px; max-height: calc(100vh - 90px); 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% 9.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% 9.5%; display: grid; container-type: inline-size; scroll-margin-top: 70px; min-width: 0 }
@media (max-width: 700px) { .page { aspect-ratio: auto; padding: 32px 22px 20px } }
.corner { position: absolute; font: 800 11px/1 var(--sans); font-stretch: 125%; color: var(--g2); letter-spacing: .04em }
.corner.t { top: 16px; left: 18px }
/* Every page slide's footer: the logo left, the number right, like a real deck */
.foot { position: absolute; left: 6.5%; right: 6.5%; bottom: 3.4%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); padding-top: max(8px, 1.1cqi); color: var(--g2); font: 700 max(12px, 1.1cqi)/1 var(--sans); font-stretch: 110% }
.foot .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--g3) }
.foot .n { font-stretch: 125%; letter-spacing: .04em }
@media (max-width: 700px) { .page .foot { position: static; margin-top: 28px; padding-top: 12px } }
.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) }
/* The title's ampersand: the typographer's italic serif against the wide grotesque */
.page h1 .amp, .page h2 .amp { font: italic 400 1.2em/0 Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: 0; vertical-align: -.04em }
@media (max-width: 359px) { .page h1 { font-size: 24px } }
.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 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 4cqi; row-gap: 24px }
.intro h1 { grid-column: 1; align-self: end; font-size: clamp(28px, 4.8cqi, 60px) }
@media (max-width: 359px) { .intro h1 { font-size: 24px } }
.intro > div:not(.still):not(.foot) { grid-column: 1 }
@media (max-width: 700px) { .intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: none } }

/* The cover's still life: the three pieces tilted like prints on a desk */
.still { grid-column: 2; grid-row: 1 / 3; position: relative; min-height: 0 }
@media (max-width: 700px) { .still { grid-column: 1; grid-row: auto; aspect-ratio: 1 / .8; margin-top: 8px } }
.still .piece { position: absolute }
.still .deckslide { width: 84%; right: 0; top: 4%; rotate: 2.5deg }
.still .demo { width: 66%; left: 2%; bottom: 6%; rotate: -3deg }
/* Dealt onto the desk when the page first plays; then the charts grow */
.motion .intro:not(.play) .still .piece { opacity: 0 }
.motion .intro.play .still .piece { animation: lay .9s cubic-bezier(.2,.8,.2,1) both }
.motion .intro.play .still .demo { animation-delay: .25s }
@keyframes lay { from { opacity: 0; translate: 0 6cqi } }
@keyframes growY { from { transform: scaleY(0) } } @keyframes growX { from { transform: scaleX(0) } }

/* 04 services and the how-we-work appendix: one panel per slide, text beside its picture */
.page.split { align-content: center }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 5cqi; align-items: center; min-width: 0; padding: 1cqi 0 }
.panel .step { font: 700 clamp(12px, 1.2cqi, 15px)/1.3 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--g2); margin: 0 0 1.6cqi }
.panel h2, .panel h3 { margin: 0 0 2cqi; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; font-size: clamp(22px, 3.4cqi, 42px); text-wrap: balance }
.panel p { margin: 0; color: var(--g3); font-size: clamp(15px, 1.6cqi, 20px); line-height: 1.5; max-width: 40ch }
.svc-vis { display: grid; justify-items: center; padding: 2cqi }
.svc-vis .deckslide, .svc-vis .demo { width: 100% } .svc-vis .brandsheet { width: 46% }
@media (max-width: 700px) { .panel .step { margin-bottom: 10px } .panel h2 { margin-bottom: 14px } .panel { grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-content: start } .svc-vis { padding: 6px 2px 10px } .svc-vis .brandsheet { width: 62% } }
/* Panel 1: the same traction story as three decks, cascading back to front */
.svc-vis.decks { position: relative; display: block; aspect-ratio: 16 / 12; padding: 0; width: 100% }
.decks .piece { position: absolute; width: 58% }
.panel .types { list-style: none; margin: 0 0 1.6cqi; padding: 0; display: grid; gap: .8cqi; color: var(--g3); font-size: clamp(15px, 1.6cqi, 20px); line-height: 1.45 }
.panel .types b { color: var(--ink) }
@media (max-width: 700px) { .panel .types { gap: 6px; margin-bottom: 12px } }
/* 06 how we work: the method's visuals, in the house greys, with Plainsight as the worked example */
.mvis { position: relative; width: 100% }
.mcard { position: absolute; container-type: inline-size; background: var(--white); border: 1px solid var(--line); box-shadow: 0 1.4cqi 3cqi -1.4cqi rgba(0,0,0,.35); color: var(--ink) }
.mcard .bt { display: block; font: 800 4cqi/1.2 var(--sans); font-stretch: 112%; margin-bottom: 4cqi }
/* Panel 1: the grounding brief and the field */
.ground { aspect-ratio: 16 / 12 }
.ground .brief { left: 0; top: 2%; width: 57%; padding: 3.4%; rotate: -2deg; display: grid; gap: 2.4cqi }
.ground .brief .bt { margin-bottom: 1cqi }
.ground .row { display: grid; grid-template-columns: 20cqi 1fr; gap: 3cqi; font: 400 3.6cqi/1.35 var(--sans); color: var(--g3); padding-top: 2.4cqi; border-top: 1px solid var(--line) }
.ground .row i { font-style: normal; font-weight: 700; color: var(--ink) }
.ground .row small { color: var(--g2) }
.ground .row.q span { color: #5b4dd8; font-weight: 600 } .ground .row.q i { color: #5b4dd8 }
.ground .field { right: 3%; bottom: 1%; width: 40%; padding: 3%; rotate: 3deg }
.ground .map { position: relative; display: block; aspect-ratio: 1; border-left: 1px solid var(--g1); border-bottom: 1px solid var(--g1); margin: 0 0 9cqi }
.ground .map::before, .ground .map::after { content: ""; position: absolute; background: var(--line) } .ground .map::before { left: 50%; top: 0; bottom: 0; width: 1px } .ground .map::after { top: 50%; left: 0; right: 0; height: 1px }
.ground .ax { position: absolute; font: 600 4.6cqi/1 var(--sans); color: var(--g2); white-space: nowrap }
.ground .x1 { left: 0; bottom: -8cqi } .ground .x2 { right: 0; bottom: -8cqi }
.ground .y1 { left: 2cqi; bottom: 2cqi } .ground .y2 { left: 2cqi; top: 2cqi }
.ground .dot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1; display: inline-flex; align-items: center; gap: 1.6cqi; font: 600 4.6cqi/1 var(--sans); color: var(--g3); white-space: nowrap }
.ground .dot::before { content: ""; width: 3.4cqi; aspect-ratio: 1; border-radius: 50%; background: var(--g1) }
/* Panel 2: the arc */
.arcvis { display: grid; align-items: center }
.arc { width: 100%; height: auto; overflow: visible; font-family: var(--sans) }
.arc path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round }
.arc circle { fill: var(--white); stroke: var(--ink); stroke-width: 2 } .arc circle.k { fill: var(--ink) }
.arc text { font-size: 11px; font-weight: 600; fill: var(--g3) } .arc text.k { font-weight: 800; fill: var(--ink) }
.arc .call line, .arc .drop { stroke: var(--g1); stroke-width: 1 } .arc .drop { stroke-dasharray: 2 3 } .arc .call rect { fill: #f2ff2e }
.arc .call text.v { fill: #121212; font-size: 11px; font-weight: 700 } .arc .call text.s { fill: #5c5f58; font-size: 9.5px; font-weight: 500 }
/* Panel 3: one system, then the timeline */
.sys { display: grid; gap: 4cqi; align-content: center }
.sys-row { display: grid; grid-template-columns: 1.25fr 1.05fr .52fr; gap: 2.4cqi; align-items: end }
.sys-row .piece { width: 100% }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2cqi; position: relative }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: max(5px, .55cqi); height: 1.5px; background: var(--g1) }
.tl li { position: relative; display: grid; gap: .4cqi; padding-top: max(18px, 2cqi); font-size: clamp(11px, 1.15cqi, 14px); line-height: 1.3; color: var(--g2) }
.tl li::before { content: ""; position: absolute; left: 0; top: 0; width: max(12px, 1.1cqi); aspect-ratio: 1; border-radius: 50%; background: var(--white); border: 2px solid var(--g1); box-sizing: border-box }
.tl li.you::before { background: var(--ink); border-color: var(--ink) }
.tl b { color: var(--ink); font-weight: 700 }
@media (max-width: 700px) { .tl { grid-template-columns: minmax(0, 1fr); gap: 10px } .tl::before { display: none } .tl li { padding: 0 0 0 22px } .tl li::before { top: 2px } }
/* Thumbnails show every slide in its finished state: no dimmed panels, nothing waiting to animate in */
.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 }

/* 02 proof: four raises in a row */
.proof.four { grid-template-columns: repeat(4, minmax(0, 1fr)) } .proof.four b { font-size: clamp(34px, 7cqi, 88px) }
@media (max-width: 700px) { .proof.four { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
#s2 .kicker, .work .kicker { margin: 0 0 1.2cqi }
/* 03 the work: a heading column, then six stacks in two rows */
.work { grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); column-gap: 4cqi; align-items: center }
.work-head .lede { margin-top: 1.6cqi; font-size: clamp(14px, 1.45cqi, 18px) }
.refs.six { align-self: center; row-gap: 2.4cqi; column-gap: 2.4cqi }
.refs.six .stack { aspect-ratio: 16 / 10.5 }
.refs.six .ref { gap: .6cqi } .refs.six .ref h3 { font-size: clamp(13px, 1.25cqi, 16px) } .refs.six .ref p { font-size: clamp(12px, 1.05cqi, 14px) }
.stack.ph { cursor: default }
.stack.ph .blank { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--canvas); border: 1.5px dashed var(--g1); font: 700 max(10px, 1.2cqi)/1 var(--sans); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; color: var(--g2) }
.ref.ph h3, .ref.ph p { color: var(--g2) }
@media (max-width: 700px) { .work { grid-template-columns: minmax(0, 1fr) } .refs.six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-top: 20px } }
/* 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) }
/* Pricing: the three tiers share rows, so the prices line up even when a tier name wraps */
#s5 .cols { grid-template-rows: auto auto auto; align-content: end; row-gap: 0 }
#s5 .cols > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start }
#s5 .cols h3 { align-self: end }
@media (max-width: 700px) { #s5 .cols { grid-template-rows: none } #s5 .cols > div { grid-template-rows: none; grid-row: auto } }
.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%, #7eeac4 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%, #7eeac4 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: 50; background: var(--canvas); 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 .hero, body.show .toolbar, body.show .rail, body.show footer { display: none }
body.show .win { background: none; border: 0; box-shadow: 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% 9.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 { border: 1px solid var(--g1); 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 }
.page.arrive .proof > :nth-child(n+4), .page.arrive .refs > :nth-child(n+4) { animation-delay: .62s }
.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 }
  .contact .mail { font-size: 16px }
}

/* ---------- Design review fixes (2026-10-16) ---------- */
/* 02: four figures that fit their columns, centred in the slide */
.proof.four b { font-size: clamp(30px, 5.2cqi, 64px) }
#s2 .proof { align-self: center }
/* 05 and 07: content centred, not parked above the footer */
#s5 .cols { align-self: center }
.contact { align-content: center; gap: 5cqi }
.contact .who { margin: 0 0 4px; color: var(--g2); font-size: clamp(14px, 1.4cqi, 17px) }
/* 05: the recommended tier, and the one line under the prices */
.cols h3 .rec { display: table; margin: 8px 0 0; padding: 4px 7px; border-radius: 3px; background: var(--ink); color: var(--white);
  font: 700 max(10px, .9cqi)/1 var(--sans); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase }
#s5 .addons { align-self: end; margin-top: 2cqi }
/* 05: the add-on reads as optional, not as a third tier */
#s5 .addon { padding-left: 2.4cqi; border-left: 1.5px dashed var(--g1) } #s5 .addon h3, #s5 .addon .price { color: var(--g3) }
@media (max-width: 700px) { #s5 .addon { padding-left: 0; border-left: 0 } }
/* 03: placeholders stay quiet until the decks arrive */
.stack.ph .blank { background: transparent; border: 1px dashed var(--line); color: var(--g1) }
.ref.ph h3, .ref.ph p { color: var(--g1) }
/* Compact hero, still centred, so slide 1 starts higher */
.hero { gap: 10px; padding: 30px 16px 22px }
.hero .row { margin-top: 2px }
/* The opened stack: one slide at a time, as large as the screen allows */
.spread .grid { display: block; max-width: min(1320px, calc((100vh - 150px) * 16 / 9)) }
.spread .grid .s:not(.on) { display: none }
/* Phones: a hint in the empty space under a portrait slide; in landscape the bar shrinks so the slide gets the height */
.spread .turn { display: none }
@media (max-width: 700px) and (orientation: portrait) { .spread .turn { display: block; max-width: 30ch; margin: 28px auto 0; text-align: center; color: var(--g3); font-size: 14px } }
@media (max-height: 500px) and (orientation: landscape) {
  .spread { padding-top: 10px; padding-bottom: 10px }
  .spread .bar { margin-bottom: 10px; flex-wrap: nowrap }
  .spread .sub { display: none }
  .spread .tools .btn { padding: 8px 12px; min-height: 0 }
  .spread .grid { max-width: min(1320px, calc((100vh - 76px) * 16 / 9)) }
}
.spread .count { font: 700 13px/1 var(--sans); font-stretch: 125%; color: var(--g3); min-width: 44px; text-align: center; align-self: center }
/* Tablets and small laptops: a slide grows to fit its content instead of clipping it */
@media (min-width: 701px) and (max-width: 1100px) {
  .deck { container-type: inline-size }
  .deck > .page.split, .deck > .page.work { aspect-ratio: auto; min-height: calc(100cqi * 9 / 16); grid-template-rows: auto auto }
}
/* Phones: 44px targets, and the row controls get their own line in the footer */
@media (max-width: 700px) {
  .btn { min-height: 44px }
  .hero { padding: 18px 16px 14px; gap: 8px }
  .contact .mail { display: inline-block; padding-block: 10px }
  footer a { display: inline-block; padding: 12px 0 }
  .cols h3 .rec { display: block; width: fit-content; margin: 8px 0 0 }
  .hero .mark.big { transform: none; zoom: .6 } .hero .word { font-size: 19px }
  .toolbar { padding-block: 4px }
  #s5 .cols { gap: 28px } #s5 .cols > div + div { border-top: 1px solid var(--line); padding-top: 24px }
}


/* ---------- 06: research agents and the review panel ---------- */
/* The scout's feed: a dark log card, lines arriving one by one */
.ground .feed { left: 0; top: 2%; width: 58%; padding: 3.4%; rotate: -2deg; background: #1b1b1a; border-color: #1b1b1a; color: #ecebe6 }
.feed .bt { display: flex; align-items: center; gap: 2.4cqi; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-stretch: 100%; font-size: 3.8cqi; color: #ecebe6 }
.feed .live { width: 2.4cqi; aspect-ratio: 1; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 1cqi rgba(62,207,142,.18) }
.feed ol, .review ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqi }
.feed li { display: grid; grid-template-columns: 4cqi 1fr; gap: 2cqi; font: 400 3.5cqi/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #d6d5cf }
.feed li i { font-style: normal; color: #3ecf8e } .feed li small { display: block; color: #8d8c86 }
.feed li.q i, .feed li.q span { color: #f0c873 }
.mcard .when { display: block; margin-top: 4cqi; padding-top: 2.6cqi; border-top: 1px solid rgba(255,255,255,.12); font: 400 3.1cqi/1.3 var(--sans); color: #8d8c86 }
.motion .panel.seen .feed li { animation: logline .45s ease both } .motion .panel.seen .feed li:nth-child(2) { animation-delay: .5s }
.motion .panel.seen .feed li:nth-child(3) { animation-delay: 1s } .motion .panel.seen .feed li:nth-child(4) { animation-delay: 1.5s } .motion .panel.seen .feed li:nth-child(5) { animation-delay: 2.1s }
.motion .feed .live { animation: pulse 1.6s ease-in-out infinite }
@keyframes logline { from { opacity: 0; translate: -2cqi 0 } }
@keyframes pulse { 50% { opacity: .35 } }
/* The review panel: findings, each with its call */
.panelvis { display: grid; place-items: center }
.review { position: relative; width: 92%; padding: 4%; rotate: -1deg }
.review .bt { margin-bottom: 3cqi }
.review li { display: grid; grid-template-columns: 16cqi 1fr auto; gap: .8cqi 2.4cqi; align-items: baseline; padding-top: 2.4cqi; border-top: 1px solid var(--line); font: 400 3cqi/1.35 var(--sans); color: var(--g3) }
.review li em { font-style: normal; font-weight: 700; color: var(--ink); font-size: 2.6cqi; text-transform: uppercase; letter-spacing: .06em }
.review li b { font: 700 2.5cqi/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 1cqi 1.6cqi; border-radius: .6cqi }
.review li b.ok { background: var(--ink); color: #fff } .review li b.no { background: var(--canvas); color: var(--g3); border: 1px solid var(--g1) }
.review li small { grid-column: 2 / -1; color: var(--g2); font-size: 2.7cqi }
.review .when { border-top-color: var(--line); color: var(--g2) }
.motion .panel.seen .review li b { animation: stamp .35s cubic-bezier(.3,1.6,.5,1) both } .motion .panel.seen .review li:nth-child(2) b { animation-delay: .4s }
.motion .panel.seen .review li:nth-child(3) b { animation-delay: .8s } .motion .panel.seen .review li:nth-child(4) b { animation-delay: 1.2s }
@keyframes stamp { from { opacity: 0; scale: 1.6 } }

/* ---------- Appendix ---------- */
/* The divider: a dark section slide, like a real deck's */
.page.divider { background: var(--ink); color: var(--white); align-content: center; gap: 1.6cqi }
.page.divider .kicker { color: var(--g1); margin: 0 }
.page.divider h2 { font-size: clamp(40px, 8cqi, 100px) }
.page.divider .lede { color: var(--g1) }
.page.divider .foot { border-top-color: rgba(255,255,255,.18); color: var(--g1) } .page.divider .foot .logo { color: var(--white) }
/* A1: four stages side by side, each with a sketch of the slide it leads with */
.page.stages { grid-template-rows: auto minmax(0, 1fr); row-gap: 3cqi }
.page.stages .kicker { margin: 0 0 1.2cqi }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6cqi; align-self: center }
.stage h3 { margin: 1.6cqi 0 1cqi; font-weight: 800; font-stretch: 112%; font-size: clamp(16px, 1.9cqi, 24px) }
.stage dl { margin: 0; display: grid; gap: .3cqi }
.stage dt { font: 700 clamp(10px, .95cqi, 12px)/1.3 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .07em; color: var(--g2); margin-top: 1cqi }
.stage dd { margin: 0; color: var(--g3); font-size: clamp(14px, 1.35cqi, 17px); line-height: 1.4 }
.stage dd:first-of-type { color: var(--ink); font-weight: 700 }
/* The sketches: each stage's lead slide, drawn small in Plainsight's colours */
.sk-frame { display: grid; aspect-ratio: 16 / 9; background: #fbfbf7; border: 1px solid var(--line); padding: 10%; container-type: inline-size; overflow: hidden }
.sk { display: block; width: 100%; height: 100% }
.sk.team { display: flex; align-items: center; gap: 6cqi }
.sk.team i { width: 16cqi; aspect-ratio: 1; border-radius: 50%; background: #8d9087 } .sk.team i:nth-child(2) { opacity: .7 } .sk.team i:nth-child(3) { opacity: .45 }
.sk.team b { flex: 1; height: 5cqi; border-radius: 3cqi; background: #f2ff2e }
.sk.pull svg { width: 100%; height: 100%; overflow: visible } .sk.pull path { fill: none; stroke: #8d9087; stroke-width: 4; vector-effect: non-scaling-stroke }
.sk.cohorts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqi }
.sk.cohorts i { background: #8d9087; opacity: var(--o) }
.sk.scale { display: flex; align-items: flex-end; gap: 4cqi } .sk.scale i { flex: 1; height: var(--h); background: #8d9087 } .sk.scale i:last-child { background: #f2ff2e }
@media (min-width: 701px) and (max-width: 1100px) { .deck > .page.stages { aspect-ratio: auto; min-height: calc(100cqi * 9 / 16); grid-template-rows: auto auto } }
@media (max-width: 700px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin-top: 20px } .page.divider { min-height: 60vw } }

/* ---------- Easter eggs ---------- */
.btn[hidden] { display: none }
/* The slideshow letterbox is dark all the way to the edges */
html:has(body.show) { background: #111 }
/* The window's traffic lights: grey until you reach for them, like an unfocused window */
.toolbar .dots { width: auto; gap: 7px }
.toolbar .dots button, .toolbar .dots i { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--g1) } .toolbar .dots button { cursor: pointer }
.toolbar .dots:hover > :nth-child(1) { background: #ff5f57 }
.toolbar .dots:hover > :nth-child(2) { background: #febc2e }
.toolbar .dots:hover > :nth-child(3), .toolbar .dots button:focus-visible { background: #28c840 }
.toolbar .tools-r { display: flex; gap: 8px; align-items: center }
.toolbar .fname { outline: none; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; cursor: text }
.toolbar .fname:hover { background: var(--canvas) } .toolbar .fname:focus { background: var(--canvas); box-shadow: 0 0 0 2px var(--ink) }
/* The rail: thumbnails can be dragged; a new slide button at the end */
.thumb { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none }
/* While reordering: the picked-up slide leaves an empty slot, and a ghost copy follows the pointer */
.thumb.slot .frame { outline: 2px dashed var(--g1) !important; outline-offset: 0; background: var(--canvas); box-shadow: none }
.thumb.slot .frame .mini { visibility: hidden } .thumb.slot .no { visibility: hidden }
.frame.ghost { position: fixed; z-index: 70; pointer-events: none; display: block; aspect-ratio: auto; overflow: hidden; background: var(--white); border-radius: 3px;
  outline: 2px solid var(--ink); box-shadow: 0 18px 40px -14px rgba(0,0,0,.45); scale: 1.06; rotate: 1.5deg; opacity: .95 }
.frame.ghost .mini { position: absolute; top: 0; left: 0; width: 1000px; transform: scale(var(--k)); transform-origin: top left }
body.reordering, body.reordering * { cursor: grabbing !important; user-select: none }
.addslide { margin: 2px 0 0 26px; padding: 10px; border: 1.5px dashed var(--g1); border-radius: 3px; background: none; color: var(--g2); font: 700 12px/1 var(--sans); font-stretch: 110%; cursor: pointer; text-align: center }
.addslide:hover:not(:disabled) { border-color: var(--ink); color: var(--ink) } .addslide:disabled { opacity: .4; cursor: default }
/* A blank slide, with placeholders like any deck app's */
.page.blank { align-content: center; gap: 3cqi }
.page.blank .ph-title { justify-self: stretch; padding: 3cqi; border: 1.5px dashed var(--g1); background: none; color: var(--g2); text-align: left; cursor: pointer;
  font: 800 clamp(22px, 3.8cqi, 46px)/1 var(--sans); font-stretch: 125%; text-transform: uppercase }
.page.blank .ph-title:hover { border-color: var(--ink); color: var(--ink) }
.page.blank .ph-text { margin: 0; padding: 2cqi 3cqi; border: 1.5px dashed var(--line); color: var(--g1); font-size: clamp(15px, 1.6cqi, 20px) }
.page.blank .lede a { color: var(--ink); font-weight: 700 }
/* The toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; translate: -50% 12px; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 8px;
  background: var(--ink); color: var(--white); font: 600 14px/1.4 var(--sans); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s }
.toast.on { opacity: 1; translate: -50% 0 }
body.show .toast { bottom: 56px }
/* Speaker notes in the slideshow */
.notes, .notes-btn { display: none }
body.show .notes-btn { display: inline-flex; position: fixed; top: 12px; right: 210px; z-index: 40 }
body.show.notes-on .notes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: 120px; padding: 0 max(24px, 6vw);
  background: #1b1b1a; color: #f2f2ef; border-top: 1px solid #333 }
.notes .timer { font: 800 28px/1 var(--sans); font-stretch: 125%; font-variant-numeric: tabular-nums; color: #9a9a96 }
.notes p { margin: 0; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.4; max-width: 70ch }
body.show.notes-on .page { width: min(100vw, calc((100vh - 120px) * 16 / 9)); bottom: 120px }
body.show.notes-on .counter { bottom: 134px }
@media (max-width: 700px) {
  body.show .notes-btn { top: auto; bottom: 12px; right: 12px }
  /* The work slide is taller than a phone: its rows size to content, so the cards stay under the heading and the footer comes last */
  body.show #s3.work { grid-template-rows: auto auto auto; align-content: start }
  body.show.notes-on .notes { height: auto; padding: 14px 16px 64px; grid-template-columns: minmax(0, 1fr); gap: 6px }
  .notes .timer { font-size: 18px }
}

/* The desktop under the deck window, with a dock to bring it back */
.desktop { position: fixed; inset: 0; z-index: 15; pointer-events: none }
.desktop > * { pointer-events: auto }
.desktop[hidden] { display: none }
body.minimised { overflow: hidden }
.win.lifted { position: relative; z-index: 16 }
/* The contact, written on the desktop itself */
.desk-text { opacity: 0; position: absolute; left: 50%; top: 58%; translate: -50% -50%; width: min(760px, calc(100vw - 32px)); text-align: center; display: grid; gap: 14px; justify-items: center }
.desktop.ready .desk-text { opacity: 1; transition: opacity .3s ease }   /* fades in, leaves at once */
.desk-text p { margin: 0; font: 800 clamp(28px, 4.4vw, 56px)/1 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance }
.desk-text a { font: 700 clamp(17px, 1.8vw, 22px)/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px }
.dock { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px 6px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,.08); border-radius: 20px }
.dock-app { position: relative; display: grid; justify-items: center; gap: 5px }
.dock-item { width: 54px; height: 54px; border: 0; padding: 0; border-radius: 13px; background: var(--white); display: grid; place-items: center; cursor: pointer; color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: translate .2s }
.dock-item:hover, .dock-item:focus-visible { translate: 0 -5px }
.dock-item svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.dock-item .mark.big { zoom: .52 }
/* The app's name, above it on hover, as on a real dock */
.dock-item::after { content: attr(data-label); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; padding: 5px 9px; border-radius: 6px;
  background: rgba(30,30,28,.86); color: #fff; font: 600 12px/1 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s }
.dock-item:hover::after, .dock-item:focus-visible::after { opacity: 1; translate: -50% 0 }
.dock .run { width: 5px; height: 5px; border-radius: 50%; background: var(--ink) }
.desktop.quit .run { opacity: 0 }
@media (max-width: 480px) { .dock { gap: 6px; padding: 6px 8px 5px } .dock-item { width: 46px; height: 46px; border-radius: 11px } .dock-item svg { width: 26px; height: 26px } .dock-item .mark.big { zoom: .44 } }
/* Desktop apps open in the deck window's own frame: same chrome, same place, a slide-sized stage */
.dwin { position: absolute; z-index: 2; background: #f6f6f4; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px -28px rgba(0,0,0,.3) }
.dwin[hidden] { display: none }
.dwin-bar { position: relative; display: flex; align-items: center; justify-content: center; padding: 9px 14px; min-height: 48px; background: var(--white); border-bottom: 1px solid var(--line);
  font: 700 13px/1 var(--sans); font-stretch: 110%; color: var(--g3) }
.dwin-bar .dots { position: absolute; left: 14px; display: flex; gap: 7px }
.dwin-bar .dots i, .dwin-x { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--g1) }
.dwin-x { background: #ff5f57; cursor: pointer }
.dwin-body { padding: 24px }
.dwin-stage { width: 100%; aspect-ratio: 16 / 9; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 12px 32px -20px rgba(0,0,0,.3);
  display: grid; place-content: center; justify-items: center; gap: 14px; container-type: inline-size; padding: 4cqi }
.dwin-note { margin: 0; font-size: clamp(13px, 1.4cqi, 16px); color: var(--g3); text-align: center; max-width: 46ch }
.dock { z-index: 4 }

.dwin-stage { max-height: calc(100vh - var(--dwin-top, 190px) - 180px) }
.dwin-stage.towers { min-height: 380px }
@media (max-width: 700px) { .dwin-body { padding: 16px 12px 24px } .dwin-stage { width: 100%; aspect-ratio: auto; min-height: 420px; padding: 24px 16px } }
/* Towers, laid out like a slide: heading left, counter right, the piles across the bottom */
.dwin-stage.towers { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; place-content: stretch; justify-items: stretch; gap: 2cqi 4cqi; padding: 5.5% 6.5% 4% }
.towers .kicker { margin: 0 0 1.2cqi }
.towers h2 { margin: 0; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; font-size: clamp(22px, 3.4cqi, 44px) }
.t-rule { margin: 1.2cqi 0 0; color: var(--g3); font-size: clamp(13px, 1.4cqi, 17px) }
.t-count { display: grid; justify-items: end; align-content: start; gap: .4cqi }
.t-count b { font-weight: 800; font-stretch: 125%; font-size: clamp(34px, 5.4cqi, 68px); line-height: 1; font-variant-numeric: tabular-nums }
.t-count span { font-size: clamp(12px, 1.15cqi, 14px); color: var(--g2) }
.t-reset { margin-top: .8cqi; padding: 0; border: 0; background: none; font: 700 clamp(12px, 1.15cqi, 14px)/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.towers .hanoi { grid-column: 1 / -1; align-self: center; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqi }
.t-note { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: clamp(12px, 1.2cqi, 15px); color: var(--g2) }
.peg { position: relative; height: clamp(150px, 24cqi, 300px); display: flex; flex-direction: column-reverse; align-items: center; gap: .5cqi; padding: 0 0 1.2cqi; border: 0; border-radius: 8px;
  background: linear-gradient(var(--line), var(--line)) center bottom / 100% 2px no-repeat; cursor: pointer; transition: background-color .15s }
.peg:hover, .peg.holding { background-color: var(--canvas) }
/* Each disc is a small slide: a card with a title line and a text line */
.disc { position: relative; display: block; height: clamp(22px, 3.2cqi, 38px); width: calc(var(--w) * 23%); background: var(--white); border: 1.5px solid var(--ink); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08); transition: translate .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s }
.disc i { position: absolute; left: 10%; height: 2px; border-radius: 2px; background: var(--g1) } .disc i:first-child { top: 30%; width: 38%; background: var(--g2) } .disc i + i { top: 58%; width: 60% }
.disc[style*="--w:4"] { background: var(--ink) } .disc[style*="--w:4"] i { background: var(--g3) } .disc[style*="--w:4"] i:first-child { background: var(--g1) }
.disc.up { translate: 0 -2.4cqi; box-shadow: 0 14px 22px -12px rgba(0,0,0,.45) }
.hanoi.won .peg:last-child .disc { animation: winhop .5s cubic-bezier(.3,1.6,.5,1) both } .hanoi.won .peg:last-child .disc:nth-child(2) { animation-delay: .06s }
.hanoi.won .peg:last-child .disc:nth-child(3) { animation-delay: .12s } .hanoi.won .peg:last-child .disc:nth-child(4) { animation-delay: .18s }
@keyframes winhop { 40% { translate: 0 -1.4cqi } }
@media (max-width: 700px) { .dwin-stage.towers { grid-template-columns: 1fr; padding: 24px 16px } .t-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px } .t-count b { font-size: 34px } .t-reset { margin: 0 0 0 auto } .peg { height: 170px } }
.dock-item svg .fill { fill: currentColor }
/* A slide moved by a reorder shows its finished state; Slideshow can still play it on purpose */
.page.settled, .page.settled * { animation: none !important }
/* 07 pricing as plan cards: price, timing, what's included, a button */
#s5 { grid-template-rows: auto minmax(0, 1fr); row-gap: 2.4cqi }
#s5 .cols.plans { grid-template-rows: none; align-content: center; align-items: stretch; gap: 2cqi; row-gap: 0; align-self: stretch }
#s5 .plans > .plan { position: relative; display: flex; flex-direction: column; grid-row: auto; padding: 2.2cqi 2.2cqi 2cqi; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white) }
#s5 .plan h3 { align-self: auto; margin: 0 0 .8cqi; font-size: clamp(15px, 1.6cqi, 20px) }
#s5 .plan .price { margin: 0; font-size: clamp(26px, 3.4cqi, 44px) }
#s5 .plan .per { margin: .4cqi 0 1.2cqi; font-size: clamp(12px, 1.15cqi, 14px); color: var(--g2) }
#s5 .plan .lead { margin: 0 0 1cqi; font-weight: 700; color: var(--ink); font-size: clamp(13px, 1.3cqi, 16px) }
#s5 .ticks { list-style: none; margin: 0 0 1.6cqi; padding: 1.2cqi 0 0; border-top: 1px solid var(--line); display: grid; gap: .7cqi; flex: 1; align-content: start }
#s5 .ticks li { position: relative; padding-left: 1.6em; font-size: clamp(12px, 1.2cqi, 15px); line-height: 1.35; color: var(--g3) }
#s5 .ticks li::before { content: ""; position: absolute; left: .1em; top: .3em; width: .8em; height: .45em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; color: var(--ink) }
#s5 .plan .btn { justify-content: center; min-height: 40px }
#s5 .plan.rec { background: var(--ink); border-color: var(--ink); color: var(--white) }
#s5 .plan.rec .per, #s5 .plan.rec .ticks li { color: var(--g1) } #s5 .plan.rec .lead, #s5 .plan.rec .ticks li::before { color: var(--white) }
#s5 .plan.rec .ticks { border-top-color: rgba(255,255,255,.18) }
#s5 .plan.rec .btn { background: var(--white); color: var(--ink); border-color: var(--white) } #s5 .plan.rec .btn:hover { background: var(--g1) }
#s5 .plan .badge { position: absolute; top: -.9em; left: 2.2cqi; padding: .35em .7em; border-radius: 99px; background: #d9a441; color: var(--ink); font: 700 clamp(10px, .95cqi, 12px)/1 var(--sans); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase }
#s5 .plan.addon { border-style: dashed; border-color: var(--g1); background: transparent }
#s5 .plan.addon .price { color: var(--g3) }
@media (min-width: 701px) and (max-width: 1100px) { .deck > #s5 { aspect-ratio: auto; min-height: calc(100cqi * 9 / 16); grid-template-rows: auto auto } }
@media (max-width: 700px) { #s5 .cols.plans { gap: 18px; margin-top: 18px } #s5 .plans > .plan { padding: 20px; border-top-width: 1.5px !important; padding-top: 20px !important } #s5 .plan .ticks { gap: 8px } }
/* 02: the investors behind the raises, as plain names, not tied to any figure */
#s2 { grid-template-rows: auto 1fr auto; row-gap: 3cqi }
.backers { margin: 0; padding-top: 1.6cqi; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: .6cqi 1.2cqi;
  font-size: clamp(14px, 1.5cqi, 19px); color: var(--g3) }
.backers span { width: 100%; font: 700 clamp(11px, 1cqi, 13px)/1.3 var(--sans); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--g2) }
.backers { align-items: center; gap: 1.4cqi 3.4cqi }
/* One tone for every logo, so none shouts louder than the others */
.backers img { height: clamp(16px, 1.9cqi, 26px); width: auto; filter: grayscale(1) brightness(.35) contrast(1.2); opacity: .85 }
.backers .logo-citi { height: clamp(18px, 2.2cqi, 30px) } .backers .logo-new-york-life { height: clamp(26px, 3cqi, 40px) }
.backers .logo-firstmark { height: clamp(11px, 1.3cqi, 17px) }
@media (max-width: 700px) { .backers { gap: 14px 22px; margin-top: 18px; padding-top: 14px } }
/* Knowledge base: the archetype overview and one slide per archetype */
.page.archs { grid-template-rows: auto minmax(0, 1fr); row-gap: 2.4cqi }
.arch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqi; align-self: center }
.arch { display: grid; grid-template-columns: auto 1fr; gap: .3cqi 1cqi; padding: 1.4cqi 1.6cqi; border: 1.5px solid var(--ink); border-radius: 6px; color: var(--ink); text-decoration: none; background: var(--white); transition: background .15s }
a.arch:hover { background: var(--canvas) }
.arch.soon { border-color: var(--line); color: var(--g2) }
.arch-n { grid-row: span 2; font: 800 clamp(12px, 1.3cqi, 16px)/1.2 var(--sans); font-stretch: 125%; color: var(--g2) }
.arch b { font-weight: 800; font-stretch: 112%; font-size: clamp(14px, 1.5cqi, 19px) }
.arch-q { font-size: clamp(12px, 1.2cqi, 15px); color: var(--g3); line-height: 1.35 } .arch.soon .arch-q { color: var(--g1) }
.kb { margin: 1.6cqi 0 0; display: grid; gap: .3cqi; max-width: 44ch }
.kb dt { font: 700 clamp(10px, .95cqi, 12px)/1.3 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .07em; color: var(--g2); margin-top: 1.2cqi }
.kb dd { margin: 0; color: var(--g3); font-size: clamp(14px, 1.45cqi, 18px); line-height: 1.45 }
.kb-ex { display: grid; gap: 1cqi; justify-items: stretch }
.kb-ex .piece, .kb-ex .kb-clone .piece { width: 100% }
.kb-cap { font: 700 clamp(10px, .95cqi, 12px)/1 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .07em; color: var(--g2); justify-self: start }
@media (max-width: 700px) { .arch-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px } .arch { padding: 12px 14px } }
@media (min-width: 701px) and (max-width: 1100px) { .deck > .page.archs { aspect-ratio: auto; min-height: calc(100cqi * 9 / 16); grid-template-rows: auto auto } }
/* A1: the team, two people and a bench of agents */
.team { display: grid; gap: 0; align-content: center }
.tm-people { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqi; padding: 0 4% }
.tm-person { display: flex; align-items: center; gap: 1.4cqi; padding: 1.6cqi; background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 0 10px 22px -16px rgba(0,0,0,.35) }
.tm-av { flex: none; display: grid; place-items: center; width: 4.6cqi; height: 4.6cqi; border-radius: 50%; background: var(--ink); color: var(--white) }
.tm-av svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.tm-person b { display: block; font-weight: 800; font-stretch: 112%; font-size: clamp(13px, 1.5cqi, 18px) }
.tm-person small { display: block; font-size: clamp(11px, 1.1cqi, 14px); color: var(--g3); margin-top: .2cqi }
.tm-lines { width: 100%; height: 4cqi; overflow: visible } .tm-lines path { fill: none; stroke: var(--g1); stroke-width: 1.5; vector-effect: non-scaling-stroke }
.tm-bench { padding: 1.6cqi; border-radius: 12px; background: #1b1b1a; color: #ecebe6 }
.panel .tm-label { max-width: none; margin: 0 0 1.2cqi; font: 700 clamp(10px, .95cqi, 12px)/1 var(--sans); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: #8d8c86 }
.tm-agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqi }
.tm-agent { display: grid; gap: .5cqi; align-content: start; padding: 1.2cqi; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1) }
.tm-agent b { font-weight: 800; font-stretch: 125%; font-size: clamp(13px, 1.6cqi, 20px); line-height: 1.1; letter-spacing: .01em }
.tm-agent em { font-style: normal; font-weight: 600; font-size: clamp(11px, 1.05cqi, 13px); color: #d6d5cf }
.tm-agent small { font: 400 clamp(10px, .95cqi, 12px)/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #a5a49e }
.tm-dot { width: .9cqi; height: .9cqi; min-width: 7px; min-height: 7px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 .4cqi rgba(62,207,142,.18) }
.motion .panel.seen .tm-dot { animation: pulse 1.6s ease-in-out infinite } .motion .panel.seen .tm-agent:nth-child(2) .tm-dot { animation-delay: .4s }
.motion .panel.seen .tm-agent:nth-child(3) .tm-dot { animation-delay: .8s } .motion .panel.seen .tm-agent:nth-child(4) .tm-dot { animation-delay: 1.2s }
@media (max-width: 700px) { .tm-people { grid-template-columns: 1fr; padding: 0 } .tm-lines { display: none } .tm-bench { margin-top: 12px } .tm-agents { grid-template-columns: 1fr 1fr; gap: 8px } .tm-av { width: 36px; height: 36px } }
/* 02: the raises as a staircase, each step's height set by the round's size; the last step lands */
#s2 .stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 1.4cqi; align-self: end }
#s2 .stairs > div { display: grid; align-content: end; gap: .8cqi; min-width: 0 }
#s2 .stairs b { font-weight: 800; font-stretch: 125%; font-size: clamp(22px, 4cqi, 52px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
#s2 .stairs .bar { height: calc(var(--h) * .17cqi); background: var(--g1); border-radius: 3px 3px 0 0; transform-origin: bottom }
#s2 .stairs > div:last-child .bar { background: var(--ink) }
#s2 .stairs span { font-size: clamp(12px, 1.4cqi, 17px); color: var(--g3) }
.motion #s2.play .stairs .bar { animation: growY .9s cubic-bezier(.2,.8,.2,1) both } .motion #s2.play .stairs > div:nth-child(2) .bar { animation-delay: .12s }
.motion #s2.play .stairs > div:nth-child(3) .bar { animation-delay: .24s } .motion #s2.play .stairs > div:nth-child(4) .bar { animation-delay: .36s }
@media (max-width: 700px) { #s2 .stairs { gap: 8px; margin-top: 20px } #s2 .stairs .bar { height: calc(var(--h) * 1.6px) } #s2 .stairs b { font-size: clamp(15px, 4.6vw, 22px) } }
/* The agents' faces: one silhouette each, one tell-tale detail, eyes that blink now and then */
.tm-face { width: clamp(30px, 4.4cqi, 54px); height: auto; overflow: visible }
.tm-face .detail, .tm-face .mouth { fill: none; stroke: #1b1b1a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.tm-face .eyes { fill: #1b1b1a; transform-box: fill-box; transform-origin: center }
.motion .panel.seen .tm-face .eyes { animation: blink 4.2s infinite }
.motion .panel.seen .face-scout .eyes { animation-delay: 1.1s } .motion .panel.seen .face-ledger .eyes { animation-delay: 2.3s } .motion .panel.seen .face-critic .eyes { animation-delay: 3.2s }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
.motion .panel.seen .tm-agent:hover .tm-face { animation: hop .45s cubic-bezier(.3,1.6,.5,1) }
@keyframes hop { 40% { translate: 0 -4px } }
/* ---------- The storyboard (2026-10-17) ---------- */
/* 02 proof: the funding curve with callouts, headline and logos below */
.curvy { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 2cqi 4cqi; padding-top: 3.5% }
#s2.curvy { grid-template-rows: minmax(0, 1fr) auto; row-gap: 2cqi }
.curvy .cv-chart { margin: 4cqi 0 4cqi }
.cv-chart { grid-column: 1 / -1; position: relative; min-height: 0 }
.cv-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.cv-line, .cv-arrow { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round }
.cv-dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) / 80 * 100%); width: max(11px, 1.6cqi); height: max(11px, 1.6cqi); translate: -50% -50%; border-radius: 50%; background: var(--white); border: 3px solid var(--ink) }
.cv-co { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) / 80 * 100%); display: grid; gap: .2cqi; padding: .9cqi 1.3cqi; background: var(--white); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 0 8px 18px -12px rgba(0,0,0,.35); white-space: nowrap }
.cv-co b { font-weight: 800; font-stretch: 125%; font-size: clamp(16px, 2.6cqi, 34px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.cv-co span { font-size: clamp(11px, 1.2cqi, 15px); color: var(--g3) }
.cv-co.above { translate: -50% calc(-100% - 2cqi) } .cv-co.below { translate: -50% 2cqi } .cv-co.left { translate: calc(-100% - 2.4cqi) -50% }
.cv-co::after { content: ""; position: absolute; width: 1.2cqi; height: 1.2cqi; min-width: 8px; min-height: 8px; background: inherit; border: 1.5px solid var(--ink); border-top: 0; border-left: 0 }
.cv-co.above::after { left: 50%; bottom: -.7cqi; translate: -50% 0; rotate: 45deg } .cv-co.below::after { left: 50%; top: -.7cqi; translate: -50% 0; rotate: 225deg }
.cv-co.left::after { right: -.7cqi; top: 50%; translate: 0 -50%; rotate: -45deg }
.cv-co:last-of-type { background: var(--ink); color: var(--white) } .cv-co:last-of-type span { color: var(--g1) }
.cv-head { align-self: end } .cv-head .kicker { margin: 0 0 1cqi } .cv-head h2 { font-size: clamp(26px, 4.6cqi, 58px) }
.cv-logos { align-self: end } .cv-logos .kicker { margin: 0 0 1cqi }
.cv-grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center; gap: 1.6cqi 2.6cqi }
.cv-grid img { height: clamp(14px, 1.7cqi, 24px); width: auto; filter: grayscale(1) brightness(.35) contrast(1.2) }
.cv-grid .logo-citi { height: clamp(16px, 2cqi, 28px) } .cv-grid .logo-new-york-life { height: clamp(22px, 2.6cqi, 36px) } .cv-grid .logo-firstmark { height: clamp(10px, 1.15cqi, 16px) }
/* The curve draws in left to right: a clip that opens, so the line stays one unbroken stroke */
.motion .curvy.play .cv-chart > svg { animation: reveal 1.6s cubic-bezier(.4,0,.2,1) both } @keyframes reveal { from { clip-path: inset(-10% 100% -10% 0) } to { clip-path: inset(-10% 0 -10% 0) } }
.motion .curvy.play .cv-co, .motion .curvy.play .cv-dot { animation: rise .6s cubic-bezier(.2,.8,.2,1) both }
.motion .curvy.play .cv-co:nth-of-type(1), .motion .curvy.play .cv-dot:nth-of-type(1) { animation-delay: .3s } .motion .curvy.play .cv-co:nth-of-type(2), .motion .curvy.play .cv-dot:nth-of-type(2) { animation-delay: .6s }
.motion .curvy.play .cv-co:nth-of-type(3), .motion .curvy.play .cv-dot:nth-of-type(3) { animation-delay: .9s } .motion .curvy.play .cv-co:nth-of-type(4), .motion .curvy.play .cv-dot:nth-of-type(4) { animation-delay: 1.2s }
@media (min-width: 701px) and (max-width: 1100px) { .deck > #s2 { aspect-ratio: auto; min-height: calc(100cqi * 9 / 16) } #s2 .cv-chart { grid-template-columns: repeat(4, 1fr) !important } }
/* Narrow screens: the curve on its own, the four raises in a grid under it */
@media (max-width: 1100px) { #s2.curvy { grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
  #s2 .cv-chart { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 190px; margin: 12px 0 8px }
  #s2 .cv-chart > svg { height: 180px; bottom: auto } #s2 .cv-dot { top: calc(var(--y) / 80 * 180px) }
  #s2 .cv-co { position: static; translate: none; padding: 10px 12px } #s2 .cv-co::after { display: none } }
@media (max-width: 700px) { .cv-grid { grid-template-columns: repeat(3, auto); gap: 14px 20px } }

/* 03 why both: decks on one side, the demo on the other, a plus between */
.page.both { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 2cqi }
.both-vis { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3cqi }
.both-col { display: grid; justify-items: center; gap: 1.6cqi }
.both-label { font: 800 clamp(13px, 1.5cqi, 19px)/1 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em }
.both-stack { position: relative; width: 78%; aspect-ratio: 16 / 11 }
.both-stack .piece { position: absolute; width: 86% } .both-stack .piece:nth-child(1) { left: 0; top: 0; opacity: .55 } .both-stack .piece:nth-child(2) { left: 7%; top: 9%; opacity: .8 } .both-stack .piece:nth-child(3) { left: 14%; top: 18% }
.both-demo { position: relative; width: 80% } .both-demo .piece { width: 100% }
.play-big { position: absolute; left: 50%; top: 46%; width: 14%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--ink); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5) }
.play-big::after { content: ""; position: absolute; left: 39%; top: 30%; width: 32%; height: 40%; background: var(--white); clip-path: polygon(0 0, 100% 50%, 0 100%) }
.both-plus { position: relative; align-self: stretch; display: grid; place-items: center; width: 1.5px; background: var(--line) }
.both-plus span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 28px; background: var(--white); color: var(--g2); font: 400 20px/1 var(--sans) }
.both-why { max-width: 60ch }
@media (max-width: 700px) { .both-vis { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 20px 0 } .both-plus { width: 100%; height: 1.5px; align-self: auto } .both-stack, .both-demo { width: 92% } }

/* 04 one story, three shapes: send-ahead and slidedoc both feed the presentation */
.svc-vis.shapes { position: relative; display: block; aspect-ratio: 100 / 92; padding: 0; width: 100% }
.shapes .piece { position: absolute }
.shapes .v-send { left: 62%; top: 0; width: 38% } .shapes .v-pres { left: 62%; top: 34.7%; width: 38% } .shapes .v-doc { left: 62%; top: 69.4%; width: 38% }
.shape-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3 }
.shape-arrows path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round }

/* 05 the demo, with a cursor clicking through it */
.svc-vis.demo-vis { position: relative; display: block }
.demo-vis .piece { width: 100% }
.demo-vis .cursor { position: absolute; left: 72%; top: 70%; width: max(22px, 2.6cqi); height: auto; fill: var(--ink); stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)) }
.demo-vis .click-ring { position: absolute; left: 72%; top: 70%; width: 3cqi; height: 3cqi; translate: -40% -40%; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; z-index: 2 }
.motion .panel.seen .demo-vis .cursor { animation: cursorPath 4s ease-in-out infinite } .motion .panel.seen .demo-vis .click-ring { animation: clickRing 4s ease-out infinite }
@keyframes cursorPath { 0% { translate: 6cqi -10cqi } 40%, 100% { translate: 0 0 } }
@keyframes clickRing { 0%, 42% { opacity: 0; scale: .4 } 46% { opacity: .9; scale: .6 } 62%, 100% { opacity: 0; scale: 1.6 } }

/* 06 references: three stacks, and a way to ask for more */
#s3.work { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; row-gap: 2cqi }
#s3 .work-head { display: grid; gap: .6cqi } #s3 .work-head .lede { margin: 0 }
.refs.three { align-self: center; gap: 3cqi }
#s3 .more { margin: 0; justify-self: center; font-weight: 700 } #s3 .more a { text-underline-offset: 4px }
@media (max-width: 700px) { .refs.three { grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 20px 0 } }

/* 07 price: two plans, the recommended one taller, and the add-ons as a list */
#s5 .cols.plans { grid-template-columns: repeat(2, minmax(0, 1fr)) }
#s5 .plan.rec { margin: -1.4cqi 0 }
#s5 .cols > .plan-adds { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; padding-left: 2.4cqi; border-left: 1.5px solid var(--line) }
#s5 .plan-adds h3 { align-self: auto; margin: 0 0 1.4cqi; font-size: clamp(15px, 1.6cqi, 20px) }
.plan-adds ul { list-style: none; margin: 0 0 1.6cqi; padding: 0; display: grid; gap: 1.6cqi; flex: 1; align-content: start }
.plan-adds li { display: grid; gap: .3cqi; font-size: clamp(12px, 1.2cqi, 15px); color: var(--g3); line-height: 1.35 }
.plan-adds li b { color: var(--ink); font-size: clamp(13px, 1.35cqi, 17px) }
.plan-adds .price { font-style: normal; font-weight: 800; font-stretch: 125%; color: var(--ink); font-size: clamp(16px, 1.9cqi, 24px); margin: .4cqi 0 0 }
.plan-adds small { color: var(--g2) } .plan-adds .btn { justify-content: center; min-height: 40px }
@media (max-width: 700px) { #s5 .cols.plans { grid-template-columns: minmax(0, 1fr) } #s5 .plan.rec { margin: 0 } .plan-adds { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line) } }

/* 08 get in touch: send us what you have */
.contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: 5cqi }
.contact-text { display: grid; gap: 1.6cqi; min-width: 0 }
.contact-text .mail { font-size: clamp(18px, 2.5cqi, 32px) } .contact-text .kicker, .contact-text h2, .contact-text .lede { margin: 0 }
.drop { position: relative; display: grid; align-content: center; justify-items: center; gap: 1.2cqi; aspect-ratio: 1 / .9; padding: 3cqi; border: 2px dashed var(--g1); border-radius: 14px; background: var(--canvas) }
.drop-k { font: 700 clamp(10px, 1cqi, 13px)/1 var(--sans); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--g2); margin-bottom: .8cqi }
.drop .file { display: flex; align-items: center; gap: 1cqi; width: 78%; padding: 1.1cqi 1.4cqi; background: var(--white); border: 1.5px solid var(--ink); border-radius: 8px; font: 600 clamp(12px, 1.3cqi, 16px)/1 var(--sans); box-shadow: 0 8px 16px -12px rgba(0,0,0,.4) }
.drop .file:nth-of-type(2) { rotate: -2deg; translate: -4% 0 } .drop .file:nth-of-type(3) { rotate: 1.5deg; translate: 5% 0 } .drop .file:nth-of-type(4) { rotate: -1deg }
.drop .file i { font: 800 clamp(9px, .9cqi, 11px)/1 var(--sans); font-style: normal; letter-spacing: .04em; padding: .5cqi .6cqi; border-radius: 3px; background: var(--ink); color: var(--white) }
.drop .tray { width: 40%; height: 1.4cqi; min-height: 8px; margin-top: 1cqi; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px }
@media (max-width: 700px) { .contact { grid-template-columns: minmax(0, 1fr); row-gap: 24px } .drop { aspect-ratio: auto; padding: 24px 16px } }
@media (min-width: 701px) and (max-width: 1100px) { .deck > .page.both, .deck > #s3, .deck > #s5 { aspect-ratio: auto; min-height: calc(100cqi * 9 / 16) } }
/* Proof callouts: what we made for each raise */
.cv-what { display: flex; flex-wrap: wrap; gap: .5cqi 1cqi; margin-top: .7cqi; padding-top: .7cqi; border-top: 1px solid var(--line) }
.cv-made { display: inline-flex; align-items: center; gap: .4cqi; font-size: clamp(10px, 1.05cqi, 13px); color: var(--g3) }
.cv-made svg { width: clamp(11px, 1.2cqi, 15px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round } .cv-made svg .f { fill: currentColor; stroke: none }
.cv-co:last-of-type .cv-what { border-top-color: rgba(255,255,255,.2) } .cv-co:last-of-type .cv-made { color: var(--g1) }
/* Agent faces, v2: soft shaded blobs, simple features */
.tm-face .body { stroke: none }
.tm-face .shadow { fill: rgba(0,0,0,.35); filter: blur(1px) }
.tm-face .eyes { fill: #1b1b1a; stroke: none } .tm-face .eyes .m { fill: none; stroke: #1b1b1a; stroke-width: 2; stroke-linecap: round }
.tm-face .eyes .hl { fill: #fff }
.tm-face .detail, .tm-face .mouth { display: none }
.both-stack .piece:nth-child(n) { opacity: 1 }
/* A6: a mini slide on each card, all nine live */
.arch-grid { gap: 1.2cqi }
.arch { display: grid; grid-template-columns: 11cqi 1fr; gap: 1.4cqi; align-items: center; padding: 1cqi; text-align: left; font: inherit; cursor: pointer }
.arch-mini { display: block; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line) } .arch-mini > .s { box-shadow: none }
.arch-t { display: grid; grid-template-columns: auto 1fr; gap: .2cqi .8cqi } .arch-t .arch-q { grid-column: 2 }
.arch-open { margin: 0; font-size: clamp(12px, 1.2cqi, 15px); color: var(--g2) }
.arch-open button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.page.archs { grid-template-rows: auto minmax(0, 1fr) auto }
@media (max-width: 700px) { .arch { grid-template-columns: 88px 1fr; padding: 8px } }
/* Review fixes: the divider title fits a phone; the plus clears the demo label; the play button sits in the corner; the email stays on one line */
.page.divider h2 { font-size: clamp(26px, 8cqi, 100px) }
@media (max-width: 700px) { .page.divider h2 { font-size: 8.4vw } .both-vis { gap: 34px } .both-col + .both-plus + .both-col .both-label { margin-top: 10px } }
.play-big.corner { left: auto; right: -3%; top: auto; bottom: -6%; translate: none; width: 12% }
.contact-text .mail { font-size: min(clamp(18px, 2.5cqi, 32px), 5vw) }
/* Design pass 2 */
/* Three decks: the story card on the left, the three shapes stacked on the right */
.shapes .story-card { position: absolute; left: 0; top: 30%; width: 32%; padding: 2.4cqi; display: grid; gap: 1.1cqi; background: var(--white); border: 1.5px solid var(--ink); border-radius: 8px; box-shadow: 0 10px 22px -16px rgba(0,0,0,.4) }
.story-card .sc-k { font: 700 clamp(9px, 1cqi, 12px)/1 var(--sans); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--g2) }
.story-card b { font-size: clamp(12px, 1.5cqi, 18px) } .story-card i { display: block; height: .7cqi; min-height: 4px; border-radius: 2px; background: var(--line) } .story-card i:nth-of-type(2) { width: 80% } .story-card i:nth-of-type(4) { width: 60% }
.story-card .sc-s { font-size: clamp(10px, 1.05cqi, 13px); color: var(--g2) }
.svc-vis.shapes .shape-arrows { aspect-ratio: auto; height: 76%; top: 0 }
/* Price: the recommended card carries one outcome line; buttons share a baseline */
#s5 .plan.rec { margin: 0 } .rec-why { margin: -.4cqi 0 1cqi; font-size: clamp(12px, 1.2cqi, 15px); color: #d9a441 }
#s5 .plan .badge, .cols h3 .rec { font-size: max(12px, .95cqi) }
.addons-link { font-weight: 700; color: var(--ink); text-underline-offset: 3px; font-size: clamp(13px, 1.3cqi, 16px) }
#s5 .plans > .plan { align-self: stretch }
/* Content slides: the kicker and title sit on one line from slide to slide; the visual centres beside them */
.page.split { align-content: stretch } .page.split .panel { align-items: start; height: 100% } .page.split .panel > :last-child { align-self: center }
/* Proof: one tone for the logos, the New York Life box readable as a mid-grey */
.cv-grid { display: flex; flex-wrap: nowrap; gap: 2.4cqi } .cv-grid .logo-new-york-life { filter: grayscale(1) contrast(1.1); opacity: .75 }
@media (max-width: 1100px) { .cv-grid { flex-wrap: wrap; gap: 14px 20px } }
#s5 .plan .rec-why { color: #d9a441 } #s5 .cols.plans { margin-top: 2.6cqi }
#s2.curvy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .cv-grid { gap: 1.8cqi } .cv-grid img { height: clamp(12px, 1.45cqi, 20px) }
.cv-grid .logo-citi { height: clamp(14px, 1.7cqi, 24px) } .cv-grid .logo-new-york-life { height: clamp(20px, 2.3cqi, 32px) } .cv-grid .logo-firstmark { height: clamp(9px, 1cqi, 14px) }
#s5 .plan .badge { top: 2.2cqi; left: auto; right: 2.2cqi }
/* A6: mini slides scaled from full size; cards short enough to fit the slide */
.arch-mini.scaled { position: relative; aspect-ratio: 16 / 9; overflow: hidden }
.arch-mini.scaled > .s { position: absolute; left: 0; top: 0; width: 1000px; transform: scale(var(--k, .1)); transform-origin: 0 0 }
.page.archs { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 1.6cqi } .arch-grid { align-self: stretch; grid-auto-rows: minmax(0, 1fr); min-height: 0 }
.arch { grid-template-columns: 12cqi 1fr; padding: .8cqi; gap: 1.2cqi } .arch-t .arch-q { font-size: clamp(11px, 1.05cqi, 14px) } .arch b { font-size: clamp(13px, 1.35cqi, 17px) }
#s5 .plan .badge { position: static; align-self: flex-start; margin: 0 0 1cqi; translate: none }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }

#s3 .stack .open-hint { opacity: 0 }

@media (max-width: 700px) {
  #s2.curvy { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 24px }
  #s2 .cv-chart, #s2 .cv-head, #s2 .cv-logos, #s2 .foot { grid-column: 1 / -1 }
  #s2 .cv-head h2 { max-width: 100%; font-size: 28px }
  #s2 .cv-grid { justify-content: flex-start; gap: 16px }
  .contact-text .mail { font-size: clamp(14px, 4.3cqi, 18px); font-stretch: 100%; white-space: nowrap; overflow-wrap: normal }
  .arch { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px }
  .arch-t { gap: 4px 6px }
  .arch-t .arch-q { font-size: 12px; line-height: 1.4 }
  .arch b { font-size: 14px }
  .arch-grid { gap: 8px }
}

/* The checker is a desktop app, with its own scrolling document. */
.checker-window{top:20px!important;max-height:calc(100dvh - 110px)}
.checker-frame{display:block;width:100%;height:calc(100dvh - 170px);min-height:280px;border:0;background:#f0f0ed}
@media(max-width:700px){.checker-window{left:10px!important;width:calc(100% - 20px)!important}.checker-frame{height:calc(100dvh - 170px)}.hero .row{flex-wrap:wrap}}

/* Contact offers a first-read; the appendix has two explicit reading paths. */
.contact-check{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.contact-check>span{font-size:14px;color:var(--g3)}.contact-check small{font-size:12px;color:var(--g2)}
.page.divider h2#h2-appx{font-size:clamp(32px,6cqi,72px)}
.appendix-index{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:16px}
.appendix-index a{display:grid;gap:10px;border-top:1px solid #ffffff40;padding-top:18px;text-decoration:none}
.appendix-index a:hover b{text-decoration:underline;text-underline-offset:5px}
.appendix-index a>span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g1)}
.appendix-index b{font-size:clamp(18px,2.3cqi,28px);line-height:1.2;font-stretch:110%}.appendix-index small{font-size:14px;color:var(--g1)}
@media(max-width:700px){.appendix-index{grid-template-columns:1fr;gap:24px;margin-bottom:12px}.contact-check{gap:12px}.contact-check .btn{white-space:normal;text-align:left}}

.guide-link{font-size:14px;margin-top:18px}.guide-link a,.appendix-guides{text-underline-offset:4px}.appendix-guides{font-size:13px;margin-top:12px;color:var(--g1)}

.service-index{display:flex;flex-wrap:wrap;gap:14px 30px;border-top:1px solid #ffffff40;padding-top:22px;margin:18px 0 8px}.service-index a{font-size:15px;font-weight:650;text-decoration:none}.service-index a:hover{text-decoration:underline}.sample-deck-link{border:0;border-bottom:1px solid currentColor;background:none;padding:5px 0;cursor:pointer;font:600 14px/1.3 var(--sans);color:var(--ink)}.page.divider h2#h2-appx{font-size:clamp(28px,5.2cqi,62px)}@media(max-width:700px){.service-index{display:grid;grid-template-columns:1fr 1fr;gap:18px}.page.divider h2#h2-appx{font-size:30px}.sample-deck-link{min-height:44px;text-align:left}}

.both-why{justify-self:center;text-align:center;margin-inline:auto;text-wrap:balance}

.sample-deck-link.btn{border:1.5px solid var(--ink);background:var(--white);padding:11px 16px;margin-top:10px;min-height:44px}.sample-deck-link.btn:hover{background:var(--ink);color:var(--white)}

/* Contact closes the argument with one clear next step. */
.page.contact{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:start}
.contact-text{width:100%;gap:22px}
.page.contact h2{font-size:clamp(38px,7.4cqi,90px);line-height:.96;max-width:15ch}
.contact-text .lede{max-width:42ch;font-size:clamp(16px,1.8cqi,22px)}
.contact-text .mail{font-size:clamp(18px,3.1cqi,38px);font-stretch:110%;text-underline-offset:7px}
.contact-check{border:0;margin:0;padding:0}
.contact-review{font:600 14px/1.3 var(--sans);color:var(--g2);background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;cursor:pointer;min-height:44px}
.contact-review:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:700px){.page.contact{padding-top:46px;padding-bottom:22px}.page.contact h2{font-size:clamp(32px,8.3vw,48px)}.contact-text{gap:22px}.contact-text .mail{font-size:clamp(13px,4.05vw,21px);font-stretch:100%}.contact-text .lede{font-size:17px}.contact-check{margin-top:0}}

.page.divider h2#h2-appx{font-size:clamp(56px,11cqi,136px);line-height:.94;margin:0}.page#a0{gap:24px}@media(max-width:700px){.page.divider h2#h2-appx{font-size:clamp(46px,15vw,80px)}.page#a0{min-height:100vw}}

/* Precise geometric funding connector. */
.cv-line{stroke-width:1.75;stroke-linecap:butt;stroke-linejoin:miter}.cv-chart>svg{color:var(--ink)}.cv-dot{border-width:2px}


#sdeck .panel{align-items:center}#sdeck .panel>div:first-child{align-self:center}

/* A demo slide: centred headline, one hero product window. */
#sdemo .panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:center;gap:20px}
#sdemo .panel>div:first-child{text-align:center;align-self:center;max-width:100%}
#sdemo .step{margin-bottom:12px}
#sdemo h2{font-size:clamp(26px,3.6cqi,46px);max-width:24ch;margin-inline:auto;text-wrap:balance}
#sdemo .demo-caption{font-size:clamp(13px,1.45cqi,18px);color:var(--g2);max-width:none;margin:14px 0 0}
#sdemo .demo-vis{width:44%;max-width:500px;align-self:center;justify-self:center;padding:0;background:none;box-shadow:none}
#sdemo .demo-vis .demo{box-shadow:0 14px 36px -20px #0006}
@media(max-width:700px){#sdemo .panel{gap:26px}#sdemo h2{font-size:28px;max-width:17ch}#sdemo .demo-vis{width:100%;max-width:none}#sdemo .demo-caption{font-size:15px;max-width:30ch;margin-inline:auto}}

/* Reference decks repeat the logo's parallel, stepped stack. */
.stack .card{left:12%;right:4%;top:6%}
.stack .card:nth-child(1){transform:translate(-10%,16%)}
.stack .card:nth-child(2){transform:translate(-5%,8%)}
.stack .card:nth-child(3){transform:none}
.stack:hover .card:nth-child(1),.stack:focus-visible .card:nth-child(1){transform:translate(-12%,20%)}
.stack:hover .card:nth-child(2),.stack:focus-visible .card:nth-child(2){transform:translate(-6%,10%)}
.stack:hover .card:nth-child(3),.stack:focus-visible .card:nth-child(3){transform:none}

.stack .open-hint{left:50%;top:44%;right:auto;bottom:auto;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;z-index:4}
#s3 .stack:hover .open-hint,#s3 .stack:focus-visible .open-hint{opacity:1}

/* ---------- Plainsight — Highlighter (2026-10-19) ---------- */
/* An imaginary AI startup, drawn in its own brand (prototypes/plainsight-demo-day): paper, ink, one marker, the printout grey.
   Rules: one mark per slide and only on data (a row, a cell, a figure); the marker draws in last. Everything is scoped to .ps. */
@font-face { font-family: "IBM Plex Sans"; src: url(/fonts/ibm-plex-sans-latin.woff2) format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-600-latin.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap }
.ps { --ps-paper: #fbfbf7; --ps-ink: #121212; --ps-grey: #8d9087; --ps-soft: #5c5f58; --ps-rule: #d9dad3; --ps-faint: #ecece6; --ps-hi: #f2ff2e;
}
.s.ps, .ps .piece { font-family: "IBM Plex Sans", system-ui, sans-serif; color: var(--ps-ink); -webkit-font-smoothing: antialiased }
.ps .piece { container-type: inline-size; overflow: hidden; box-shadow: 0 1.4cqi 3cqi -1.4cqi rgba(0,0,0,.45) }
.s.ps b, .ps .piece b { font-weight: 600 }
/* The mark: three lines of a printout, the middle one marked. Sized by font-size. */
.ps .mk { display: inline-grid; flex: none; gap: .1em; width: 1.06em; height: .83em; align-content: center; vertical-align: -.08em }
.ps .mk i { display: block; height: max(1px, .13em); background: var(--ps-grey) } .ps .mk i:nth-child(1) { width: 70% } .ps .mk i:nth-child(3) { width: 85% }
.ps .mk i:nth-child(2) { height: max(3px, .29em); background: var(--ps-hi); box-shadow: inset 0 0 0 1px #c9d41a }
/* The marker on a figure */
.ps .hl { --hs: 80%; background-image: linear-gradient(99deg, transparent 0 .5%, var(--ps-hi) .5% 99.2%, transparent 99.2%); background-repeat: no-repeat; background-position: 0 62%; background-size: 100% var(--hs);
  padding: 0 .1em; margin: 0 -.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.ps .cmp .hl, .ps .v-big .hl { --hs: 38%; background-position: 0 74% }
/* The printout: real rows. .on marks a row; i.on marks one cell; .ink sets a row in ink without a mark. */
.ps .tbl { display: grid; grid-template-columns: var(--cols, 1fr 1fr); font: 400 1.35cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-grey); border-top: 1px solid var(--ps-rule) }
.ps .tbl > span { display: contents }
.ps .tbl > span > * { padding: 1.05cqi 1.2cqi; border-bottom: 1px solid var(--ps-faint); white-space: nowrap; font-style: normal }
.ps .tbl .r { text-align: right }
.ps .tbl .hd > * { color: var(--ps-ink); font-weight: 500; font-size: .88em; letter-spacing: .03em }
.ps .tbl .on > *, .ps .tbl i.on { color: var(--ps-ink); font-weight: 600; background: linear-gradient(var(--ps-hi), var(--ps-hi)) 0 0 / 100% 100% no-repeat }
.ps .tbl .ink > * { color: var(--ps-ink); font-weight: 600 }

/* The slide */
.s.ps { background: var(--ps-paper); text-align: left }
.s.ps > .in { position: absolute; inset: 0; padding: 4.8cqi 5.6cqi 3.8cqi; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 2.4cqi }
.ps .row { display: flex; justify-content: space-between; align-items: center; gap: 2cqi }
.ps .full { grid-column: 1 / -1 }
.ps .meta { font: 500 1.2cqi/1.2 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ps-soft) }
.ps .sf { padding-top: 1.4cqi; border-top: 1px solid var(--ps-rule) }
.ps .brand { display: inline-flex; align-items: center; gap: .9cqi; font-weight: 600; font-size: 1.8cqi; letter-spacing: -.025em; color: var(--ps-ink) }
.ps .k { font: 500 1.25cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--ps-soft) } .ps .k b { color: var(--ps-ink); margin-right: .5em }
.ps .h-xl { display: block; margin: 0; font-size: 5.6cqi; font-weight: 600; line-height: 1.02; letter-spacing: -.048em; text-wrap: balance }
.ps .h-m { display: block; margin: 0; font-size: 3.4cqi; font-weight: 600; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance }
.ps .lede { display: block; margin: 0; max-width: 44ch; font-size: 1.55cqi; line-height: 1.4; color: var(--ps-soft) }
.s.ps .body { min-height: 0; display: grid; gap: 4cqi; align-items: center }
.ps .chkline { font: 500 1.3cqi/1.4 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-ink) } .ps .chkline span { color: var(--ps-soft); font-weight: 400 }
/* Cover */
.s.ps.pk-cover > .in { grid-template-columns: 1.05fr .95fr; column-gap: 4cqi }
.pk-cover .txt { align-self: end; display: grid; gap: 2.4cqi }
.pk-cover .print { align-self: center; display: grid; gap: 1.4cqi } .pk-cover .tbl { font-size: 1.45cqi }
/* Problem: the thread, three days marked */
.ps .thread { display: grid; gap: 1.3cqi; padding: 2cqi; font-size: 1.45cqi; line-height: 1.4; border: 1px solid var(--ps-rule); border-radius: .8cqi; background: #fff }
.ps .thread > span { display: grid; grid-template-columns: 3.4cqi 1fr; gap: 1.2cqi }
.ps .thread i { display: grid; place-items: center; width: 3.4cqi; height: 3.4cqi; border-radius: .6cqi; background: var(--ps-faint); font: 600 1.1cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; font-style: normal; color: var(--ps-soft) }
.ps .thread small { margin-left: .6cqi; font-size: .85em; color: var(--ps-grey) }
.ps .thread .gap { display: block; text-align: center; padding: .4cqi 0; font: 600 1.3cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-ink) } .ps .thread .gap span { padding: .3cqi .6cqi }
/* The product */
.ps .app { display: block; background: #fff; border: 1px solid var(--ps-rule); border-radius: .9cqi; box-shadow: 0 2cqi 4cqi -2cqi rgba(0,0,0,.22); overflow: hidden; font-size: 1.5cqi }
.ps .abar { display: flex; align-items: center; gap: .6cqi; padding: 1cqi 1.6cqi; border-bottom: 1px solid var(--ps-faint); font: 400 1.15cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-grey) }
.ps .abar > i { flex: none; width: .8cqi; height: .8cqi; border-radius: 50%; background: #dcddd6 } .ps .abar > span:first-of-type { margin-left: .8cqi }
.ps .aq { display: flex; gap: 1.2cqi; padding: 1.6cqi 2cqi; border-bottom: 1px solid var(--ps-faint) } .ps .aq b { font: 500 1.2cqi/1.5 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-grey) }
.ps .ans { display: block; padding: 1.8cqi 2cqi 1.2cqi; font-size: 2.8cqi; font-weight: 600; letter-spacing: -.035em; line-height: 1.1 }
.ps .app .tbl { border-top: 0; font-size: 1.25cqi }
.ps .asql { display: block; padding: 1.3cqi 2cqi 1.5cqi; border-top: 1px dashed #c9cac2; font: 400 1.15cqi/1.65 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft); white-space: pre }
.ps .chk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4cqi 2cqi; padding: 1.1cqi 2cqi; border-top: 1px solid var(--ps-faint); font: 500 1.15cqi/1.4 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-ink) }
.ps .chk span:last-child { color: var(--ps-soft); font-weight: 400 }
/* Solution: the chatbot's wall against the checked answer */
.ps .vs { display: grid; gap: 1cqi } .ps .vs .lbl { font: 500 1.2cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft); text-transform: uppercase; letter-spacing: .05em }
.ps .wall { display: block; padding: 2cqi; font-size: 1.55cqi; line-height: 1.55; color: var(--ps-grey); border: 1px solid var(--ps-rule); border-radius: .8cqi; background: #f6f6f1 }
/* Business model */
.ps .cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3cqi; padding: 3cqi 0; border-top: 1px solid var(--ps-rule); border-bottom: 1px solid var(--ps-rule) }
.ps .cmp > span { display: grid; gap: 1cqi } .ps .cmp small { font: 500 1.2cqi/1.2 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft); text-transform: uppercase; letter-spacing: .04em }
.ps .cmp b { font-size: 9cqi; font-weight: 600; letter-spacing: -.06em; line-height: .85 } .ps .cmp .old b { color: #b3b5ad; font-weight: 500 }
.ps .cmp em { font-style: normal; font-size: 1.6cqi; color: var(--ps-soft) } .ps .cmp .arrow { font-size: 3cqi; color: var(--ps-grey); padding-bottom: 3cqi }
.ps .kpis { display: grid; grid-template-columns: repeat(3, 1fr) }
.ps .kpis > span { display: grid; gap: .5cqi; padding-left: 2cqi; border-left: 1px solid var(--ps-rule); font-size: 1.4cqi; color: var(--ps-soft) } .ps .kpis > span:first-child { padding-left: 0; border: 0 }
.ps .kpis b { font-size: 3.2cqi; letter-spacing: -.035em; color: var(--ps-ink) }
/* Traction: customers as wordmarks */
.ps .logos { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6cqi; border-top: 1px solid var(--ps-rule); color: #8b8d85 }
.ps .logos .by { font: 500 1.1cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase }
.ps .logos .w1 { font: italic 600 2cqi/1 Georgia, serif } .ps .logos .w2 { font: 700 1.6cqi/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .22em } .ps .logos .w3 { font: 500 2.1cqi/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -.05em }
.ps .logos .w4 { font: 400 1.9cqi/1 Georgia, serif } .ps .logos .w5 { font: 600 2cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace } .ps .logos .w6 { font: 600 1.9cqi/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -.03em }
/* Team: the founders' own queue, marked */
.s.ps.pk-team > .in { grid-template-columns: 1fr 1fr; column-gap: 5cqi }
.pk-team .left { align-self: center; display: grid; gap: 3.4cqi }
.ps .people { display: grid; gap: 2cqi } .ps .people > span { display: grid; gap: .5cqi; padding-top: 1.6cqi; border-top: 1px solid var(--ps-rule) }
.ps .people b { font-size: 2.2cqi; letter-spacing: -.025em } .ps .people em { font-style: normal; font-size: 1.6cqi; color: var(--ps-soft); line-height: 1.35 }
.ps .people small { font: 500 1.15cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .05em; color: var(--ps-grey); text-transform: uppercase }
.pk-team .print { align-self: center; display: grid; gap: 1.2cqi } .pk-team .tbl { font-size: 1.45cqi } .pk-team .print .meta { text-transform: none; line-height: 1.4 }
/* The ask: the round as a ledger */
.s.ps.pk-ask .body { align-self: center; grid-template-columns: 1.25fr .75fr; gap: 5cqi; align-items: end }
.ps .ledger { --cols: 1fr 1.6fr; font-size: 1.8cqi } .ps .ledger > span > * { padding: 1.5cqi 1.4cqi }
.ps .ledger .lead > * { font-size: 1.6em; color: var(--ps-ink); font-weight: 600; padding: 2cqi 1.4cqi; letter-spacing: -.02em }
.ps .ledger .lead > :first-child { font-size: 1em; font-weight: 500; align-self: center }
.ps .ms ol { list-style: none; margin: 0; padding: 0 }
.ps .ms li { display: grid; grid-template-columns: 9cqi 1fr; gap: 1.6cqi; padding: 1.3cqi 0; border-top: 1px solid var(--ps-rule); font-size: 1.6cqi } .ps .ms li b { font: 500 1.3cqi/1.5 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft) }

/* Motion: in the laid-out view the marker draws last, left to right, once the slide plays */
.motion .s.ps.armed .hl { background-size: 0% var(--hs) }
.motion .s.ps.armed .tbl .on > *, .motion .s.ps.armed .tbl i.on { background-size: 0% 100% }
.motion .s.ps.play .hl { background-size: 100% var(--hs); transition: background-size .65s cubic-bezier(.6,0,.25,1) 1.1s }
.motion .s.ps.play .tbl .on > *, .motion .s.ps.play .tbl i.on { background-size: 100% 100%; transition: background-size .65s cubic-bezier(.6,0,.25,1) 1.1s }
/* On the cover's desk, after the pieces are dealt */
.motion .intro.play .still .hl { animation: psHl .65s cubic-bezier(.6,0,.25,1) 1.3s both }
.motion .intro.play .still .tbl .on > *, .motion .intro.play .still .tbl i.on { animation: psCell .65s cubic-bezier(.6,0,.25,1) 1.3s both }
@keyframes psHl { from { background-size: 0% var(--hs) } } @keyframes psCell { from { background-size: 0% 100% } }

/* Pieces: a deck slot holds a whole slide; it keeps the piece's shadow, not its own */
.ps .deckslide { aspect-ratio: 16 / 9 }
.ps .deckslide[data-ps] { background: none } .ps .deckslide[data-ps] > .s { box-shadow: none }
/* The product demo, as a recording: the app, then a player bar */
.ps .demo { display: grid; background: #fff; border: 1px solid var(--ps-rule); border-radius: 2cqi }
.ps .demo .abar { font-size: 2.4cqi; padding: 2.2cqi 3cqi; gap: 1.2cqi } .ps .demo .abar > i { width: 1.8cqi; height: 1.8cqi }
.ps .d-chip { margin-left: auto; padding: 1cqi 1.4cqi; border-radius: .6cqi; background: var(--ps-ink); color: var(--ps-paper); font: 500 2.1cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase }
.ps .demo .aq { gap: 2cqi; padding: 2.8cqi 4cqi; font-size: 3.4cqi } .ps .demo .aq b { font-size: 2.8cqi }
.ps .demo .ans { padding: 3cqi 4cqi 2cqi; font-size: 6.4cqi }
.ps .demo .tbl { border-top: 0; font-size: 2.7cqi } .ps .demo .tbl > span > * { padding: 1.5cqi 4cqi }
.ps .demo .chk { padding: 2.2cqi 4cqi; font-size: 2.4cqi }
.ps .d-player { display: flex; align-items: center; gap: 2cqi; padding: 2.2cqi 4cqi; border-top: 1px solid var(--ps-faint); font: 500 2.4cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft); font-variant-numeric: tabular-nums }
.ps .d-player .pp { flex: none; width: 2.2cqi; height: 2.6cqi; background: var(--ps-ink); clip-path: polygon(0 0, 100% 50%, 0 100%) }
.ps .d-track { flex: 1; height: .8cqi; border-radius: 1cqi; background: var(--ps-faint); overflow: hidden } .ps .d-track i { display: block; width: 40%; height: 100%; background: var(--ps-ink) }
/* One story, three shapes: the traction message as send-ahead, presentation and slidedoc */
.ps .deckslide:not([data-ps]) { background: var(--ps-paper); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1.4cqi 3cqi -1.4cqi rgba(0,0,0,.45) }
.ps .ds-in { height: 100%; padding: 5cqi 6cqi 3.6cqi; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 1.6cqi }
.ps .ds-k { font: 500 3cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ps-soft) }
.ps .ds-h { font-size: 5cqi; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance }
.ps .ds-foot { display: flex; align-items: center; gap: 1.4cqi; padding-top: 1.8cqi; border-top: 1px solid var(--ps-rule); font-size: 3cqi; font-weight: 600; letter-spacing: -.02em }
.ps .ds-foot > span:last-child { margin-left: auto; font: 400 2.5cqi/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft); letter-spacing: 0 }
.ps .ds-in .tbl { font-size: 3cqi } .ps .ds-in .tbl > span > * { padding: 1.2cqi 2cqi }
.ps .v-send .ds-in { grid-template-rows: auto minmax(0, 1fr) auto auto }
.ps .v-big { align-self: end; margin-left: -1cqi; font-size: 21cqi; line-height: .82; letter-spacing: -.07em }
.ps .v-sub { font-size: 4.2cqi; line-height: 1.25; color: var(--ps-soft); max-width: 82% }
.ps .v-pres .ds-in { grid-template-rows: auto auto minmax(0, 1fr) auto } .ps .v-pres .tbl { align-self: center }
.ps .v-doc .ds-in { grid-template-rows: auto auto minmax(0, 1fr) auto } .ps .v-doc .ds-h { font-size: 3.5cqi; line-height: 1.15 }
.ps .v-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; align-items: start; min-height: 0 }
.ps .v-text { font-size: 2.3cqi; line-height: 1.45; color: var(--ps-soft) }
.ps .v-doc .tbl { font-size: 2.3cqi } .ps .v-doc .tbl > span > * { padding: 1cqi 1.4cqi }
.ps .v-chip { position: absolute; right: 3cqi; top: 3cqi; padding: 1.2cqi 1.6cqi; border-radius: .6cqi; background: var(--ink); color: #fff; font-weight: 700; font-size: 3cqi; line-height: 1; font-family: var(--sans); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase }
.shapes .v-chip { font-size: 2.6cqi }
/* The brand sheet: the mark, the name, the type and four colours */
.ps .brandsheet { aspect-ratio: 4 / 5; background: var(--ps-paper); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1.4cqi 3cqi -1.4cqi rgba(0,0,0,.45) }
.ps .bs-in { height: 100%; padding: 10cqi; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 4cqi }
.ps .bs-mark { align-self: center; justify-self: center; font-size: 40cqi; line-height: 0 }
.ps .bs-word { font-size: 13cqi; font-weight: 600; letter-spacing: -.045em; line-height: 1 }
.ps .bs-line { font: 500 5cqi/1.2 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--ps-soft) }
.ps .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqi }
.ps .swatches i { aspect-ratio: 1; border-radius: 2cqi; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) }
.ps .swatches i:nth-child(1) { background: #fbfbf7 } .ps .swatches i:nth-child(2) { background: #121212 } .ps .swatches i:nth-child(3) { background: #f2ff2e } .ps .swatches i:nth-child(4) { background: #8d9087 }
/* The cover desk on a phone: taller, so the demo does not hide the deck slide's headline */
@media (max-width: 700px) { .still { aspect-ratio: 1 / .98 } .still .deckslide { top: 1% } .still .demo { bottom: 1% } }