/* Presenter mode (one block per screen, arrow keys) and record mode (?record=1, 1920x1080). */
.pbar { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: rgba(21,22,31,0.86); color: #fff; font-size: 0.875rem; }
.pbar[hidden] { display: none; }
.pbar button { min-width: 44px; height: 44px; padding: 0 0.9rem; border: 0; border-radius: 999px; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; }
.pbar button:hover { background: rgba(255,255,255,0.14); }
.pbar span { padding: 0 0.5rem; font-variant-numeric: tabular-nums; }

/* Every slide shares one scale: the root size follows the screen, so a slide is about 96rem x 54rem on any display. */
body.present { overflow: hidden; --h1: 5rem; --h2: 2.9rem; --h3: 1.35rem; --lede: 1.4rem; }
html:has(body.present) { font-size: clamp(12px, min(1.0417vw, 1.852vh), 40px); }
body.present .top, body.present .devbar { display: none; }
body.present .sec { display: none; padding: 0; min-height: 0; }
body.present .sec.has-current { display: block; position: fixed; inset: 0; overflow: hidden; }
body.present .wrap { max-width: none; padding: 0; height: 100%; }
body.present .wrap > *, body.present .sell > * { margin-top: 0; }
body.present [data-slide] { display: none; }
body.present [data-slide].is-current { display: grid; grid-template-columns: minmax(0, 78rem); justify-content: center; align-content: safe center; height: 100vh; overflow: auto; padding: 3.5rem 5rem 5.5rem; cursor: default; }
/* vertical rhythm: one gap between blocks, tighter under an eyebrow and a heading */
body.present [data-slide].is-current > * { margin-top: 0; margin-bottom: 0; }
body.present [data-slide].is-current > * + * { margin-top: 2.25rem; }
body.present [data-slide].is-current > .eyebrow + *, body.present [data-slide].is-current > .same__label + * { margin-top: 0.9rem; }
body.present [data-slide].is-current > h2 + .lede { margin-top: 1.25rem; }
body.present [data-slide].is-current > .muted { margin-top: 1.5rem; font-size: 1rem; }
body.present [data-slide].is-current > h2 { max-width: 24em; }
body.present [data-slide].is-current > h3:first-child, body.present .proof__copy h3 { font-size: var(--h2); line-height: 1.15; max-width: 22em; }

/* 1. opening */
body.present .hero__in.is-current { grid-template-columns: minmax(0, 42rem) auto; gap: 7rem; align-items: center; }
body.present .hero__in.is-current > * + * { margin-top: 0; }
body.present .hero__copy { gap: 2rem; }
body.present .hero__loop { width: calc(40rem * 9 / 18.5); }
/* 3. the walkthrough */
body.present .stage [data-slide] > h2 { margin-bottom: 0; }
body.present .sim--phone .sim__live { grid-template-columns: auto minmax(0, 34rem); gap: 6rem; justify-content: center; }
body.present .stage .sim__stage { width: calc(36rem * 9 / 18.5); max-width: none; }
body.present .sim--desk .sim__stage { width: min(100%, calc(58vh * 16 / 9.4)); }
body.present .sim__n { font-size: 1.05rem; }
body.present .sim__caption { font-size: 3rem; }
body.present .sim__say { font-size: 1.35rem; }
/* 4. end of the day: two screens side by side, caption under each */
body.present .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
body.present .shot, body.present .shot:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
body.present .shot figcaption, body.present .shot:nth-child(even) figcaption { order: 2; font-size: 1.05rem; }
body.present .shot figcaption b { font-size: 1.4rem; }
body.present .figs { gap: 0 3.5rem; }
body.present .fig { padding: 2rem 0 0; gap: 0.7rem; }
body.present .fig b { font-size: 4.5rem; }
body.present .fig span { font-size: 1.25rem; line-height: 1.5; }
body.present .targets .muted { max-width: 64rem; }
/* 6. current draw beside the battery sum */
body.present .draw { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: start; }
body.present .draw__nums { grid-column: 1; gap: 1rem 2rem; flex-wrap: nowrap; }
body.present .draw__nums b { font-size: 3rem; }
body.present .draw > p { grid-column: 1; }
body.present .batt { grid-column: 2; grid-row: 1 / span 2; }
body.present .status { margin-bottom: 0; }
/* 8 and 9. words on the left, the working thing on the right, centred against each other */
body.present :is(#pays, #win) [data-slide].is-current:not(.proof) { grid-template-columns: minmax(0, 31rem) minmax(0, 43rem); column-gap: 4rem; grid-template-rows: 1fr repeat(4, auto) 1fr; align-content: stretch; }
body.present :is(#pays, #win) [data-slide].is-current:not(.proof) > * { grid-column: 1; }
body.present :is(#pays, #win) [data-slide].is-current:not(.proof) > :nth-child(1) { grid-row: 2; }
body.present :is(#pays, #win) [data-slide].is-current:not(.proof) > :nth-child(2) { grid-row: 3; }
body.present :is(#pays, #win) [data-slide].is-current:not(.proof) > :nth-child(3) { grid-row: 4; }
body.present #pays [data-slide].is-current > .after { grid-row: 5; }
body.present :is(#pays, #win) [data-slide].is-current > :is(.calc, .demo) { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; }
body.present .line { display: grid; gap: 1rem; }
body.present .line__num b { font-size: 3.6rem; line-height: 1; }
body.present .line p { font-size: 1.1rem; }
body.present .after { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
body.present .after__big { font-size: 1.5rem; }
body.present .calc { padding: 2rem; gap: 1.5rem; }
body.present .calc__fields label { align-content: space-between; }
body.present .demo { gap: 1.1rem; }
body.present .demo__frame { width: 100%; }
body.present .proof.is-current { grid-template-columns: minmax(0, 36rem) auto; gap: 6rem; align-items: center; }
body.present .proof.is-current > * + * { margin-top: 0; }
body.present .proof__copy { gap: 1.5rem; }
body.present .proof__copy p, body.present .ticks li { font-size: 1.2rem; }
body.present .paper { width: auto; }
body.present .paper img { height: 39rem; width: auto; }
/* 11 to 15. everything else */
body.present .tiles { gap: 2rem 2.75rem; }
body.present .tile { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
body.present .tile figcaption { font-size: 0.9rem; line-height: 1.45; }
body.present .tile figcaption b { font-size: 1.1rem; }
body.present .sell { margin: 0; padding: 0; border: 0; height: 100%; }
body.present .sell > .muted { display: none; }
body.present .svc, body.present .svc.is-current { margin-top: 0; grid-template-columns: minmax(0, 29rem) minmax(0, 44rem); gap: 5rem; align-items: center; }
body.present .svc.is-current:nth-of-type(even) { grid-template-columns: minmax(0, 44rem) minmax(0, 29rem); }
body.present .svc.is-current > * + * { margin-top: 0; }
body.present .sell > [data-slide] > .svc { grid-template-columns: minmax(0, 33rem) minmax(0, 40rem); }
body.present .sell__big { font-size: 2.4rem; line-height: 1.15; max-width: none; }
body.present .svc h3 { font-size: 2.4rem; }
body.present .svc__copy { gap: 1.25rem; }
body.present .svc__copy p { font-size: 1.2rem; }
/* 16. pilot */
body.present .pilot { gap: 4rem; align-items: center; }
body.present .pilot dt { font-size: 1rem; }
body.present .pilot dd { font-size: 1.2rem; }
body.present .contact { padding: 2.5rem; gap: 1rem; }
body.present .contact__big { font-size: 1.6rem; }
/* 17 on. technical answers, three to a slide, side by side */
body.present #tech.has-current { overflow: auto; }
body.present #tech .wrap { height: auto; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 78rem); justify-content: center; align-content: safe center; padding: 3.5rem 5rem 5.5rem; }
body.present .faqs { display: block; margin-top: 2.25rem; }
body.present #tech [data-slide].is-current { height: auto; overflow: visible; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-content: start; align-items: start; }
body.present #tech [data-slide].is-current > * + * { margin-top: 0; }
body.present .faq summary { font-size: 1.2rem; align-items: start; }
.pbar { opacity: 0.55; transition: opacity 200ms var(--ease); }
.pbar:hover, .pbar:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pbar { transition: none; } }

body.record > *:not(.rec) { display: none; }
body.record { background: #27283d; overflow: hidden; }
.rec { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; background: var(--grad); --head: #fff; --rule: rgba(255,255,255,0.2); --card: transparent; display: grid; place-items: center; }
.rec .sim { width: 100%; }
.rec .sim__controls, .rec .sim__stills, .rec .sim__n, .rec .sim__start, .rec .sim__bar { display: none; }
.rec .sim--phone .sim__live { grid-template-columns: 480px 760px; gap: 120px; }
.rec .sim--phone .device--phone { width: 480px; }
.rec { --fg: rgba(255,255,255,0.8); }
.rec .sim--desk .sim__stage { width: 1500px; }
.rec .sim--desk .sim__side { max-width: 1500px; }
.rec .sim__caption { font-size: 52px; line-height: 1.15; }
.rec .sim__say { font-size: 30px; line-height: 1.5; color: rgba(255,255,255,0.8); }
.rec .sim__words { min-height: 0; gap: 20px; }
.rec .sim--desk .sim__caption { font-size: 38px; }
.rec .sim--desk .sim__say { font-size: 24px; }
.rec .sim--desk .sim__stage { width: 1380px; }
.rec--nocap .sim__side { display: none; }
.rec--nocap .sim--phone .sim__live { grid-template-columns: 480px; }