:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #091720; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #65e4d2; outline-offset: 4px; }
[hidden] { display: none !important; }
.chooser { max-width: 840px; margin: auto; padding: max(30px, env(safe-area-inset-top)) 24px 40px; }
.eyebrow { color: #77decd; text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: bold; }
h1 { font-size: clamp(32px, 7vw, 54px); margin: 12px 0; letter-spacing: -.04em; }
.intro, .hint { color: #bacbd1; line-height: 1.6; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.demo-card { background: #132b36; border: 1px solid #38505b; border-radius: 18px; padding: 22px; color: white; text-align: left; min-height: 160px; }
.demo-card[aria-pressed='true'] { border-color: #77decd; box-shadow: inset 0 0 0 2px #77decd; }
.demo-card span, .demo-card strong { display: block; }
.demo-card strong { font-size: 22px; margin: 14px 0 8px; }
.demo-card span { font-size: 12px; color: #bacbd1; }
.show { display: block; width: 100%; padding: 18px; background: #77decd; color: #09242b; border: 0; border-radius: 12px; font-weight: bold; font-size: 18px; }
.utility { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.utility a { color: #bacbd1; }
.stage { min-height: 100svh; background: #06111a; padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 44px; flex-shrink: 0; }
.stage-bar button { background: transparent; color: #fff; border: 1px solid #69808c; border-radius: 8px; padding: 8px 14px; }
.stage-bar span { color: #bacbd1; font-size: 12px; }
.tv-screen { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 30%); align-items: center; gap: 26px; padding: 12px 24px; background: radial-gradient(ellipse at 15% 25%, #244c5a, #0a1b28 70%); border-radius: 18px; }
.tv-copy { max-width: 680px; }
.tv-copy .eyebrow { color: #77decd; }
.tv-copy h2 { font-size: clamp(26px, 5vw, 68px); line-height: 1.03; letter-spacing: -.04em; margin: 14px 0; }
.tv-copy .headline { font-size: clamp(16px, 2.5vw, 28px); line-height: 1.25; color: #d8e7eb; }
.tv-copy .handoff { font-size: 13px; color: #b3c6cf; }
.qr-panel { background: white; color: #10242d; padding: 12px; border-radius: 14px; text-align: center; width: 100%; max-width: 320px; justify-self: center; }
.qr-panel img { width: 100%; height: auto; display: block; }
.qr-panel strong { display: block; font-size: 16px; }
.qr-panel small { display: block; font-size: 11px; margin-top: 6px; overflow-wrap: anywhere; }
.stage-nav { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; gap: 12px; }
.stage-nav button { min-height: 36px; border: 0; border-radius: 8px; padding: 8px 16px; background: #213d49; color: #fff; }
.stage-nav span { font-size: 11px; color: #bacbd1; }
.print-codes { display: none; }
@media (max-width: 540px) and (orientation: portrait) { .demo-grid { gap: 10px; } .demo-card { padding: 14px; } .demo-card strong { font-size: 19px; } .tv-screen { grid-template-columns: 1fr; padding: 20px; } .tv-copy h2 { font-size: 34px; } .qr-panel { max-width: 250px; } }
@media (orientation: landscape) and (max-height: 500px) { .tv-screen { gap: 18px; padding: 6px 18px; grid-template-columns: minmax(0, 1fr) 200px; } .qr-panel { padding: 8px; } .tv-copy h2 { font-size: clamp(28px, 5vw, 44px); margin: 8px 0; } .tv-copy .headline { font-size: 18px; margin: 8px 0; } .tv-copy .handoff { margin: 8px 0; } .stage { padding-top: 4px; padding-bottom: 4px; } .stage-bar { height: 36px; } .stage-nav { padding-top: 4px; } .stage-nav button { min-height: 28px; padding: 4px 12px; } }
@media print { :root { color-scheme: light; background: white; color: black; } .chooser, .stage { display: none !important; } .print-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .print-code { text-align: center; break-inside: avoid; border: 1px solid #999; padding: 12px; } .print-code img { width: 180px; height: 180px; } .print-code p { font-size: 11px; overflow-wrap: anywhere; } }

/* TV presentation uses neutral framing and product artwork, never IH brand tokens. */
.stage { background: #111; height: 100svh; min-height: 0; }
.stage-bar span, .stage-nav span { color: #ddd; }
.stage-bar button { border-color: #777; }
.stage-nav button { background: #333; }
.tv-screen { min-height: 0; padding: 0; background: #111; border-radius: 0; gap: 16px; grid-template-columns: minmax(0, 1fr) 200px; }
.tv-art { min-width: 0; min-height: 0; height: 100%; display: grid; place-items: center; }
.tv-creative { display: block; width: 100%; height: 100%; object-fit: contain; }
.qr-panel { border-radius: 8px; }
@media (min-height: 600px) and (orientation: landscape) { .tv-screen { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (max-width: 540px) and (orientation: portrait) {
  .stage { height: auto; min-height: 100svh; }
  .tv-screen { grid-template-columns: 1fr; gap: 20px; padding: 16px 0; }
  .tv-art { height: auto; aspect-ratio: 16/9; }
  .qr-panel { width: 240px; }
}

/* Constrain artwork to the flex stage slot so it cannot cover navigation. */
.tv-art { position: relative; height: auto; align-self: stretch; overflow: hidden; }
.tv-creative { position: absolute; inset: 0; }
.stage-nav { flex-shrink: 0; }

/* One 16:9 broadcast canvas: artwork, website strip and real QR overlay. */
.tv-screen { container-type: inline-size; position: relative; display: block; flex: none; width: min(100%, calc((100svh - 100px) * 1672 / 941)); aspect-ratio: 1672 / 941; margin: auto; padding: 0; background: #002240; overflow: hidden; }
.tv-art { position: absolute; inset: 0; display: block; height: 100%; aspect-ratio: auto; }
.tv-creative { width: 100%; height: 100%; object-fit: fill; }
.tv-bottom-bar { position: absolute; inset: auto 0 0; height: 12.4%; background: #bd0923; color: #fff; display: flex; align-items: center; padding: 0 24% 0 3%; justify-content: center; }
.tv-bottom-bar strong { font-size: 4.3cqw; line-height: 1; white-space: nowrap; }
/* The supplied wagon already contains the approved website bar. */
.tv-screen[data-plan="EP-0004"] .tv-bottom-bar { display: none; }
.qr-panel { position: absolute; right: 2.5%; bottom: 1.7%; width: 17.5%; max-width: none; margin: 0; padding: 0; background: transparent; color: white; border-radius: 0; }
.qr-panel img { background: white; width: 100%; height: auto; border-radius: 3%; }
.qr-panel strong { position: absolute; bottom: 100%; width: 100%; margin: 0 0 2%; font-size: 1.8cqw; line-height: 1.25; white-space: nowrap; text-shadow: 0 1px 3px #001c36; }
@media (max-height: 500px) and (orientation: landscape) { .tv-screen { width: min(100%, calc((100svh - 72px) * 1672 / 941)); } }
@media (max-width: 540px) and (orientation: portrait) { .tv-screen { width: 100%; margin: 20px auto; } }

/* Reserve the lower strip so existing commercial captions remain visible. */
.tv-screen:not([data-plan='EP-0004']) .tv-art { height: 87.6%; bottom: auto; }

/* Fill the safe viewport in landscape without cropping the broadcast or its QR. */
@media (orientation: landscape) {
  .stage { height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: hidden; }
  .stage-bar, .stage-nav { display: none; }
  .stage:focus { outline: none; }
  .tv-screen { width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1672 / 941)); margin: auto; }
}
.chooser .install-area { margin-top: 20px; }
.chooser .install-area button { padding: 12px 16px; border: 1px solid #0F52BA; border-radius: 4px; background: transparent; color: #0F52BA; font: inherit; }
.chooser #install-help { margin-top: 12px; padding: 16px; background: #D4F1EC; color: #0E1726; border-radius: 8px; line-height: 1.5; }