/* 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;
  background: radial-gradient(70% 90% at 50% 0%, #1b6b6f 0%, #0f4c53 34%, #0a3238 64%, #071f24 100%); }
.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 / .14); box-shadow: 0 0 0 1px rgb(147 241 247 / .08), 0 40px 120px -40px rgb(147 241 247 / .25); }

/* 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 */
@media (min-width: 1024px) and (max-height: 700px) { #questions { --h: 2; } }
/* 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: 1024px) and (max-height: 1099px) {
  .faq--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .faq--2 > .faq__item:nth-child(2) { padding-top: 0; }
}
@media (min-width: 1024px) { #questions > .wrap { height: 100%; display: grid; align-content: center; } }