/* Seatfold page CSS: only what sits inside a visual and the kit lacks (system.md), plus the
   app-frame recipe as sections-library.md gives it, and one --p-h per card group. */

/* ---------- the phone (.device): a real capture of the app in a drawn iPhone body ---------- */
.device { position: relative; aspect-ratio: 720 / 1565; border-radius: 13% / 6%; padding: 6px;  /* a thin bezel: % padding would resolve against the parent's width */
  background: #0d0f12; box-shadow: 0 0 0 1px #2a2e35 inset, 0 30px 60px -20px rgb(6 20 30 / .45); }
.device > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--shot-y, 0%); border-radius: 11% / 5%; }
.device::before { content: ""; position: absolute; z-index: 1; top: 2.6%; left: 50%; translate: -50% 0; width: 30%; height: 2.4%; border-radius: 99px; background: #000; }

/* hero (centred, on the deep ground): three phones rise out of the lit window and fade at its foot.
   The centre phone is the largest; the side ones step back. Sized from the window (container units). */
.hero--centred .hero__own { color: var(--accent); }
.hero--centred .pill { background: color-mix(in oklab, var(--ink) 8%, transparent); border-color: color-mix(in oklab, var(--ink) 18%, transparent); color: var(--ink); }
.hero-phones { container-type: size; --ground-bg: #0b3d44; }
.hero-phones__row { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 4cqw, 56px); padding-top: clamp(20px, 7cqh, 40px); }
/* the body and the screen are rounded in proportion to the phone, so the corners always nest
   (the screen is zoomed with the phone, a fixed radius on the body would fall behind it) */
.hero-phone { flex: none; padding: max(3px, calc(var(--pw) * .02)); border-radius: 15% / 7%; }
.hero-phone > .demo { width: 100%; border-radius: 13.6% / 6.3%; transition: background-color .5s ease, color .5s ease; }
.hero-phone > .demo * { transition: background-color .5s ease, color .5s ease, box-shadow .5s ease; }
/* the phones always rise out of the window and are cut by its fade: their height runs past the window's */
.hero-phones__row { --pw: clamp(200px, min(56cqh, 30cqw), 420px); }
/* a window close to square (a tablet held upright): the side phones tuck behind the centre one, fanned,
   so the centre phone can be tall enough to rise out of the window */
@container (max-aspect-ratio: 13 / 10) {
  .hero-phones__row { --pw: clamp(200px, min(60cqh, 46cqw), 420px); }
  .hero-phone--main { position: relative; z-index: 2; }
  .hero-phone--side { position: relative; z-index: 1; margin-inline: calc(var(--pw) * -.3); }
}
.hero-phone--main { width: var(--pw); }
.hero-phone--side { padding: max(3px, calc(var(--pw) * .017)); width: calc(var(--pw) * .84); margin-top: calc(var(--pw) * .16); opacity: .92; }
@container (max-width: 700px) { .hero-phone--side { display: none; } }
.hero-phones.hero__window > .loop-pause { position: absolute; z-index: 6; top: 12px; right: 12px; bottom: auto; left: auto; }  /* above the fade at the window's foot */
@media (prefers-reduced-motion: reduce) { .hero-phone > .demo, .hero-phone > .demo * { transition: none; } }

/* nav cards: the captures crop to their point */
/* nav cards: each picture whole on the lit ground (a phone rising from the foot, the portal's
   release card, the seat map on the app's own dark ground), never a crop through a screen */
.menu-pic { --p-h: 168px; height: var(--p-h); flex: none; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; background: radial-gradient(70% 90% at 50% 0%, #1b6b6f 0%, #0f4c53 34%, #0a3238 64%, #071f24 100%) !important; }
.menu-pic--dark { align-items: center; background: #060B14 !important; }
.device--menu { width: 132px; margin-top: var(--s-5); flex: none; padding: 4px; border-radius: 20px; }
.device--menu > img { border-radius: 16px; }
.menu-map { height: 88%; width: auto; max-width: 90%; }
.menu-rel { align-self: center; width: min(78%, 300px); display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff; color: #1d2733; border: 1px solid rgb(0 0 0 / .1); font-size: 13px; }
.menu-rel__t { display: flex; justify-content: space-between; font-weight: 500; }
.menu-rel__t span { font-weight: 400; color: #06525c; }
.menu-rel__sw { display: flex; gap: 6px; }
.menu-rel__sw i { width: 22px; height: 22px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.menu-rel__ok { display: flex; justify-content: space-between; color: #4b5563; }
.menu-rel__ok b { font-weight: 500; color: #1d2733; }

/* ---------- app-frame (sections-library.md, the whole recipe) ---------- */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}
.mark--ui { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }

/* the open release (portal's release page, rebuilt as live HTML) */
.rel { font: 400 13px/1.45 var(--font-text); color: var(--u-ink); }
.rel__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--u-line); }
.rel__title { font-weight: 500; font-size: 15px; }
.rel__sub { color: var(--u-muted); font-size: 12px; }
.rel__btn { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--u-border); font-weight: 500; }
.rel__btn--primary { background: #06525c; color: #f7f9f8; border: 0; }
.rel__body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; padding: 18px 20px; }
.rel__col { display: grid; gap: 10px; align-content: start; }
.rel__label { font-size: 12px; color: var(--u-muted); font-weight: 500; }
.rel__themes { display: flex; flex-wrap: wrap; gap: 6px; }
.rel__themes span { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--u-border); font-size: 12px; }
.rel__themes .is-on { background: #e3f2ef; border-color: var(--accent); color: var(--accent); font-weight: 500; }
.rel__swatches { display: grid; gap: 6px; }
.rel__swatches li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; }
.rel__swatches i { width: 20px; height: 20px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.rel__swatches code { font: 12px var(--font-mono); color: var(--u-muted); }
.rel .ui-checks { width: 100%; margin-top: 4px; }
.rel__preview { display: flex; justify-content: center; }
.device--mini { width: 180px; }
@media (max-width: 1279px) { .rel__body { grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; } .demo-phone { width: 150px; } }

/* ---------- journey: captures inside the moment's frames ---------- */
#journey .mo-pc__visual.shot { overflow: hidden; align-items: flex-start; padding: var(--s-7) var(--s-5) 0; background: radial-gradient(70% 90% at 50% 0%, #1b6b6f 0%, #0f4c53 34%, #0a3238 64%, #071f24 100%); border-radius: var(--r-lg); }
#journey .device--step { width: min(56%, 300px); margin-inline: auto; }
#journey .mo-pc__visual.shot .device { box-shadow: 0 0 0 1px #2a2e35 inset, 0 24px 48px -24px rgb(6 20 30 / .5); }
@media (max-width: 1023px) {
  #journey .mo-pc__visual.shot { aspect-ratio: 16 / 9; padding-top: var(--s-5); }
  #journey .device--step { width: min(38%, 220px); }
}

/* ---------- remote: the comparison table ---------- */
.cmp { display: grid; align-content: start; }
.cmp__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; gap: var(--s-4); align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-size: var(--t-body); }
.cmp__row--head { border-bottom: 0; min-height: 0; align-items: start; padding-bottom: var(--s-3); }
.cmp__row--head { min-height: 48px; font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.cmp__yes { font-weight: 500; display: inline-flex; align-items: center; gap: var(--s-2); }
.cmp__yes::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.8 2.8 6.2-6.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cmp__no { color: var(--muted); }
@media (max-width: 639px) {
  .cmp__row { grid-template-columns: 1fr 1fr; row-gap: var(--s-1); padding-block: var(--s-3); min-height: 0; }
  .cmp__row > :first-child { grid-column: 1 / -1; font-weight: 500; }
  .cmp__row--head > :first-child { display: none; }
}

/* ---------- seats: the live map on the app's own dark ground ---------- */
.facts { display: grid; gap: var(--s-3); }
.facts { gap: var(--s-4); }
.facts li { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.seatmap { --sm-bg: #060B14; display: flex; flex-direction: column; padding: var(--s-5) var(--s-5) var(--s-4); background: var(--sm-bg); color: #F4F7FB; border-radius: var(--r-lg); border: 1px solid #1F2B42; }
.seatmap__title { font-weight: 500; }
.seatmap__sub { font-size: var(--t-small); color: #C5CDDA; }
.seatmap__svg { display: block; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; margin-block: var(--s-3); touch-action: manipulation; }
.seatmap__svg .seat { cursor: pointer; transition: fill .15s ease, transform .15s ease; transform-box: fill-box; transform-origin: center; }
.seatmap__svg .seat:hover:not(.is-sold) { transform: scale(1.18); }
.seatmap__svg .seat:focus-visible { outline: none; stroke: #7DB4FF; stroke-width: 3; }
.seatmap__svg .seat.is-sold { cursor: not-allowed; }
.seatmap__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--t-small); }
.seatmap__key { display: flex; gap: var(--s-4); color: #C5CDDA; }
.seatmap__key li { display: inline-flex; align-items: center; gap: 6px; }
.seatmap__key i { width: 12px; height: 12px; border-radius: 3px; }
.k-free { background: #263046; box-shadow: inset 0 0 0 1px #71757C; }
.k-sel { background: #2DD4BF; }
.k-sold { background: #1A1F27; box-shadow: inset 0 0 0 1px #2a2f38; }
.k-prem { background: #263046; box-shadow: inset 0 0 0 1.5px #F5C451; }
.seatmap__sum { font-weight: 500; }
@media (min-width: 1024px) { #seats .seatmap { height: calc(100svh - var(--padt) - var(--padb) - 8px); max-height: 860px; } }

/* ---------- native: the bento's pieces ---------- */
#native .panel { --p-h: 300px; }
.live { display: grid; gap: 12px; justify-items: center; width: 100%; }
.live__island { display: flex; align-items: center; justify-content: space-between; width: 200px; height: 36px; padding: 0 10px 0 6px; border-radius: 99px; background: #000; color: #2DD4BF; font: 500 13px var(--font-text); }
.live__poster { width: 24px; height: 24px; border-radius: 50%; background: url(img/ember-protocol-poster-120.jpg) 50% 30% / cover; }
.live__card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; width: 100%; padding: 16px; border-radius: 24px; background: rgb(18 22 30 / .94); color: #F4F7FB; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .5); }
.live__art { grid-row: span 2; width: 56px; height: 72px; border-radius: 10px; object-fit: cover; object-position: 50% 30%; }
.live__app { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #C5CDDA; }
.live__n { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #2DD4BF; color: #0B0B0F; font-size: 10px; font-weight: 600; }
.live__film { font-weight: 500; font-size: 17px; }
.live__meta { font-size: 13px; color: #C5CDDA; }
.live__time { grid-row: 1 / span 2; grid-column: 3; text-align: right; }
.live__big { font-size: 26px; font-weight: 500; color: #2DD4BF; letter-spacing: -.02em; }
.live__bar { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: #263046; overflow: hidden; }
.live__bar i { display: block; width: calc(var(--k) * 100%); height: 100%; background: #2DD4BF; }
.ticket { display: grid; justify-items: center; gap: 4px; padding: 18px 18px 22px; border-radius: 16px; background: #fff; color: #0b0b0f; border: 1px solid rgb(0 0 0 / .12); font-size: 13px; text-align: center; }
.ticket__film { font-weight: 500; font-size: 15px; }
.ticket__meta { color: #4b5563; font-size: 12px; }
.ticket__qr { width: 132px; height: 132px; margin: 10px 0 6px; image-rendering: pixelated; }
.ticket__ref { font: 12px var(--font-mono); }
.vo { width: 100%; padding: 6px; border-radius: 14px; background: #111A2B; color: #F4F7FB; font-size: 13px; border: 1px solid #1F2B42; }
.vo__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
.vo__row > span:first-child { display: grid; }
.vo__row b { font-weight: 500; }
.vo__row em { font-style: normal; font-size: 12px; color: #C5CDDA; }
.vo__row.is-focus { box-shadow: 0 0 0 2px #7DB4FF inset; }
.vo__st { font-size: 12px; color: #2DD4BF; }
.vo__st--off { color: #8E9AB0; }
.cal { width: 100%; display: grid; gap: 0; padding: 16px; border-radius: 14px; background: #fff; color: #1d1d1f; border: 1px solid rgb(0 0 0 / .12); font-size: 13px; }
.cal__day { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; color: #6b7280; }
.cal__day b { font-size: 28px; font-weight: 500; color: #d93025; letter-spacing: -.02em; }
.cal__ev { padding: 10px 12px; border-left: 3px solid #06525c; background: #e9f3f1; border-radius: 6px; }
.cal__t { font-weight: 500; font-size: 15px; }
.cal__m { color: #4b5563; font-size: 12px; }
.cal__row { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid rgb(0 0 0 / .08); }
.cal__row span:last-child { color: #6b7280; }

/* the dealt grounds (backgrounds.css) centre a .section in a grid with their own padding; the page's
   section box (layout-v4.md: exactly 1H or 2H, --padt / --padb) wins, so the .wrap fills it again */
main > section.section.section:is(.bg-band, .bg-dots):not(.section--hero) { display: block; align-content: normal; min-height: 0; padding: var(--padt) 0 calc(var(--padb) + var(--bar)); }
@media (min-width: 640px) and (max-width: 1279px) { main > section.section.section:is(.bg-band, .bg-dots):not(.section--hero) { display: flex; flex-direction: column; min-height: calc(var(--h, 1) * 100svh); } }

/* the skip link: hidden until focused, so it never pushes the logo off the left line (system.md) */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { width: auto; height: auto; clip-path: none; z-index: 20; padding: var(--s-2) var(--s-4); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }

/* the seat map frame is a column: head, the map taking what is left, the key */
.seatmap.frame { align-items: stretch; justify-content: flex-start; }
.seatmap.frame::before { display: none; }
.seatmap__svg { flex: 1 1 0; width: 100%; }
@media (max-width: 1023px) { .seatmap__svg { flex: none; height: auto; aspect-ratio: 1000 / 850; } }

/* contrast checks are passes, not finished to-dos: no strike-through */
.rel__preview { align-items: flex-start; }
.rel__preview .device { flex: none; }

/* close-word: the name from line to line (hand-set per breakpoint, sections-library.md) */
@media (min-width: 1024px) { .close--word .close__word { font-size: min(calc((100vw - 2 * var(--gut)) / 3.66), 348px); line-height: 1; } }

/* remote: the film page beside the table, cut by the frame's foot */
.remote-shot { align-items: flex-start; padding: var(--s-7) var(--s-5) 0; background: radial-gradient(70% 90% at 50% 0%, #1b6b6f 0%, #0f4c53 34%, #0a3238 64%, #071f24 100%); border: 0; }
.remote-shot::before { display: none; }
.remote-shot .device--remote { position: absolute; top: var(--s-7); left: 50%; translate: -50% 0; width: min(52%, 280px); }

/* native: card text people read in the full ink (7:1) */
#native .card p { color: var(--ink); }

/* tablet and phone: each section on one or two whole screens (layout-v4.md) */
@media (min-width: 640px) and (max-width: 1023px) {
  #remote { --h: 2; }
  #seats .facts { display: none; }
  #seats .seatmap__svg { height: 34svh; aspect-ratio: auto; }
  #native .panel { --p-h: 220px; }
  .remote-shot .device--remote { width: min(40%, 240px); }
}
@media (max-width: 639px) {
  #seats { --hm: 2; }
  #remote { --hm: 2; }
  #native .panel { --p-h: 200px; }
  .remote-shot { min-height: 360px; }
}


#journey { --h: 2; }
@media (min-width: 640px) and (max-width: 1023px) { #journey { --h: 1; } }

/* the film-page frame keeps a real share of the section (the phone inside is pinned) */
.remote-grid { align-items: stretch; }
.remote-shot { min-height: 460px; height: 100%; }
@media (min-width: 1024px) and (max-width: 1279px) {
  #remote .section-head p { display: none; }
  .cmp__row { min-height: 44px; }
  .remote-shot { min-height: 0; }
}
.close--word .close__word { line-height: 1; }
@media (max-width: 639px) { #native .panel { --p-h: 170px; } }

/* ---------- the live portal demo (js/theme-demo.js) ---------- */
.rel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rel__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--u-border); background: var(--u-bg); color: var(--u-ink); font: 500 12px/1 var(--font-text); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.rel__chip:hover:not(:disabled) { border-color: #06525c; }
.rel__chip:focus-visible { outline: 2px solid #06525c; outline-offset: 2px; }
.rel__chip.is-on { background: #e3f2ef; border-color: #06525c; color: #06525c; }
.rel__chip:disabled { opacity: .45; cursor: not-allowed; }
.rel__chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rel__chip--pick input { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.rel__chip--pick input::-webkit-color-swatch-wrapper { padding: 0; }
.rel__chip--pick input::-webkit-color-swatch { border: 1px solid rgb(0 0 0 / .15); border-radius: 50%; }
.rel__checks { display: grid; gap: 10px; margin-top: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--u-border); background: var(--u-bg); }
.rel__checks-head { display: flex; justify-content: space-between; font-weight: 500; }
.rel__checks-head b { font-weight: 500; color: #1b7a3a; }
.has-fail .rel__checks-head b { color: #b42318; }
.rel__bar { height: 4px; border-radius: 99px; background: var(--u-line); overflow: hidden; }
.rel__bar i { display: block; height: 100%; width: calc(var(--k) * 100%); background: #06525c; transition: width .3s ease; }
.has-fail .rel__bar i { background: #b42318; }
.rel__list { display: grid; gap: 8px; }
.rel__list li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; }
.rel__list li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #1b7a3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.6 8.3 2.3 2.3 4.5-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.rel__list li.is-fail::before { background: #b42318 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5.4 5.4 5.2 5.2m0-5.2-5.2 5.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.rel__list code { font: 12px var(--font-mono); color: var(--u-muted); }
.rel__list em { font-style: normal; color: #b42318; }
.has-fail .rel__btn--primary { background: #f3e1df; color: #b42318; }
.rel .rel__btn--primary { white-space: nowrap; }

/* the phone preview: drawn from the engine's semantic tokens (fallback: Northlight, Midnight, dark) */
.demo-phone { width: 196px; }
.demo { --d-bg: #060B14; --d-surface: #111A2B; --d-surface2: #18233A; --d-text: #F4F7FB; --d-text2: #C5CDDA; --d-muted: #8E9AB0;
  --d-accent: #2DD4BF; --d-accent-text: #0B0B0F; --d-divider: #1F2B42; --d-seat: #263046; --d-seat-line: #71757C; --d-sel: #2DD4BF;
  --d-held: #B08A2E; --d-sold: #242830; --d-prem: #F5C451; --d-r: 10px;
  display: flex; flex-direction: column; gap: 6px; height: 100%; aspect-ratio: 720 / 1565; padding: 12px 12px 10px; border-radius: 11% / 5%;
  background: var(--d-bg); color: var(--d-text); font: 400 9px/1.35 var(--font-text); overflow: hidden; transition: background-color .25s ease, color .25s ease; }
.demo__status { display: flex; justify-content: space-between; font-size: 8px; font-weight: 500; padding: 0 6px 6px; }
.demo__brand { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.demo__venue { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; background: var(--d-surface); border: 1px solid var(--d-divider); font-size: 8.5px; }
.demo__venue i { width: 7px; height: 7px; border-radius: 50%; background: var(--d-accent); }
.demo__h { margin-top: 4px; font-size: 11px; font-weight: 600; }
.demo__sub { margin-top: -5px; color: var(--d-muted); font-size: 8px; }
.demo__card { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px; border-radius: var(--d-r); background: var(--d-surface); border: 1px solid var(--d-divider); }
.demo__card img { width: 52px; height: 74px; object-fit: cover; object-position: 50% 30%; border-radius: calc(var(--d-r) * .6); }
.demo__card > div { display: grid; align-content: start; gap: 3px; }
.demo__film { font-size: 10px; font-weight: 600; }
.demo__meta { color: var(--d-text2); font-size: 8px; }
.demo__btn { justify-self: start; margin-top: 4px; padding: 4px 9px; border-radius: 99px; background: var(--d-accent); color: var(--d-accent-text); font-size: 8.5px; font-weight: 600; transition: background-color .25s ease; }
.demo__seats { display: flex; gap: 5px; }
.demo__seats i { width: 15px; height: 13px; border-radius: 4px; background: var(--d-seat); box-shadow: inset 0 0 0 1px var(--d-seat-line); }
.demo__seats .s-sel { background: var(--d-sel); box-shadow: none; }
.demo__seats .s-held { background: var(--d-held); box-shadow: none; }
.demo__seats .s-sold { background: var(--d-sold); box-shadow: none; }
.demo__seats .s-prem { box-shadow: inset 0 0 0 1.5px var(--d-prem); }
.demo__tabs { display: flex; justify-content: space-around; margin-top: auto; padding: 7px 4px; border-radius: 99px; background: var(--d-surface); border: 1px solid var(--d-divider); color: var(--d-muted); font-size: 8px; }
.demo__tabs b { color: var(--d-accent); font-weight: 600; }
.demo-phone > .demo { width: 100%; }

/* the demo at smaller widths: the phone narrows with its column, the checks keep their count and
   the first row (a failure when there is one), the head stays on one line */
@media (max-width: 1279px) {
  .demo-phone { width: 150px; }
  .rel__body { padding-block: 14px; }
  .rel__col { gap: 8px; }
  .rel__list li:nth-child(n+2) { display: none; }
}
@media (max-width: 639px) {
  .rel__head { flex-wrap: wrap; gap: 8px; }
  .rel__head > div { flex: 1 1 100%; }
  .rel__head .rel__btn:not(.rel__btn--primary), .rel__head .ui-spacer { display: none; }
  .rel__sub { white-space: normal; }
}
@media (max-width: 639px) {
  #portal { --hm: 2; }
  .rel__body { grid-template-columns: minmax(0, 1fr); }
  .rel__preview { display: flex; justify-content: center; }
  .demo-phone { width: 180px; }
  .rel__list li:nth-child(n+2) { display: grid; }
}

/* ---------- connect: MCP, coming soon ---------- */
.connect__tag { justify-self: start; }
.connect__frame { margin-top: var(--s-7); padding: 0; background: radial-gradient(60% 80% at 50% 50%, #0d3a40 0%, #08232a 60%, #050f13 100%); border: 1px solid rgb(255 255 255 / .08); }
.connect__frame::before { display: none; }
.connect__frame .dg { width: 100%; height: 100%; }
.connect__cols { margin-top: var(--s-6); }
.connect__cols h3 { font-size: var(--t-card); }
.connect__cols p { margin-top: var(--s-2); color: var(--ink); }
.demo__card--offer { grid-template-columns: 1fr; }

/* on the dark page the portal window gets a lit edge, so the product reads as the brightest thing */
#portal .app.ui { border-color: rgb(255 255 255 / .24); box-shadow: 0 0 0 1px rgb(147 241 247 / .1), 0 40px 120px -40px rgb(147 241 247 / .25); }
/* the dashboard is as tall as its content (it stretched to the screen's foot, an empty band under the list) */
@media (min-width: 1024px) { #portal .app.ui.fill { flex: 0 0 auto; } main > section#portal { min-height: 0; } }

/* native: each card shows a whole iPhone, centred in its panel, sized from the panel's height (or its width
   when that is tighter). Everything on the screen is measured in --nw (the phone's width), so the screen
   scales as one picture. On short panels (tablet, phone) the phone keeps a readable width and the panel
   crops it, faded at the bottom. */
#native .panel { --p-h: clamp(360px, 34vw, 520px); }
@media (max-width: 1023px) { #native .panel { --p-h: clamp(480px, 100svh - 420px, 800px); } }
@media (max-width: 639px) { #native .panel { --p-h: 540px; } }
.stage.nph-stage { container-type: size; }
.nph-stage > .nph { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.nph {
  --nw: min((100cqh - 56px) / 2.17, 100cqw - 48px, 300px);
  width: var(--nw); aspect-ratio: 1 / 2.17; padding: calc(var(--nw) * .028);
  border-radius: calc(var(--nw) * .165); background: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 0 1px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .55);
}
@container (max-height: 400px) {
  .nph-stage > .nph { --nw: min(100cqw - 48px, 230px); top: 28px; translate: -50% 0; }
  .nph-stage { -webkit-mask: linear-gradient(#000 calc(100% - 64px), transparent calc(100% - 4px)); mask: linear-gradient(#000 calc(100% - 64px), transparent calc(100% - 4px)); }
}
.nph__screen {
  position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--nw) * .14);
  background: #0b111b; color: #f4f7fb; font-size: calc(var(--nw) * .047); line-height: 1.3; letter-spacing: -.005em;
}
.nph__island { position: absolute; z-index: 3; top: calc(var(--nw) * .03); left: 50%; translate: -50% 0; width: 31%; height: calc(var(--nw) * .088); border-radius: 99px; background: #000; }
.nph__home { position: absolute; z-index: 3; bottom: calc(var(--nw) * .022); left: 50%; translate: -50% 0; width: 36%; height: calc(var(--nw) * .016); border-radius: 99px; background: rgb(255 255 255 / .85); }
.nph__sb { position: absolute; z-index: 2; top: calc(var(--nw) * .045); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--nw) * .09) 0 calc(var(--nw) * .11); font-size: calc(var(--nw) * .052); font-weight: 600; }
.nph__sb-r { display: flex; align-items: center; gap: calc(var(--nw) * .018); }
.nph__sb-r svg { height: calc(var(--nw) * .036); width: auto; fill: currentColor; }
.nph__batt { position: relative; width: calc(var(--nw) * .085); height: calc(var(--nw) * .04); border-radius: calc(var(--nw) * .012); background: currentColor; box-shadow: 0 0 0 calc(var(--nw) * .006) rgb(255 255 255 / .45); }
.nph--shot { background: #0b111b; }
.nph__shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nph--shot > .nph__home { display: none; }

/* Lock Screen */
.nph--lock { background: radial-gradient(130% 60% at 50% 112%, #d07a35 0%, #7a3a22 32%, #2a1b22 58%, #0b1620 82%); }
.nph--lock > .nph__island:not(.nph__island--live) { display: none; }
.nph__island--live { width: 46%; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--nw) * .04) 0 calc(var(--nw) * .018); color: #2dd4bf; font-size: calc(var(--nw) * .046); font-weight: 600; font-style: normal; }
.nph__island--live .live__poster { width: calc(var(--nw) * .065); height: calc(var(--nw) * .065); }
.nph__sb--lock { display: none; }
.lock__date { position: absolute; top: calc(var(--nw) * .3); width: 100%; text-align: center; font-size: calc(var(--nw) * .066); font-weight: 600; color: rgb(255 255 255 / .82); }
.lock__time { position: absolute; top: calc(var(--nw) * .4); width: 100%; text-align: center; font-size: calc(var(--nw) * .3); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: rgb(255 255 255 / .94); }
.lock__live { position: absolute; left: calc(var(--nw) * .04); right: calc(var(--nw) * .04); bottom: calc(var(--nw) * .3); display: grid; grid-template-columns: calc(var(--nw) * .14) minmax(0, 1fr) auto; gap: calc(var(--nw) * .02) calc(var(--nw) * .03); align-items: center; padding: calc(var(--nw) * .045); border-radius: calc(var(--nw) * .08); background: rgb(14 18 26 / .82); backdrop-filter: blur(12px); }
.lock__art { grid-row: span 2; width: 100%; aspect-ratio: 3 / 4; border-radius: calc(var(--nw) * .025); object-fit: cover; object-position: 50% 30%; }
.lock__text, .lock__when { min-width: 0; }
.lock__app { display: flex; align-items: center; gap: .3em; font-size: .78em; color: #c5cdda; }
.lock__app .live__n { width: 1.25em; height: 1.25em; font-size: .9em; }
.lock__film { font-size: 1.02em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lock__meta { font-size: .76em; color: #c5cdda; white-space: nowrap; }
.lock__when { grid-row: 1 / span 2; grid-column: 3; text-align: right; }
.lock__big { font-size: 1.25em; font-weight: 600; color: #2dd4bf; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.lock__bar { grid-column: 1 / -1; height: calc(var(--nw) * .014); border-radius: 99px; background: #263046; overflow: hidden; }
.lock__bar i { display: block; width: 72%; height: 100%; background: #2dd4bf; }
.lock__btn { position: absolute; bottom: calc(var(--nw) * .085); display: grid; place-items: center; width: calc(var(--nw) * .15); aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .16); backdrop-filter: blur(10px); }
.lock__btn svg { width: 46%; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.lock__btn--l { left: calc(var(--nw) * .11); }
.lock__btn--r { right: calc(var(--nw) * .11); }

/* Spotlight */
.nph--spot { background: linear-gradient(180deg, #24384f 0%, #1b2a3c 45%, #121b27 100%); }
.spot__field { position: absolute; top: calc(var(--nw) * .17); left: calc(var(--nw) * .05); right: calc(var(--nw) * .05); display: flex; align-items: center; gap: .4em; height: calc(var(--nw) * .13); padding: 0 .7em; border-radius: calc(var(--nw) * .045); background: rgb(255 255 255 / .14); font-size: 1.05em; }
.spot__field svg { width: 1em; height: 1em; fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 1.6; stroke-linecap: round; }
.spot__caret { width: 2px; height: 1.1em; margin-left: -.3em; background: #3d9cff; animation: ui-caret 1s steps(1) infinite; }
.spot__h { margin: 0 calc(var(--nw) * .07) .3em; font-size: .82em; font-weight: 600; color: rgb(255 255 255 / .62); }
.spot__h:first-of-type { margin-top: calc(var(--nw) * .35); }
.spot__group { margin: 0 calc(var(--nw) * .05) calc(var(--nw) * .045); padding: 0 .65em; border-radius: calc(var(--nw) * .05); background: rgb(255 255 255 / .1); }
.spot__row { display: flex; align-items: center; gap: .6em; padding: .55em 0; }
.spot__row + .spot__row { border-top: 1px solid rgb(255 255 255 / .1); }
.spot__row > span:last-child { display: grid; min-width: 0; }
.spot__row b { font-weight: 600; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__row em { font-style: normal; font-size: .76em; color: rgb(255 255 255 / .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__row--top img { width: 2.3em; aspect-ratio: 2 / 3; border-radius: .3em; object-fit: cover; }
.spot__ico { display: grid; place-items: center; flex: none; width: 1.9em; aspect-ratio: 1; border-radius: .45em; background: #2dd4bf; }
.spot__ico svg { width: 60%; fill: none; stroke: #062a27; stroke-width: 1.5; stroke-linejoin: round; }
.spot__kb { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: calc(var(--nw) * .028); padding: calc(var(--nw) * .03) calc(var(--nw) * .012) calc(var(--nw) * .12); background: rgb(52 56 64 / .92); }
.spot__keys { display: flex; justify-content: center; gap: calc(var(--nw) * .014); }
.spot__key { display: grid; place-items: center; flex: 0 0 8.6%; height: calc(var(--nw) * .105); border-radius: calc(var(--nw) * .014); background: #6b6f78; font-size: .95em; font-weight: 400; box-shadow: 0 1px 0 rgb(0 0 0 / .4); }
.spot__key--fn { flex-basis: 12%; background: #4a4e56; }
.spot__key--w { flex-basis: 22%; font-size: .8em; }
.spot__key--space { flex: 1 1 auto; font-size: .8em; }
.spot__key--go { flex-basis: 24%; background: #2f7cf6; font-size: .8em; }

/* VoiceOver seat list */
.vo__head { position: absolute; top: calc(var(--nw) * .17); left: calc(var(--nw) * .05); right: calc(var(--nw) * .05); display: flex; align-items: center; gap: .6em; }
.vo__head > span:last-child { display: grid; }
.vo__head b { font-size: 1.1em; font-weight: 600; }
.vo__head em { font-style: normal; font-size: .76em; color: #c5cdda; }
.vo__back { display: grid; place-items: center; width: 1.9em; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .1); }
.vo__back svg { width: 55%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vo__seg { position: absolute; top: calc(var(--nw) * .33); left: calc(var(--nw) * .05); right: calc(var(--nw) * .05); display: grid; grid-template-columns: 1fr 1fr; padding: .15em; border-radius: .6em; background: rgb(255 255 255 / .1); font-size: .82em; font-weight: 600; text-align: center; }
.vo__seg span { padding: .3em 0; border-radius: .5em; color: #c5cdda; }
.vo__seg .is-on { background: rgb(255 255 255 / .2); color: #fff; }
.vo__list { position: absolute; top: calc(var(--nw) * .47); left: calc(var(--nw) * .05); right: calc(var(--nw) * .05); padding: .2em; border-radius: calc(var(--nw) * .05); background: #111a2b; }
.nph .vo__row { padding: .55em .6em; border-radius: .6em; }
.nph .vo__row b { font-size: .92em; }
.nph .vo__row em { font-size: .74em; }
.nph .vo__st { font-size: .76em; }
.nph .vo__row.is-focus { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #000; }
.vo__caption { position: absolute; left: calc(var(--nw) * .03); right: calc(var(--nw) * .03); bottom: calc(var(--nw) * .08); padding: .55em .7em; border-radius: calc(var(--nw) * .035); background: rgb(40 40 44 / .96); font-size: .8em; line-height: 1.35; color: #fff; }
@keyframes nph-caret { 50% { opacity: 0; } }
.spot__caret { animation-name: nph-caret; }
@media (prefers-reduced-motion: reduce) { .spot__caret { animation: none; } }

/* seats: on the page's own dark ground; the pair sits in the middle of the screen, so a tall window
   doesn't leave a band of empty ground under it */
@media (min-width: 1024px) {
  #seats > .wrap { height: 100%; display: grid; align-content: center; }
  #seats > .wrap > .grid { align-items: center; }
}

/* questions: eight answers fill one screen on most desktops; on a short desktop window they take two */
/* the eight answers in two columns under the heading, so they fit one screen; on a tall window the
   block sits in the middle of the screen */
@media (min-width: 900px) {
  .faq--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .faq--2 > .faq__item:nth-child(2) { padding-top: 0; }
}


/* ---------- who: chains and independents ---------- */
.who__card { padding: var(--s-6); gap: var(--s-3); }
.who__tag { color: var(--accent); }
.who__list { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-3); }
.who__list li { position: relative; padding-left: 22px; color: var(--ink); }
.who__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- plan: the forecast through three roles (one screen: the shot fills what the head leaves) ---------- */
.plan__head { align-items: end; }
.plan__intro p { color: var(--ink); }
.plan__panes { margin-top: var(--s-7); position: relative; }
.plan__pane { height: 100%; align-items: start; }
.plan__copy h3 { font-size: var(--t-card); font-weight: 500; }
.plan__copy p { color: var(--ink); }
.plan__shot { height: 100%; min-height: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgb(255 255 255 / .12);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.plan__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.plan__note { margin-top: var(--s-3); }
@media (max-width: 1023px) {
  .plan__head > *, .plan__copy, .plan__shot { grid-column: 1 / -1; }
  .plan__intro { margin-top: var(--s-4); }
  .plan__pane { height: auto; }
  .plan__shot { height: auto; aspect-ratio: 1280 / 700; }
  .plan__copy { margin-bottom: var(--s-4); }
}
@media (max-width: 639px) { #who, #plan, #platform { --hm: 2; } }

/* ---------- platform ---------- */
.platform .card { padding: var(--s-6); }

/* Sections grow with their content instead of being exactly one or two screens: a fixed height let a
   section's content run into the next one on short or narrow windows (connect into questions, questions
   into the footer). Each still fills at least its screens, so the full-screen sections look as before. */
main > :is(section, .section):not(.hero, [data-moment]), footer.closing {
  height: auto !important; display: flex; flex-direction: column;
  min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh);
}
/* the wrap takes the section's height, so a .fill frame still runs down to the screen's foot */
main > :is(section, .section):not(.hero, [data-moment]) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero, [data-moment]), footer.closing { min-height: calc(var(--hm, var(--h, 1)) * 100lvh); }
}
/* the short card sections are only as tall as their content, so no band of empty ground follows them */
main > section:is(#who, #remote, #platform, #seats, #questions) { min-height: 0; }

/* no pause buttons on the page's moving pictures, at the owner's request (reduced motion still stops them) */
.loop-pause { display: none !important; }

/* seats: a map that fills most of a screen */
@media (min-width: 1024px) { #seats .seatmap { height: clamp(560px, 100svh - var(--padt) - var(--padb) - 8px, 760px); } }

/* ---------- who: a small loop in each card that shows its claim ---------- */
.who__vis { position: relative; margin: calc(-1 * var(--s-2)) 0 var(--s-3); padding: 16px; border-radius: 14px; background: #070b10; border: 1px solid #1a2330; font-size: 13px; color: #c5cdda; overflow: hidden; }
/* chains: a release rolls out across the estate, one cinema at a time */
.wv__head { display: flex; justify-content: space-between; gap: 12px; }
.wv__head span:first-child { color: #f4f7fb; font-weight: 500; }
.wv__state { color: #93f1f7; }
.wv__bar { height: 4px; margin: 12px 0 14px; border-radius: 99px; background: #1a2330; overflow: hidden; }
.wv__bar i { display: block; height: 100%; width: 100%; background: #93f1f7; transform-origin: left; }
.wv__sites { display: flex; flex-wrap: wrap; gap: 8px; }
.wv__site { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px; border: 1px solid #1f2b3a; color: #8e9ab0; animation: 8s ease-in-out infinite; }
.wv__site b { width: 7px; height: 7px; border-radius: 50%; background: #3a4658; animation: 8s ease-in-out infinite; }
/* one clock for the whole card: each cinema goes live in turn as the bar fills, then all reset together */
.wv__site:nth-child(1) { animation-name: wv-site-0; } .wv__site:nth-child(1) b { animation-name: wv-dot-0; }
@keyframes wv-site-0 { 0%, 7% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } 10%, 90% { color: #f4f7fb; border-color: rgb(147 241 247 / .45); background: rgb(147 241 247 / .08); } 97%, 100% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } }
@keyframes wv-dot-0 { 0%, 7% { background: #3a4658; box-shadow: none; } 10%, 90% { background: #93f1f7; box-shadow: 0 0 0 4px rgb(147 241 247 / .18); } 97%, 100% { background: #3a4658; box-shadow: none; } }
.wv__site:nth-child(2) { animation-name: wv-site-1; } .wv__site:nth-child(2) b { animation-name: wv-dot-1; }
@keyframes wv-site-1 { 0%, 17% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } 20%, 90% { color: #f4f7fb; border-color: rgb(147 241 247 / .45); background: rgb(147 241 247 / .08); } 97%, 100% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } }
@keyframes wv-dot-1 { 0%, 17% { background: #3a4658; box-shadow: none; } 20%, 90% { background: #93f1f7; box-shadow: 0 0 0 4px rgb(147 241 247 / .18); } 97%, 100% { background: #3a4658; box-shadow: none; } }
.wv__site:nth-child(3) { animation-name: wv-site-2; } .wv__site:nth-child(3) b { animation-name: wv-dot-2; }
@keyframes wv-site-2 { 0%, 27% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } 30%, 90% { color: #f4f7fb; border-color: rgb(147 241 247 / .45); background: rgb(147 241 247 / .08); } 97%, 100% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } }
@keyframes wv-dot-2 { 0%, 27% { background: #3a4658; box-shadow: none; } 30%, 90% { background: #93f1f7; box-shadow: 0 0 0 4px rgb(147 241 247 / .18); } 97%, 100% { background: #3a4658; box-shadow: none; } }
.wv__site:nth-child(4) { animation-name: wv-site-3; } .wv__site:nth-child(4) b { animation-name: wv-dot-3; }
@keyframes wv-site-3 { 0%, 37% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } 40%, 90% { color: #f4f7fb; border-color: rgb(147 241 247 / .45); background: rgb(147 241 247 / .08); } 97%, 100% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } }
@keyframes wv-dot-3 { 0%, 37% { background: #3a4658; box-shadow: none; } 40%, 90% { background: #93f1f7; box-shadow: 0 0 0 4px rgb(147 241 247 / .18); } 97%, 100% { background: #3a4658; box-shadow: none; } }
.wv__site:nth-child(5) { animation-name: wv-site-4; } .wv__site:nth-child(5) b { animation-name: wv-dot-4; }
@keyframes wv-site-4 { 0%, 47% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } 50%, 90% { color: #f4f7fb; border-color: rgb(147 241 247 / .45); background: rgb(147 241 247 / .08); } 97%, 100% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } }
@keyframes wv-dot-4 { 0%, 47% { background: #3a4658; box-shadow: none; } 50%, 90% { background: #93f1f7; box-shadow: 0 0 0 4px rgb(147 241 247 / .18); } 97%, 100% { background: #3a4658; box-shadow: none; } }
.wv__site:nth-child(6) { animation-name: wv-site-5; } .wv__site:nth-child(6) b { animation-name: wv-dot-5; }
@keyframes wv-site-5 { 0%, 57% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } 60%, 90% { color: #f4f7fb; border-color: rgb(147 241 247 / .45); background: rgb(147 241 247 / .08); } 97%, 100% { color: #8e9ab0; border-color: #1f2b3a; background: transparent; } }
@keyframes wv-dot-5 { 0%, 57% { background: #3a4658; box-shadow: none; } 60%, 90% { background: #93f1f7; box-shadow: 0 0 0 4px rgb(147 241 247 / .18); } 97%, 100% { background: #3a4658; box-shadow: none; } }
.wv__bar i { animation: wv-fill 8s ease-in-out infinite; }
@keyframes wv-fill { 0%, 5% { transform: scaleX(0); opacity: 1; } 62%, 90% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
.wv__state { display: grid; } .wv__state > span { grid-area: 1 / 1; text-align: right; }
.wv__s1 { animation: wv-s1 8s steps(1) infinite; } .wv__s2 { opacity: 0; animation: wv-s2 8s steps(1) infinite; }
@keyframes wv-s1 { 0% { opacity: 1; } 64% { opacity: 0; } 97% { opacity: 1; } }
@keyframes wv-s2 { 0% { opacity: 0; } 64% { opacity: 1; } 97% { opacity: 0; } }
.who__vis { min-height: 124px; box-sizing: border-box; }
/* independents: one app, the brand colour of whoever runs it */
.who__vis--indie { display: grid; gap: 14px; }
.wv__app { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #0e141c; }
.wv__dot { width: 12px; height: 12px; border-radius: 50%; animation: wv-brand 8s steps(1) infinite; }
.wv__name { flex: 1; color: #f4f7fb; font-weight: 600; font-size: 15px; }
.wv__btn { padding: 6px 12px; border-radius: 99px; color: #0b0b0f; font-weight: 600; animation: wv-brand 8s steps(1) infinite; transition: background .4s; }
.wv__swatches { display: flex; gap: 10px; }
.wv__swatches i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #070b10; animation: wv-ring 8s steps(1) infinite; }
.wv__swatches i:nth-child(2) { animation-delay: -6s; } .wv__swatches i:nth-child(3) { animation-delay: -4s; } .wv__swatches i:nth-child(4) { animation-delay: -2s; }
@keyframes wv-brand { 0% { background: #2dd4bf; } 25% { background: #ff5a6a; } 50% { background: #ff8a3d; } 75% { background: #f2d04b; } }
@keyframes wv-ring { 0% { box-shadow: 0 0 0 2px #070b10, 0 0 0 4px #f4f7fb; } 25%, 100% { box-shadow: 0 0 0 2px #070b10; } }

/* ---------- platform: an icon per card, and a slow light travelling round each card's edge ---------- */
@property --plat-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.platform .card { position: relative; isolation: isolate; }
.platform .card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--plat-a), transparent 0 70%, rgb(147 241 247 / .55) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: plat-edge 9s linear infinite; pointer-events: none;
}
.platform .card:nth-child(2)::before { animation-delay: -1.5s; } .platform .card:nth-child(3)::before { animation-delay: -3s; }
.platform .card:nth-child(4)::before { animation-delay: -4.5s; } .platform .card:nth-child(5)::before { animation-delay: -6s; } .platform .card:nth-child(6)::before { animation-delay: -7.5s; }
@keyframes plat-edge { to { --plat-a: 360deg; } }
.plat__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-3); border-radius: 11px; background: rgb(147 241 247 / .1); color: var(--accent); transition: transform .25s ease, background .25s ease; }
.plat__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.platform .card:hover .plat__ico { transform: translateY(-2px) scale(1.06); background: rgb(147 241 247 / .18); }

@media (prefers-reduced-motion: reduce) {
  .who__vis *, .platform .card::before { animation: none !important; }
  .wv__bar i { transform: none; } .wv__s1 { opacity: 0; } .wv__s2 { opacity: 1; } .wv__site { color: #f4f7fb; border-color: rgb(147 241 247 / .45); } .wv__site b, .wv__dot, .wv__btn { background: #93f1f7; }
  .platform .card::before { display: none; }
}
/* remote: the table never squeezes below its own rows on a short window; the section grows instead */
#remote > .wrap > .fill { flex: 1 0 auto; }

/* footer column headings are h3 (after the close's h2, so the outline never skips a level); styled as the kit's footer h4 */
.footer .footer__col > h3 { font: 500 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-4); }
/* connect: on a phone the diagram's frame had no height of its own and showed only the core; give it room
   for the stacked layout */
@media (max-width: 639px) { main > #connect > .wrap > .connect__frame { flex: none; height: 420px; } }

/* remote: the phone's panel is as tall as the phone it frames (it stretched to the section's height on a
   tall window, a large empty teal box); the phone's foot is cropped and faded */
@media (min-width: 1024px) {
  .remote-grid { align-items: start; }
  .remote-shot { height: 560px; min-height: 0; overflow: hidden; }
  .remote-shot .device--remote { -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
}

/* hero spotlight: a soft, eased falloff instead of one linear fade to 72% (it read as a hard-edged
   hole in the ground); the dot grid it reveals fades the same way */
.hero-phones.mo-cs > .mo-cs__light {
  background: radial-gradient(var(--mo-r) circle at var(--mo-x) var(--mo-y),
    color-mix(in oklab, var(--surface) 70%, transparent) 0%,
    color-mix(in oklab, var(--surface) 55%, transparent) 22%,
    color-mix(in oklab, var(--surface) 32%, transparent) 42%,
    color-mix(in oklab, var(--surface) 14%, transparent) 62%,
    color-mix(in oklab, var(--surface) 4%, transparent) 80%,
    transparent 100%);
}
.hero-phones.mo-cs > .mo-cs__light::after {
  -webkit-mask-image: radial-gradient(calc(var(--mo-r) * 0.85) circle at var(--mo-x) var(--mo-y), #000 0%, rgb(0 0 0 / .7) 30%, rgb(0 0 0 / .35) 55%, rgb(0 0 0 / .1) 78%, transparent 100%);
  mask-image: radial-gradient(calc(var(--mo-r) * 0.85) circle at var(--mo-x) var(--mo-y), #000 0%, rgb(0 0 0 / .7) 30%, rgb(0 0 0 / .35) 55%, rgb(0 0 0 / .1) 78%, transparent 100%);
}

/* hero lockup on scroll: as the hero leaves the screen the side phones fan out and tilt a little and the
   centre phone rises, driven by the page's own scroll (no script). Only where scroll timelines exist,
   from 1024px up, and never under reduced motion; elsewhere the phones stay as they are. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .hero-phone { animation: linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .hero-phone--main { animation-name: lock-main; }
    .hero-phones__row > .hero-phone--side:first-child { animation-name: lock-left; }
    .hero-phones__row > .hero-phone--side:last-child { animation-name: lock-right; }
  }
}
@keyframes lock-main { to { translate: 0 -56px; scale: 1.04; } }
@keyframes lock-left { to { translate: -64px 10px; rotate: -5deg; } }
@keyframes lock-right { to { translate: 64px 10px; rotate: 5deg; } }

/* ---------- closing: a visual demo panel, then a footer that maps the platform ---------- */
footer.closing { min-height: 0 !important; }
.cta-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--s-6);
  overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgb(147 241 247 / .22);
  background: radial-gradient(90% 120% at 85% 10%, #1b6b6f 0%, #0f4c53 30%, #0a3238 55%, #050f13 100%);
  box-shadow: 0 40px 120px -50px rgb(147 241 247 / .35);
}
.cta-panel__copy { display: grid; gap: var(--s-4); padding: var(--s-8) 0 var(--s-8) var(--s-8); align-content: center; }
.cta-panel__tag { justify-self: start; }
.cta-panel__copy h2 { max-width: 14ch; }
.cta-panel__copy .t-lead { color: rgb(255 255 255 / .82); max-width: 40ch; }
.cta-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-2); }
.cta-panel__points { display: flex !important; flex-wrap: wrap; gap: 8px 10px; margin-top: var(--s-3); list-style: none; padding: 0; }
.cta-panel__points > li { width: auto; flex: 0 0 auto; }
.cta-panel__points li { padding: 6px 12px 6px 28px; position: relative; border-radius: 99px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); font-size: var(--t-small); color: rgb(255 255 255 / .86); }
.cta-panel__points li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); }
.cta-panel__visual { align-self: end; margin-top: var(--s-7); }
.cta-panel__visual img { display: block; width: 100%; height: auto;
  /* the shot's own ground melts into the panel: a long eased fade at its top and left, no edge */
  -webkit-mask: linear-gradient(90deg, transparent, rgb(0 0 0 / .5) 10%, #000 22%), linear-gradient(transparent 0%, rgb(0 0 0 / .15) 12%, rgb(0 0 0 / .5) 26%, rgb(0 0 0 / .85) 40%, #000 52%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, rgb(0 0 0 / .5) 10%, #000 22%) intersect, linear-gradient(transparent 0%, rgb(0 0 0 / .15) 12%, rgb(0 0 0 / .5) 26%, rgb(0 0 0 / .85) 40%, #000 52%); }
@media (max-width: 1023px) {
  .cta-panel { grid-template-columns: minmax(0, 1fr); }
  .cta-panel__copy { padding: var(--s-7) var(--s-6) 0; }
  .cta-panel__visual { margin-top: 0; }
  .cta-panel__visual img { -webkit-mask: linear-gradient(transparent, rgb(0 0 0 / .5) 20%, #000 40%); mask: linear-gradient(transparent, rgb(0 0 0 / .5) 20%, #000 40%); }
}
.closing__cta .close__word { margin-top: var(--s-8); }
.footer__soon { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 11px; line-height: 16px; vertical-align: 1px; color: var(--accent); border: 1px solid rgb(147 241 247 / .35); }
.footer .footer__col ul { display: grid; gap: var(--s-2); }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


/* ---------- header: a floating bar, inset from the top and sides, glass over the page ---------- */
.nav { top: 12px; background: transparent; border-bottom: 0; }
.nav > .nav__bar {
  height: calc(var(--nav) - 12px); padding: 0 8px 0 20px; border-radius: 999px;
  background: rgb(10 12 14 / .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 12px 40px -18px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .04);
}
.nav .nav__actions .btn { height: 40px; }
@media (max-width: 1023px) { .nav { top: 8px; } .nav > .nav__bar { padding: 0 6px 0 16px; height: calc(var(--nav) - 8px); } }

/* ---------- footer: the name set huge at the page's foot, rising out of a teal glow ---------- */
footer.closing { position: relative; overflow: hidden; padding-bottom: 0 !important; }
footer.closing { background: radial-gradient(70% 520px at 50% 100%, #1b6b6f 0%, rgb(15 76 83 / .75) 30%, rgb(10 50 56 / .35) 58%, transparent 80%), var(--bg, #000) !important; }
footer.closing > .wrap { position: relative; z-index: 1; }
.footer__word.close__word {
  margin: var(--s-8) 0 -0.12em; text-align: center; line-height: .82; white-space: nowrap;
  font-size: min(calc((100vw - 2 * var(--gut)) / 3.5), 380px);
  background: linear-gradient(180deg, rgb(255 255 255 / .95) 0%, rgb(222 252 255 / .8) 45%, rgb(147 241 247 / .35) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__top { margin-left: var(--s-4); color: var(--muted); text-decoration: none !important; }
.footer__top:hover { color: var(--ink); }
/* the open phone menu is fixed to the screen; a backdrop-filter on the bar would make the bar its
   containing block and clip it, so the open bar drops the filter and goes solid */
.nav.is-open > .nav__bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.nav.is-open { top: 0; background: var(--bg); }
.nav.is-open > .nav__bar { border-radius: 0; border-color: transparent; box-shadow: none; }

/* ---------- hero: one full-bleed glow, no box ----------
   The whole hero is lit: black at the top, deepening through teal to a bright glow behind the phones,
   then easing back to the page's black at its foot, so the next section follows on with no seam.
   Many close stops keep every step of the blend soft; the kit's grain stays on top to stop banding.
   The phones' own window has no ground of its own any more. */
.hero.bg-deep {
  position: relative;
  background-image:
    radial-gradient(44% 30% at 50% 68%, rgb(150 240 246 / .22) 0%, rgb(100 210 218 / .14) 30%, rgb(50 160 168 / .07) 60%, rgb(20 110 118 / .02) 85%, transparent 100%),
    radial-gradient(85% 33% at 50% 66%, rgb(26 128 136 / .5) 0%, rgb(20 104 112 / .38) 22%, rgb(13 78 86 / .24) 45%, rgb(8 52 58 / .11) 68%, rgb(4 26 30 / .03) 88%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 12%, #010507 24%, #03141a 36%, #052228 48%, #07313a 58%, #08373f 66%, #062c33 75%, #041b20 84%, #020b0d 92%, #000 100%),
    var(--g-noise-scr) !important;
  background-blend-mode: normal, normal, normal, screen !important;
}
.hero.bg-deep::before { display: none !important; }
/* the window draws nothing of its own: no fill, no edge. It only fades the phones out at its foot. */
.hero-phones.hero__window { background: none !important; box-shadow: none !important;
  -webkit-mask: linear-gradient(#000 45%, rgb(0 0 0 / .6) 72%, rgb(0 0 0 / .2) 88%, transparent 100%) !important;
  mask: linear-gradient(#000 45%, rgb(0 0 0 / .6) 72%, rgb(0 0 0 / .2) 88%, transparent 100%) !important; }
/* the spotlight only lifts the dot grid on the glow; no dark surface, and it reaches nothing at every edge */
.hero-phones.mo-cs > .mo-cs__light { background: none !important;
  -webkit-mask: radial-gradient(closest-side, #000 35%, rgb(0 0 0 / .5) 65%, transparent 100%);
  mask: radial-gradient(closest-side, #000 35%, rgb(0 0 0 / .5) 65%, transparent 100%); }
.hero-phones__row { z-index: 2; }

/* the hero's news pill stays on one line: on a phone it keeps only its label */
.hero--centred .pill { white-space: nowrap; max-width: 100%; }
@media (max-width: 640px) { .hero--centred .pill > .muted { display: none; } }

/* buttons stay put on hover: the colour and the arrow answer the pointer, the button never lifts or scales */
html:not([data-motion="off"]) .btn:hover, html:not([data-motion="off"]) .btn--xl:hover { transform: none; }

/* phones */
@media (max-width: 639px) {
  /* sections are as tall as what they hold: no frame stretched to two screens, no empty band (the pinned journey keeps its own height) */
  main > section:not([data-moment]) { min-height: 0 !important; }
  main > section:not([data-moment]) .fill { flex: none !important; }
  /* the hero grows to hold its phone window, so the phones fade out inside it instead of being cut at its foot */
  .hero.hero--centred { height: auto !important; }
  .hero.hero--centred .hero__window { flex: none; }
}
/* the CTA chips stay on one line where there is room, and wrap on a phone rather than run off it */
.cta-panel__points > li { white-space: nowrap; }

/* the portal-or-build table: on a phone, one line per row, the thing on the left and one chip on the right
   (Live from the portal, or New build), with the column headings kept for screen readers only */
.cmp__m { display: none; }
@media (max-width: 639px) {
  .cmp__row--head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmp__row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 0; padding-block: 12px; }
  .cmp__row > :first-child { grid-column: auto; font-weight: 400; }
  .cmp__row > .cmp__no { display: none; }
  .cmp__row > .cmp__yes { justify-self: end; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: var(--t-small);
    background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
  .cmp__row > .cmp__yes--build { background: rgb(255 255 255 / .08); color: var(--ink); }
  .cmp__yes--build::before { display: none; }
  .cmp__d { display: none; }
  .cmp__m { display: inline; }
}

/* desktop Product dropdown: a floating card under the floating bar, the same inset, glass and corner language,
   with an invisible bridge across the gap so the pointer can travel from the word into the card */
@media (min-width: 1024px) {
  .nav > .nav__bar .nav__menu {
    top: calc(100% + 8px); left: 0; right: 0; border-radius: 28px;
    background: #0a0c0e; border: 1px solid rgb(255 255 255 / .1);
    box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 28px 64px -24px rgb(0 0 0 / .7);
    padding: 28px 0 32px;
  }
  .nav > .nav__bar .nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .nav > .nav__bar .nav__menu > .wrap { width: auto; max-width: none; padding-inline: 28px; }
  .nav > .nav__bar .menu-card { padding: 8px; margin: -8px; border-radius: 20px; transition: background-color .2s ease; }
  .nav > .nav__bar .menu-card:hover, .nav > .nav__bar .menu-card:focus-visible { background: rgb(255 255 255 / .05); }
  .nav > .nav__bar .menu-card { align-content: start; }
  .nav > .nav__bar .menu-card .panel { border-radius: 14px; }
}
/* narrow desktops: the release card's lines stay on one line each */
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu-rel { width: 90%; padding: 12px; gap: 8px; }
  .menu-rel p { font-size: 11px; white-space: nowrap; gap: 8px; }
  .menu-rel__sw i { width: 18px; height: 18px; }
}

/* footer on a phone: links tall enough to tap, and the bottom row stacks (copyright, then Back to top) */
@media (max-width: 639px) {
  .footer .footer__col ul { gap: 0; }
  .footer .footer__col li > a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer__legal > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer__legal .footer__top { margin-left: 0; display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
}

/* phones and tablets: the floating bar splits into three shapes. The logo sits in its own glass pill on the
   left; the demo button and a round glass menu button float on the right. The open menu is unchanged. */
@media (max-width: 1023px) {
  .nav:not(.is-open) > .nav__bar { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 8px; }
  .nav:not(.is-open) .nav__logo, .nav:not(.is-open) .nav__toggle {
    height: 48px; background: rgb(10 12 14 / .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 12px 40px -18px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .04);
  }
  .nav:not(.is-open) .nav__logo { padding: 0 18px 0 14px; border-radius: 999px; }
  .nav:not(.is-open) .nav__actions { margin-left: auto; }
  .nav:not(.is-open) .nav__actions .btn { height: 48px; box-shadow: 0 12px 40px -18px rgb(0 0 0 / .8); }
  .nav:not(.is-open) .nav__toggle { margin-left: 0; width: 48px; border-radius: 50%; }
}

/* the three header shapes share one box: the same height, sizing, corners and centre line, on every engine */
@media (max-width: 1023px) {
  .nav:not(.is-open) > .nav__bar { align-items: center; }
  .nav:not(.is-open) .nav__logo, .nav:not(.is-open) .nav__actions .btn, .nav:not(.is-open) .nav__toggle {
    box-sizing: border-box; height: 48px; min-height: 48px; max-height: 48px; flex: none; align-self: center;
    border: 1px solid rgb(255 255 255 / .1); line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  }
  .nav:not(.is-open) .nav__actions { display: flex; align-items: center; height: 48px; }
  .nav:not(.is-open) .nav__actions .btn { border-color: transparent; border-radius: 999px; padding-inline: 20px; }
  .nav:not(.is-open) .nav__toggle { width: 48px; padding: 0; }
}
/* phones: the header button reads just "Book" (screen readers still hear "Book a demo") */
@media (max-width: 639px) { .nav__cta-more { display: none; } }