/* BPYL: real engineering, company blue, clear typography and measured detail. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --ink: #0b1620; --ink-2: #152733; --paper: #f8f9f6; --paper-2: #edf0ec;
  --text: #142631; --text-2: #50616a; --on-dark: #f7f9f8; --on-dark-2: #b5c5ce;
  --accent: #043c5e; --accent-hover: #07527f; --accent-light: #a4d6ef;
  --line: #ccd4d2; --line-dark: #344a58;
  --wrap: 1280px; --header-height: 80px; --gutter: clamp(20px,4vw,56px);
  --section: clamp(64px,7vw,104px);
  --sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; }
h1,h2,h3,h4,p,figure,dl,dd { margin: 0; }
h1,h2,h3,h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.65rem,4.4vw,4.25rem); }
h2 { font-size: clamp(2rem,3.1vw,3rem); max-width: 22ch; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.125rem; }
ul,ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
section[tabindex="-1"]:focus { outline: none; }
.hero :focus-visible,.header :focus-visible,.footer :focus-visible,.contact :focus-visible { outline-color: var(--accent-light); }
.mono { font-family: var(--mono); font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2*var(--gutter)); padding: 0 var(--gutter); margin: 0 auto; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; color: white; background: var(--accent); }
.skip:focus { top: 12px; }
.eyebrow { color: var(--accent); font-size: .6875rem; font-weight: 700; letter-spacing: .11em; line-height: 1.6; text-transform: uppercase; margin-bottom: 20px; }
.section { padding: var(--section) 0; }
.section-heading { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 64px; margin-bottom: 48px; }
.lead { max-width: 52ch; color: var(--text-2); font-size: 1.125rem; }
.prose { max-width: 55ch; }
.prose p + p { margin-top: 16px; }
.note { color: var(--text-2); font-size: .8125rem; line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 13px 20px; border: 1px solid var(--accent); color: white; background: var(--accent); font-weight: 700; font-size: .875rem; line-height: 1.4; text-decoration: none; transition: background-color .15s,border-color .15s; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--small { min-height: 44px; padding: 11px 16px; font-size: .8125rem; }
.btn--light { color: var(--accent); background: var(--on-dark); border-color: var(--on-dark); }
.btn--light:hover { background: var(--accent-light); border-color: var(--accent-light); }
.text-link,.utility-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--accent); font-weight: 600; font-size: .875rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.utility-link { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.text-link:hover,.utility-link:hover { text-decoration-thickness: 2px; }

/* Navigation follows the buyer's path; language remains visible on mobile. */
.header { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--on-dark); background: var(--ink); border-bottom: 1px solid var(--line-dark); }
.header__inner { display: flex; align-items: center; gap: 32px; min-height: var(--header-height); }
.logo { display: inline-flex; flex-shrink: 0; width: 126px; text-decoration: none; }
.logo img { width: 100%; height: auto; }
.logo--small { width: 100px; }
.nav { margin-left: auto; }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-2); font-size: .8125rem; text-decoration: none; border-bottom: 1px solid transparent; }
.nav__links a:hover,.nav__links a[aria-current="location"] { color: white; border-color: var(--accent-light); }
.header__actions { display: flex; align-items: center; gap: 24px; }
.lang { display: flex; align-items: center; font-size: .6875rem; font-weight: 700; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; color: var(--on-dark-2); text-decoration: none; }
.lang a[aria-current] { color: white; text-decoration: underline; text-underline-offset: 5px; }
.menu-toggle { display: none; }

/* The aircraft photograph carries the opening, with no autoplay or overlays over the copy. */
.hero { padding-top: calc(var(--header-height) + 56px); color: var(--on-dark); background: var(--ink); }
.hero__grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.1fr); align-items: center; gap: 56px; padding-bottom: 48px; }
.hero h1 { max-width: 18ch; }
.hero h1 span { display: block; color: var(--accent-light); }
.hero .eyebrow,.contact .eyebrow { color: var(--accent-light); }
.hero__subtitle { color: var(--on-dark-2); font-size: 1.0625rem; max-width: 44ch; margin-top: 28px; }
.hero .text-link { color: var(--on-dark); }
.hero__figure { min-width: 0; }
.hero__image-wrap { position: relative; overflow: hidden; background: var(--ink-2); }
.hero__image-wrap picture { height: 100%; }
.hero__img { width: 100%; height: 520px; object-fit: cover; object-position: 61% 85%; transform: scale(1.13); transform-origin: 61% 85%; }
.hero__caption { margin-top: 12px; color: var(--on-dark-2); font-size: .625rem; }

/* Three distinct engineering offers, with genuine hardware photographs. */
.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.capability-card { min-width: 0; border: 1px solid var(--line); background: #fff; }
.capability-card__image { overflow: hidden; }
.capability-card__image img { width: 100%; aspect-ratio: 1.8; object-fit: cover; }
.capability-card__body { padding: 28px; }
.card-number { display: block; color: var(--accent); font-size: .6875rem; margin-bottom: 20px; }
.capability-card h3 { font-size: 1.375rem; letter-spacing: -.025em; }
.capability-card p { color: var(--text-2); font-size: .9375rem; margin-top: 16px; }
.capability-card ul { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.capability-card li { padding-left: 12px; position: relative; font-size: .8125rem; }
.capability-card li + li { margin-top: 8px; }
.capability-card li::before { content: ""; position: absolute; left: 0; top: .7em; width: 3px; height: 3px; background: var(--accent); }
.overview__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 24px; }
.overview__footer > p { font-size: .6875rem; color: var(--text-2); }
.overview__actions { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.overview__actions .utility-link { color: var(--text-2); }

/* Applications make the operating need clear before the technical evidence. */
.applications-section { background: var(--paper-2); }
.applications-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 88px; }
.applications-intro .prose { margin-top: 24px; color: var(--text-2); font-size: .9375rem; }
.applications-intro .note { margin-top: 24px; }
.application-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); }
.application-card { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--line); }
.application-card:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.application-card dt { font-size: 1.125rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.application-card dd { color: var(--text-2); font-size: .875rem; margin-top: 12px; }

/* A test is a documented record, with the full uncut recording one click away. */
.evidence-record { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 48px; align-items: center; padding: 32px; border: 1px solid var(--line); background: #fff; }
.video { min-width: 0; }
.video__frame { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ink-2); }
.video__frame picture,.video__frame img { width: 100%; height: 100%; }
.video__frame img { object-fit: cover; }
.video__frame::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(11,22,32,.7)); pointer-events: none; }
.video__duration { position: absolute; z-index: 1; top: 16px; right: 16px; padding: 4px 8px; color: white; background: var(--ink); font-size: .6875rem; }
.video__watch { position: absolute; z-index: 1; left: 20px; bottom: 20px; right: 20px; display: inline-flex; align-items: center; gap: 12px; color: white; font-size: .9375rem; font-weight: 600; }
.video__watch svg { flex-shrink: 0; width: 44px; height: 44px; padding: 12px; fill: var(--accent); background: white; border-radius: 50%; }
.video__frame:hover .video__watch svg { background: var(--accent-light); }
.video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: .6875rem; margin-top: 12px; }
.evidence-record__body h3 { font-size: 1.75rem; max-width: 24ch; }
.evidence-record__body > p:not(.eyebrow) { margin-top: 16px; color: var(--text-2); font-size: .9375rem; }
.evidence-facts { margin: 24px 0 16px; border-top: 1px solid var(--line); }
.evidence-facts > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.evidence-facts dt { color: var(--text-2); }
.evidence-facts dd { font-weight: 600; }
.evidence__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 12px; }
.development-context { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 28px; }
.development-context summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; min-height: 56px; cursor: pointer; font-size: .9375rem; font-weight: 600; list-style: none; }
.development-context summary::-webkit-details-marker { display: none; }
.development-context summary span { font-size: 1.25rem; }
.development-context[open] summary span { transform: rotate(45deg); }
.development-context > .note { padding-bottom: 24px; }
.facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 12px 0 24px; }
.facts li { display: grid; gap: 8px; }
.facts strong { font-size: 1.125rem; font-weight: 500; }
.facts span { color: var(--text-2); font-size: .8125rem; }
.videos-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 32px; }

/* Company facts and a four-step engagement, with no unverifiable badges. */
.company { background: var(--paper); }
.company__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr); gap: 48px; }
.company__grid .prose { color: var(--text-2); font-size: .9375rem; }
.company-facts { border-top: 1px solid var(--line); }
.company-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.company-facts dt { color: var(--text-2); font-size: .6875rem; margin-bottom: 4px; }
.company-facts dd { font-weight: 600; }
.engagement { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.engagement__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 32px; }
.engagement__heading h3 { font-size: 1.5rem; }
.engagement__heading p { color: var(--text-2); font-size: .9375rem; max-width: 55ch; }
.steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
.step { border-top: 1px solid var(--line); padding-top: 20px; }
.step__num { display: block; color: var(--accent); font-size: .6875rem; margin-bottom: 20px; }
.step h4 { font-size: 1rem; }
.step p { color: var(--text-2); font-size: .8125rem; margin-top: 12px; }

/* A direct enquiry route with a clipboard alternative to email-client links. */
.contact { background: var(--ink); color: white; padding-bottom: 40px; }
.contact__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 96px; align-items: start; }
.contact h2 { font-size: clamp(2.5rem,4vw,3.75rem); max-width: 14ch; }
.contact h2 a { color: inherit; text-decoration: none; }
.contact h2 a:hover, .contact h2 a:focus-visible { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; }
.contact .lead { color: var(--on-dark); margin-top: 24px; max-width: 42ch; font-size: 1rem; }
.contact__audience { color: var(--accent-light); margin-top: 24px; font-size: .875rem; }
.contact__details { border-top: 1px solid #6b94ac; padding-top: 24px; }
.contact__company { color: var(--accent-light); font: 500 .6875rem var(--mono); margin-bottom: 28px; }
.contact__checklist-title { font-size: .875rem; font-weight: 600; }
.contact__checklist { list-style: disc; padding-left: 18px; margin: 12px 0 28px; font-size: .875rem; }
.contact__checklist li + li { margin-top: 6px; }
.contact__details .eyebrow { margin-bottom: 4px; }
.contact__email { display: inline-block; font-size: clamp(1.5rem,3vw,2.25rem); line-height: 1.4; font-weight: 600; letter-spacing: -.02em; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.contact__email:hover { text-decoration-thickness: 2px; }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.contact .utility-link { color: white; font-size: .8125rem; }
.contact__email-note,.contact__status { font-size: .75rem; margin-top: 12px; }
.contact__status { color: var(--accent-light); min-height: 1.65em; }
.footer { padding: 12px 0; background: var(--ink); color: var(--on-dark-2); font-size: .75rem; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; }
.footer__inner > div { display: flex; align-items: center; gap: 16px; }
.footer .logo { margin-bottom: 0; }
.footer p + p { margin-top: 8px; }
.footer a { color: var(--on-dark); text-underline-offset: 4px; }
.player { width: min(1100px,100vw - 32px); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.player::backdrop { background: rgba(5,10,15,.9); }
.player__inner { position: relative; }
.player__frame { aspect-ratio: 16/9; background: #000; }
.player__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.player__close { position: absolute; right: 0; top: -48px; width: 44px; height: 44px; background: var(--ink); border: 0; color: white; font-size: 2rem; line-height: 1; cursor: pointer; }
.notfound { min-height: 70vh; display: flex; align-items: center; padding-top: 140px; }
.notfound p,.notfound .btn { margin-top: 24px; }
.print-heading { display: none; }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.project-card { display: flex; flex-direction: column; gap: 16px; padding: 36px; border: 1px solid var(--line); background: #fff; }
.project-card__status { color: var(--accent); font-size: .6875rem; letter-spacing: .04em; }
.capability-card .project-card__status { margin-bottom: 8px; }
.capability-card .text-link { display: inline-block; margin-top: 16px; }
.project-card h3 { font-size: 1.75rem; }
.project-card p:not(.project-card__status) { color: var(--text-2); max-width: 44ch; }
.project-card .text-link { margin-top: auto; }

/* Video-link page */
.section-heading--top { align-items: start; margin-bottom: 0; }
.hero__img--board { object-position: 50% 55%; transform: none; }
.vl-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 24px 0 32px; border-top: 1px solid var(--line-dark); }
.vl-facts li { display: grid; gap: 6px; }
.vl-facts strong { color: var(--accent-light); font-size: 1.5rem; font-weight: 500; }
.vl-facts span { color: var(--on-dark-2); font-size: .8125rem; }
.vl-test-title { margin-top: 20px; font-size: 1.125rem; }
.vl-note { margin-top: 24px; max-width: 72ch; }
.vl-list { border-top: 1px solid var(--line); }
.vl-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.vl-faq .development-context { margin-top: 0; border-top: 0; }
.vl-faq .development-context:first-child { border-top: 1px solid var(--line); }
.vl-faq .development-context p { padding-bottom: 20px; color: var(--text-2); font-size: .9375rem; max-width: 72ch; }

@media (max-width: 1200px) {
  .header__inner { gap: 24px; }
  .nav__links { gap: 16px; }
  .header__actions { gap: 12px; }
  .header__contact { display: none; }
  .hero__grid { gap: 40px; }
  .applications-layout { gap: 48px; }
  .company__grid { gap: 32px; }
  .contact__grid { gap: 56px; }
}
@media (max-width: 1000px) {
  .header__actions { margin-left: auto; gap: 16px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; }
  .menu-toggle__bars,.menu-toggle__bars::before,.menu-toggle__bars::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
  .menu-toggle__bars::before,.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__bars::before { top: -7px; }
  .menu-toggle__bars::after { top: 7px; }
  .is-open .menu-toggle__bars { background: transparent; }
  .is-open .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  .is-open .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--ink); padding: 16px var(--gutter) 24px; border-bottom: 1px solid var(--line-dark); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
  .is-open .nav { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { display: flex; min-height: 52px; font-size: 1rem; border-bottom: 1px solid var(--line-dark); }
  .hero { padding-top: calc(var(--header-height) + 40px); }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero h1 { font-size: clamp(2.5rem,5vw,3.5rem); }
  .hero__img { height: 480px; }
  .hero .actions { gap: 12px; }
  .section-heading { gap: 32px; }
  .capability-card__body { padding: 24px 20px; }
  .capability-card h3 { font-size: 1.25rem; }
  .applications-layout { grid-template-columns: .9fr 1.1fr; gap: 32px; }
  .evidence-record { gap: 32px; padding: 24px; }
  .evidence-record__body h3 { font-size: 1.5rem; }
  .company__grid { grid-template-columns: 1fr 1fr; }
  .company-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .steps { gap: 24px; }
}
@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; }
  .vl-facts { grid-template-columns: 1fr; gap: 16px; }
  :root { --header-height: 72px; }
  .logo { width: 110px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(2.65rem,7.5vw,3.75rem); max-width: 19ch; }
  .hero .eyebrow { max-width: 40ch; font-size: .625rem; }
  .hero__subtitle { max-width: 48ch; font-size: 1rem; margin-top: 24px; }
  .hero__img { height: auto; aspect-ratio: 1.5; transform: scale(1.06); }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .lead { font-size: 1rem; }
  .capability-grid { grid-template-columns: 1fr; gap: 24px; }
  .capability-card { display: grid; grid-template-columns: .8fr 1.2fr; }
  .capability-card__image picture,.capability-card__image img { height: 100%; }
  .capability-card__image img { aspect-ratio: auto; }
  .capability-card__body { padding: 24px; }
  .capability-card .card-number { margin-bottom: 12px; }
  .capability-card p { margin-top: 12px; font-size: .875rem; }
  .capability-card ul { margin-top: 16px; }
  .overview__footer { align-items: start; }
  .overview__actions { display: block; }
  .overview__actions > * { display: flex; }
  .applications-layout { grid-template-columns: 1fr; gap: 32px; }
  .application-card { padding-top: 20px; }
  .application-card dt { font-size: 1.125rem; }
  .evidence-record { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .video__frame { aspect-ratio: 16/9; }
  .evidence__footer { align-items: start; padding-top: 16px; }
  .evidence__footer .text-link { font-size: .8125rem; }
  .facts { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: minmax(110px,.9fr) minmax(0,1fr); gap: 16px; }
  .facts strong { font-size: 1rem; }
  .company__grid { grid-template-columns: 1fr; gap: 28px; }
  .company-facts { gap: 16px; }
  .engagement { margin-top: 40px; padding-top: 32px; }
  .engagement__heading { grid-template-columns: 1fr; gap: 16px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact h2 { max-width: 17ch; }
  .contact__intro .lead { max-width: 48ch; }
  .contact__audience { font-size: .8125rem; }
  .footer__inner { align-items: start; }
  .videos-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero .actions { align-items: stretch; }
  .hero .actions > .btn { width: 100%; }
  .hero .actions > .text-link { width: 100%; justify-content: space-between; }
  .hero__img { aspect-ratio: 1.35; }
  .capability-card { display: block; }
  .capability-card__image img { height: auto; aspect-ratio: 2; }
  .capability-card__body { padding: 24px; }
  .capability-card h3 { font-size: 1.375rem; }
  .application-grid { grid-template-columns: 1fr; }
  .application-card,.application-card:nth-child(even) { padding: 20px 0; border-left: 0; }
  .application-card .card-number { margin-bottom: 12px; }
  .evidence-record { padding: 16px; }
  .video__watch { left: 12px; bottom: 12px; right: 12px; font-size: .8125rem; gap: 8px; }
  .video__watch svg { width: 36px; height: 36px; padding: 10px; }
  .evidence-facts > div { grid-template-columns: .8fr 1.2fr; gap: 12px; font-size: .75rem; }
  .company-facts { display: block; }
  .company-facts > div { display: grid; grid-template-columns: .65fr 1.35fr; gap: 16px; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .step { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px 12px; padding-top: 16px; }
  .step__num { margin: 0; padding-top: 3px; }
  .step p { grid-column: 2; margin: 0; }
  .contact__actions { display: block; }
  .contact__actions .utility-link { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; }
}
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.series-card { display: block; border-top: 1px solid #bac9ce; padding: 24px 0; text-decoration: none; color: inherit; }
.series-card:hover h3 { text-decoration: underline; }
.series-card p { margin: 16px 0; }
.series-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid #bac9ce; background: white; transition: border-color .15s; }
a.series-card:hover { border-color: var(--accent); }
.series-card h3 { margin-top: 12px; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.series-card__action { margin-top: auto; color: var(--accent); font-weight: 600; }
.series-card--more { border-style: dashed; background: none; color: var(--text-2); }
.chapter-nav__more { margin: 0; padding: 16px 12px; border-top: 1px dashed var(--line); color: var(--text-2); font-size: .875rem; }
.chapter-pagination__more { margin: 0; color: var(--text-2); }
.chapter-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); padding: calc(var(--header-height) + 40px) var(--gutter) 80px; max-width: 1800px; margin: 0 auto; align-items: start; }
.chapter-sidebar { position: sticky; top: calc(var(--header-height) + 24px); max-height: calc(100dvh - var(--header-height) - 48px); overflow-y: auto; padding: 0 24px 24px 0; border-right: 1px solid var(--line); }
.chapter-sidebar > .text-link { margin-bottom: 24px; }
.chapter-menu summary { color: var(--accent); font-size: .75rem; font-weight: 700; margin-bottom: 16px; cursor: pointer; }
.chapter-nav ol { list-style: none; padding: 0; margin: 0; }
.chapter-nav a { display: flex; align-items: baseline; gap: 12px; padding: 16px 12px; border-top: 1px solid var(--line); color: inherit; font-size: .875rem; line-height: 1.5; text-decoration: none; }
.chapter-nav a:hover { text-decoration: underline; }
.chapter-nav a[aria-current="page"] { background: #eaf0f1; font-weight: 700; }
.chapter-body { min-height: 480px; min-width: 0; }
.chapter-heading { padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.chapter-heading h1 { max-width: 1000px; margin: 16px 0 24px; font-size: clamp(2rem, 4vw, 3.75rem); }
.chapter-heading .lead { max-width: 72ch; }
.article-markdown > :not(.article-demo):not(.article-expansion):not(pre):not(table) { max-width: 94ch; }
.article-markdown > * + * { margin-top: 24px; }
.article-markdown a { color: #0866c6; text-decoration: underline; text-underline-offset: 3px; }
.article-markdown a:hover { color: #034b98; text-decoration-thickness: 2px; }
.article-markdown h2,.article-markdown h3 { max-width: none; margin-top: 48px; }
.article-markdown > :first-child { margin-top: 0; }
.article-markdown ul { list-style: disc; padding-left: 24px; }
.article-markdown ol { list-style: decimal; padding-left: 24px; }
.article-markdown li + li { margin-top: 8px; }
.article-markdown blockquote { border-left: 3px solid var(--line); padding-left: 24px; margin-left: 0; }
.article-markdown pre { overflow-x: auto; padding: 24px; background: var(--ink); color: var(--on-dark); }
.article-markdown code { font-family: var(--mono); font-size: .875em; overflow-wrap: anywhere; }
.article-markdown table { display: block; overflow-x: auto; border-collapse: collapse; }
.article-markdown th,.article-markdown td { padding: 12px 20px; border: 1px solid var(--line); text-align: left; }
.article-note { padding: 24px; background: var(--paper-2); border-left: 3px solid var(--accent); }
.article-note__title { font-weight: 700; margin-bottom: 12px; }
.article-note p + p { margin-top: 12px; }
.article-demo { width: 100%; border: 1px solid var(--line); padding: clamp(16px, 3vw, 32px); background: white; }
.article-demo .eyebrow { display: block; margin-bottom: 8px; }
.article-demo h3 { margin-top: 0; }
.article-demo__stage { display: grid; place-items: center; min-height: 260px; margin-top: 24px; padding: 24px; background: var(--paper-2); color: var(--text-2); }
.article-video video { display: block; width: 100%; height: auto; margin-top: 24px; background: #000; }
.article-video { width: 70%; }
/* Rich boxes share the prose measure so the right edge lines up down the page. */
.article-markdown > .article-demo { max-width: 94ch; }
.article-markdown > .article-video { width: 100%; }
.article-video__viewport { position: relative; margin-top: 24px; background: #000; }
.article-video__waiting { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #0006; color: white; font-size: clamp(.875rem, 2vw, 1.375rem); text-align: center; pointer-events: none; }
.latency-chart { margin-top: 24px; padding-bottom: 12px; }
.latency-chart svg { display: block; width: 100%; height: auto; cursor: crosshair; overflow: visible; }
.latency-chart svg text { fill: var(--text-2); font-size: 13px; }
.latency-chart__grid { stroke: #dce3e5; fill: none; }
.latency-chart__axis { stroke: #82959e; fill: none; }
.latency-chart__before { stroke: #b55c30; fill: none; stroke-width: 2; }
.latency-chart__after { stroke: #0866c6; fill: none; stroke-width: 2; }
.latency-chart__cursor { stroke: #617983; stroke-dasharray: 4 4; }
.latency-chart__dot { fill: none; stroke: var(--text); stroke-width: 1.5; r: 6px; }
.latency-chart__points circle { fill: #0866c6; opacity: .8; }
.latency-chart__points .latency-chart__i { fill: #c26820; opacity: 1; }
.latency-chart__bars rect { fill: #0866c6; opacity: .8; }
.latency-chart__bars .latency-chart__i { fill: #c26820; opacity: 1; }
.latency-settings { grid-template-columns: minmax(0, 1fr); }
.article-markdown > .article-demo.latency-demo { display: grid; grid-template-columns: 80px minmax(0, 1fr) 44px 100px; column-gap: 12px; width: min(100%, 900px); padding: 20px; }
.latency-demo > figcaption { grid-column: 1 / -1; grid-row: 1; }
.latency-demo > .latency-settings { grid-column: 1; grid-row: 2; display: flex; align-items: stretch; margin: 16px 0 0; }
.latency-demo .latency-settings label { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; font-size: .75rem; }
.latency-demo .latency-settings output { white-space: nowrap; font-family: var(--mono); }
.latency-demo .latency-settings input[type="range"] { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 100%; min-height: 100px; flex: 1; margin: 4px 0 0; }
.latency-demo > .article-video__viewport { grid-column: 2; grid-row: 2; margin-top: 16px; }
.latency-demo > .article-video__controls { grid-column: 3; grid-row: 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px minmax(36px, 1fr) 28px 44px; justify-items: center; gap: 8px; margin-top: 16px; padding: 0; }
.latency-demo > .article-video__controls input[type="range"] { writing-mode: vertical-lr; direction: ltr; width: 28px; height: 100%; min-height: 36px; margin: 0; }
.latency-demo > .article-video__controls output { font-size: .625rem; line-height: 14px; white-space: normal; text-align: center; }
.latency-demo > .latency-readout { grid-column: 4; grid-row: 2; align-self: center; display: grid; gap: 12px; margin: 16px 0 0; }
.latency-readout dt { font-size: .6875rem; color: var(--text-2); }
.latency-readout dd { margin: 2px 0 0; font-family: var(--mono); font-size: .8125rem; white-space: nowrap; }
.latency-demo > [data-video-status] { grid-column: 1 / -1; grid-row: 4; }
.latency-demo > .latency-chart { grid-column: 1 / -1; grid-row: 5; min-width: 0; }
.latency-demo > .packet-packing { grid-column: 1 / -1; grid-row: 6; min-width: 0; margin-top: 12px; }
.packet-packing__heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: .75rem; }
.packet-packing__heading span { color: var(--text-2); font-size: .6875rem; }
.packet-packing__packets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.packet-packing__packet { min-width: 0; padding: 4px; border: 1px solid var(--line); border-radius: 4px; }
.packet-packing__packet.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.packet-packing__packet > span { display: block; margin-bottom: 4px; color: var(--text-2); font-size: .625rem; }
.packet-packing__packet svg { display: block; width: 100%; height: auto; }
.packet-packing__packet svg text { font-size: 24px; font-family: var(--mono); }
.packet-packing .packet-packing__summary { margin-top: 6px; color: var(--text-2); font-size: .6875rem; }
.packing-example { max-width: 900px; }
.packing-example__bitrate { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; max-width: 480px; margin-top: 20px; font-size: .8125rem; }
.packing-example__bitrate input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.packing-example__bitrate output { font-family: var(--mono); }
.packing-example__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.packing-example h4 { font-size: 1rem; }
.packing-example .packing-example__totals { margin-top: 6px; font-size: .75rem; color: var(--text-2); }
.packing-example__map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; gap: 5px; max-height: 400px; overflow-y: auto; margin-top: 12px; padding: 4px; border: 1px solid var(--line); scrollbar-gutter: stable; }
.packing-example__packet { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: 3px; background: white; cursor: pointer; }
.packing-example__packet.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.packing-example__packet > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; font-family: var(--mono); font-size: .625rem; }
.packing-example__packet svg { display: block; width: 100%; height: auto; }
.packing-example .packing-example__hint { margin-top: 16px; font-size: .75rem; color: var(--text-2); }
.packing-example__inspect { display: block; min-height: 3em; margin-top: 8px; font-size: .75rem; }
@media (max-width: 760px) { .packing-example__panels { grid-template-columns: minmax(0, 1fr); gap: 20px; } .packing-example > figcaption { padding-top: 16px; } .packing-example__inspect { padding-bottom: 12px; } }
.latency-demo > .article-video__viewport { width: 100%; max-width: 560px; margin-inline: auto; }
.latency-demo > .article-video__controls { width: 44px; max-width: none; margin-inline: 0; }
.article-markdown .latency-demo > .article-video__controls { padding: 0; margin-top: 16px; }
.article-markdown .latency-demo > .article-video__viewport { margin-inline: auto; }
.latency-demo > .article-video__viewport:fullscreen { max-width: none; }
.latency-demo .latency-chart { margin-top: 12px; padding-bottom: 0; }
.latency-demo .jpeg-lab__settings { margin-top: 16px; }
.latency-demo .eyebrow { margin-bottom: 4px; }
.latency-demo h3 { font-size: 1.25rem; }
@media (max-width: 760px) {
  .article-markdown > .article-demo.latency-demo { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 6px; width: calc(100% + 2 * var(--gutter)); padding: 0 8px 12px; }
  .latency-demo .latency-settings label { font-size: .625rem; }
  .latency-demo > .latency-readout { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
  .latency-readout dt { font-size: .5625rem; }
  .latency-readout dd { font-size: .6875rem; }
  .latency-demo > .article-video__viewport { margin-inline: auto; }
  .latency-demo > .article-video__controls { margin-inline: 0; gap: 4px; }
}
@media (max-width: 760px) { .latency-chart svg text { font-size: 18px; } }
.latency-chart > output { display: block; font-size: .75rem; }
.article-video__viewport canvas,.article-video__viewport img { display: block; width: 100%; height: auto; }
.article-video [hidden] { display: none; }
.article-video__viewport:fullscreen { display: grid; place-items: center; }
.article-video__viewport:fullscreen canvas,.article-video__viewport:fullscreen img { max-height: 100vh; object-fit: contain; }
.article-video__controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) max-content 44px; align-items: center; gap: 8px; margin-top: 8px; }
.article-video__controls input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--accent); }
.article-video__controls output { font-size: .75rem; white-space: nowrap; }
.article-video__button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: var(--accent); cursor: pointer; }
.article-video__button:hover { background: var(--paper-2); }
.article-video__button:disabled { opacity: .45; cursor: wait; }
.article-video__button svg { display: block; width: 22px; height: 22px; }
.article-video__button [data-play-icon] { display: none; }
.article-video__button[data-state="play"] [data-play-icon="play"],.article-video__button[data-state="retry"] [data-play-icon="play"],.article-video__button[data-state="pause"] [data-play-icon="pause"],.article-video__button[data-state="replay"] [data-play-icon="replay"] { display: block; }
.article-video [data-video-status]:empty { display: none; }
@media (max-width: 760px) { .article-video { width: 100%; } }
.article-video .note { margin-top: 16px; max-width: 90ch; }
.article-video .actions { gap: 12px; margin-top: 20px; }
.article-video button[aria-pressed="false"] { background: transparent; color: var(--accent); }
.article-video__downloads { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 12px; }
.decoder-lab > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); max-width: none; margin-top: 0; }
.decoder-lab > p:not(.eyebrow) { margin-top: 20px; }
.decoder-lab__settings { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 24px; font-size: .875rem; }
.decoder-lab__settings label { display: flex; align-items: center; gap: 10px; }
.decoder-lab select { padding: 8px; font: inherit; max-width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--text); }
.decoder-lab__views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.decoder-lab__views figure:last-child { max-width: 512px; }
.decoder-lab__views figcaption { font-weight: 700; margin-bottom: 12px; }
.decoder-lab__views figcaption span { display: block; font-weight: 400; font-size: .75rem; color: var(--text-2); }
.decoder-lab canvas { display: block; width: 100%; height: auto; background: #101820; aspect-ratio: 16 / 9; }
.decoder-lab__metrics { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; padding: 20px 0; border-block: 1px solid var(--line); }
.decoder-lab__metrics dt { font-size: .75rem; color: var(--text-2); }
.decoder-lab__metrics dd { font-family: var(--mono); font-size: .875rem; }
.decoder-lab__technical { margin-top: 24px; font-size: .8125rem; }
.decoder-lab__technical summary { cursor: pointer; font-weight: 700; }
.decoder-lab__technical p { margin-top: 12px; }
.decoder-lab button:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) { .decoder-lab__views { grid-template-columns: 1fr; } .decoder-lab__settings label { flex-wrap: wrap; } }
.chapter-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-top: 80px; padding-top: 24px; border-top: 1px solid #bac9ce; }
@media (max-width: 900px) {
  .series-grid,.chapter-layout { grid-template-columns: 1fr; }
  .chapter-layout { gap: 32px; }
  .chapter-sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 20px; }
  .chapter-sidebar > .text-link { margin-bottom: 8px; }
  .chapter-nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .chapter-nav ol { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .article-markdown > .article-demo {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    padding: 0;
    border-inline: 0;
  }
  .article-demo > :where(:not(.article-video__viewport):not(.decoder-lab__views):not(.article-demo__stage)) { margin-inline: 12px; }
  .article-markdown > .article-video { background: white; border: 0; border-top: 1px solid var(--line); }
  .article-video > figcaption { margin-inline: var(--gutter); padding-top: 16px; }
  .article-video > .article-video__viewport { margin-inline: 8px; }
  .article-video > .article-video__controls { margin: 0; padding: 8px 12px; background: white; }
  .article-video > [data-video-status] { margin-inline: var(--gutter); }
  .article-video .eyebrow { color: var(--text-2); font-size: .625rem; letter-spacing: .08em; }
  .article-demo__stage { padding: 0; }
  .decoder-lab__views figcaption { margin-inline: 12px; }
  .decoder-lab__views figure:last-child { max-width: none; }
}
@media (max-width: 600px) {
  .chapter-layout { padding-top: calc(var(--header-height) + 20px); gap: 20px; }
  .chapter-heading { margin-bottom: 28px; padding-bottom: 24px; }
  .article-video .jpeg-lab__settings { gap: 12px; }
  .article-demo select { min-height: 44px; font-size: 1rem; }
  .article-demo input[type="range"] { touch-action: pan-y; }
  .article-markdown > .article-demo.latency-demo { grid-template-columns: minmax(0, 1fr); }
  .latency-demo > figcaption { grid-column: 1; grid-row: 1; margin-inline: 8px; }
  .latency-demo > .latency-settings { grid-column: 1; grid-row: 2; margin: 12px 8px 0; }
  .latency-demo .latency-settings label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; font-size: .8125rem; }
  .latency-demo .latency-settings input[type="range"] { grid-column: 1 / -1; writing-mode: horizontal-tb; direction: ltr; width: 100%; height: 44px; min-height: 44px; margin: 0; }
  .article-markdown .latency-demo > .article-video__viewport { grid-column: 1; grid-row: 3; width: 100%; max-width: none; margin: 4px 0 0; }
  .article-markdown .latency-demo > .article-video__controls { grid-column: 1; grid-row: 4; grid-template-columns: 44px minmax(0, 1fr) max-content 44px; grid-template-rows: 44px; width: 100%; margin: 4px 0 0; padding: 0; gap: 6px; }
  .latency-demo > .article-video__controls input[type="range"] { writing-mode: horizontal-tb; direction: ltr; width: 100%; height: 44px; min-height: 44px; }
  .latency-demo > .article-video__controls output { font-size: .6875rem; line-height: 1.4; white-space: nowrap; }
  .latency-demo > .latency-readout { grid-column: 1; grid-row: 5; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 8px 4px; background: var(--paper-2); border-radius: 4px; }
  .latency-readout dt { font-size: .625rem; }
  .latency-readout dd { font-size: .75rem; }
  .latency-demo > [data-video-status] { grid-column: 1; grid-row: 6; margin-inline: 8px; }
  .latency-demo > .latency-chart { grid-column: 1; grid-row: 7; margin: 8px 0 0; }
  .latency-demo > .packet-packing { grid-column: 1; grid-row: 8; margin: 12px 0 0; }
  .packet-packing__packets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .latency-chart svg text { font-size: 20px; }
  .latency-chart svg .latency-chart__axis-title { font-size: 18px; }
  .latency-demo h3 { font-size: 1.125rem; }
  .jpeg-lab__settings { grid-template-columns: minmax(0, 1fr); }
}
@page { size: A4; margin: 14mm; }
@media print {
  body { color: #142631; background: white; font-size: 9pt; line-height: 1.4; }
  .header,.hero,.applications-section,.company,.footer,.player,.overview__actions,.evidence__footer,.development-context,.contact__actions,.contact__email-note,.contact__status,.contact__audience,.video,.contact__checklist-title,.contact__checklist { display: none !important; }
  .print-heading { display: block; padding-bottom: 5mm; border-bottom: 1px solid #ccd4d2; }
  .print-brand { font-weight: 700; letter-spacing: .08em; margin-bottom: 3mm; }
  .print-heading h2 { font-size: 23pt; margin-bottom: 3mm; max-width: none; }
  .wrap { max-width: none; padding: 0; }
  .section { padding: 4mm 0; }
  h2 { font-size: 18pt; max-width: none; }
  h3 { font-size: 12pt; }
  .eyebrow { font-size: 7pt; margin-bottom: 3mm; }
  .section-heading { grid-template-columns: 1fr; gap: 2mm; margin-bottom: 4mm; }
  .section-heading .lead { font-size: 9pt; max-width: none; }
  .capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4mm; }
  .capability-card { display: block; break-inside: avoid; }
  .capability-card__image { display: none; }
  .capability-card__body { padding: 3mm; }
  .capability-card .card-number { display: none; }
  .capability-card h3 { font-size: 11pt; }
  .capability-card p,.capability-card li { font-size: 8pt; }
  .capability-card p { margin-top: 3mm; }
  .capability-card ul { margin-top: 3mm; padding-top: 3mm; }
  .overview__footer { padding-top: 3mm; }
  .evidence-record { display: block; padding: 4mm; break-inside: avoid; }
  .evidence-record__body h3 { font-size: 13pt; max-width: none; }
  .evidence-record__body > p:not(.eyebrow) { font-size: 9pt; margin-top: 3mm; }
  .evidence-record__body > .text-link { display: none; }
  .evidence-facts { margin: 3mm 0 0; }
  .evidence-facts > div { padding: 2mm 0; font-size: 8pt; }
  .contact { color: #142631; background: white; border-top: 1px solid #ccd4d2; break-inside: avoid; }
  .contact__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8mm; }
  .contact h2 { font-size: 18pt; max-width: none; }
  .contact .lead { color: #50616a; font-size: 9pt; margin-top: 3mm; }
  .contact .eyebrow { color: #043c5e; }
  .contact__details { border: 0; padding: 0; }
  .contact__company { color: #50616a; margin-bottom: 4mm; }
  .contact__email { font-size: 15pt; color: #043c5e; }
}

.jpeg-lab__settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 24px; }
.jpeg-lab__settings label { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: .8125rem; }
.jpeg-lab__settings input,.jpeg-lab__settings select { grid-column: 1 / -1; width: 100%; min-width: 0; accent-color: var(--accent); }
.jpeg-lab__settings select { padding: 8px; font: inherit; border: 1px solid var(--line); background: white; color: var(--text); }
.jpeg-lab__metrics { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.jpeg-lab__metrics dt { font-size: .6875rem; color: var(--text-2); }
.jpeg-lab__metrics dd { margin: 4px 0 0; font-family: var(--mono); font-size: .8125rem; }
.jpeg-lab [data-jpeg-status]:empty { display: none; }
.jpeg-lab .jpeg-lab__method { font-size: .75rem; color: var(--text-2); }
.jpeg-lab canvas { image-rendering: auto; aspect-ratio: 16 / 9; }
.jpeg-lab .article-video__viewport { position: relative; }
.jpeg-lab__fps { position: absolute; top: 10px; right: 10px; padding: 6px 12px; border-radius: 4px; background: #101820cc; color: white; font-family: var(--mono); font-size: clamp(1rem, 2.4vw, 1.375rem); font-weight: 700; line-height: 1.3; pointer-events: none; }
.jpeg-lab__message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; color: white; font-size: clamp(.875rem, 2vw, 1.125rem); text-align: center; pointer-events: none; }
.jpeg-lab__message[hidden] { display: none; }
.frame-references__scroll { overflow-x: auto; margin-top: 28px; }
.frame-references__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.frame-references__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 640px; gap: 0; }
.frame-references__group { min-width: 0; }
.frame-references__group-title { font-size: .8125rem; font-weight: 700; }
.frame-references__group--fresh .frame-references__group-title { color: #366655; }
.frame-references__drawing { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.frame-references__arrow { fill: none; stroke: currentColor; stroke-width: 2; color: var(--accent); }
.frame-references__arrow-label { font-size: 12px; fill: var(--accent); }
.frame-references__card { fill: #f4f7f8; stroke: #b7c8cf; stroke-width: 1.5; }
.frame-references__card--i { fill: #e8f1ed; stroke: #5f927d; }
.frame-references__type { font-size: 25px; font-weight: 700; fill: var(--accent); }
.frame-references__type--i { fill: #366655; }
.frame-references__number { font-size: 12px; fill: var(--text-2); font-family: var(--mono); }
.frame-references__description { font-size: 11px; fill: var(--text-2); }
.frame-references .frame-references__legend { margin-top: 8px; font-size: .875rem; }
.frame-references .frame-references__caveat { margin-top: 12px; font-size: .75rem; color: var(--text-2); }
.article-markdown > .article-expansion { max-width: none; margin-top: 40px; }
.article-expansion > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 94ch; padding: 24px; border: 1px dashed var(--accent); border-left: 4px solid var(--accent); background: white; cursor: pointer; list-style: none; }
.article-expansion > summary::-webkit-details-marker { display: none; }
.article-expansion > summary:hover { background: var(--paper-2); }
.article-expansion > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.article-expansion__text { display: grid; gap: 6px; }
.article-expansion__title { color: var(--accent); font-size: 1.25rem; font-weight: 700; }
.article-expansion__hint { color: var(--text-2); font-size: .9375rem; }
.article-expansion__button { flex: none; padding: 10px 18px; border-radius: 4px; background: var(--accent); color: white; font-weight: 700; white-space: nowrap; }
.article-expansion__button::before { content: "Reveal ↓"; }
.article-expansion[open] .article-expansion__button { background: none; color: var(--accent); }
.article-expansion[open] .article-expansion__button::before { content: "Hide ↑"; }
/* A blurred peek of the hidden text, so it reads as more to come rather than an aside. */
.article-expansion:not([open])::after { content: ""; display: block; max-width: 94ch; height: 96px; margin-top: 16px; background: repeating-linear-gradient(to bottom, #c5d0d4 0 10px, transparent 10px 26px); filter: blur(4px); opacity: .7; -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent); }
@media (max-width: 600px) { .article-expansion > summary { flex-direction: column; align-items: flex-start; gap: 16px; } }
.article-expansion__body { padding-top: 32px; }
.packet-layout__scroll { overflow-x: auto; margin-top: 24px; }
.packet-layout__scroll svg { display: block; width: 100%; min-width: 640px; height: auto; }
.packet-layout__labels { font-size: 19px; font-weight: 700; fill: var(--text); }
.packet-layout__detail { font-size: 16px; font-weight: 400; fill: var(--text-2); }
.packet-layout__leaders { fill: none; stroke: #7b929c; stroke-width: 1.5; }
.packet-layout__payload { fill: white; font-size: 22px; font-weight: 600; }
.packet-layout__stats { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 20px; }
.packet-layout__stats dt { font-size: .75rem; color: var(--text-2); }
.packet-layout__stats dd { margin: 4px 0 0; font-family: var(--mono); color: var(--accent); }
.packet-layout .packet-layout__note { margin-top: 20px; font-size: .75rem; color: var(--text-2); }
@media (max-width: 760px) { .packet-layout > figcaption { padding-top: 16px; } .packet-layout > .packet-layout__note { padding-bottom: 16px; } }
@media (max-width: 760px) {
  .frame-references > figcaption { padding-top: 16px; }
  .frame-references > .frame-references__caveat { padding-bottom: 16px; }
}
@media (max-width: 760px) {
  .jpeg-lab > .jpeg-lab__settings,.jpeg-lab > .jpeg-lab__metrics,.jpeg-lab > .note { margin-inline: var(--gutter); }
  .jpeg-lab > .jpeg-lab__method { padding-bottom: 16px; }
}

.packing-example__source { margin-top: 16px; font-size: .8125rem; }
.packing-example__pace { margin-top: 12px; }
.packing-example__pace > strong, .packing-example__pace > span { display: block; font-size: .8125rem; }
.packing-example__pace > span { margin-top: 6px; color: #995315; }
.packing-example__track { display: flex; height: 14px; margin-top: 8px; background: #edf0f2; border-radius: 3px; overflow: hidden; }
.packing-example__track i { display: block; height: 100%; background: #087dc0; }
.packing-example__source .packing-example__track i { background: #627582; }
.packing-example__track i.is-waiting { background: #e9a052; }
.packing-example__packet.is-future { opacity: .3; }

.latency-fec { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 16px; max-width: 480px; margin-top: 12px; font-size: .8125rem; }
.latency-fec input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.latency-fec output { font-family: var(--mono); }
.latency-demo figcaption [data-packet-fec-summary] { margin: 4px 0 0; min-height: 1.4em; font-size: .75rem; }
.latency-chart__frozen { fill: #a3b3ba; }

.fec-block { max-width: 900px; }
.fec-block h4 { margin-block: 16px 6px; font-size: .8125rem; }
.fec-block__row { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; }
.fec-block__row button { min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 3px; color: white; font-family: var(--mono); font-size: .75rem; cursor: pointer; }
.fec-block__row button.is-data { background: #176aa0; }
.fec-block__row button.is-repair { background: #8057a6; }
.fec-block__row button.is-lost { background: repeating-linear-gradient(45deg, #e7ecee 0 4px, #cfd8dc 4px 8px); color: #d0021b; text-decoration: line-through; }
.fec-block__axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-2); font-family: var(--mono); font-size: .6875rem; }
.fec-block__released { align-items: end; min-height: 182px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.fec-block__released > div { display: grid; gap: 2px; }
.fec-block__released span { height: 16px; border-radius: 2px; background: #176aa0; color: white; font-family: var(--mono); font-size: .625rem; line-height: 16px; text-align: center; }
.fec-block__released span.is-late { background: #d0021b; }
.fec-block__summary { display: block; min-height: 3em; margin-top: 10px; font-size: .8125rem; }
@media (max-width: 760px) { .fec-block > * { margin-inline: var(--gutter); } .fec-block > figcaption { padding-top: 16px; } .fec-block__summary { padding-bottom: 12px; } }

.packet-timeline { max-width: 900px; }
.packet-timeline__bitrate { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; max-width: 480px; margin-top: 16px; font-size: .8125rem; }
.packet-timeline__bitrate input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.packet-timeline__bitrate output { font-family: var(--mono); }
.packet-timeline__scroll { min-width: 0; max-width: 100%; margin-top: 12px; padding-bottom: 8px; overflow-x: auto; }
.packet-timeline h4 { position: sticky; left: 0; width: max-content; margin-bottom: 4px; font-size: .8125rem; }
.packet-timeline__lane svg { display: block; width: 100%; height: 64px; background: #f4f6f7; }
.packet-timeline__lane svg g { cursor: pointer; }
.packet-timeline .packet-timeline__links { height: 36px; background: none; pointer-events: none; }
.packet-timeline__camera { position: relative; height: 22px; }
.packet-timeline__lane .packet-timeline__camera svg { position: absolute; inset: 0; height: 22px; }
.packet-timeline__camera span { position: sticky; left: 0; display: inline-block; padding: 0 6px; background: #f4f6f7; font-size: .6875rem; font-weight: 600; line-height: 22px; pointer-events: none; }
.packet-timeline__lane > h4:last-child { margin: 8px 0 0; }
.packet-timeline__padding { fill: #cfd8dc; }
.packet-timeline .packet-timeline__axis { height: 16px; margin-top: 4px; background: none; }
.packet-timeline__axis text { fill: var(--text-2); font-family: var(--mono); font-size: 11px; }
.packet-timeline__stats { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: .8125rem; }
.packet-timeline__stats caption { margin-bottom: 4px; color: var(--text-2); font-size: .75rem; text-align: left; }
.packet-timeline__stats th, .packet-timeline__stats td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); font-weight: 400; text-align: left; vertical-align: top; }
.packet-timeline__stats td { font-family: var(--mono); }
.packet-timeline__stats thead th { color: var(--text-2); font-size: .75rem; }
.packet-timeline__inspect { display: block; min-height: 3em; margin-top: 10px; color: var(--text-2); font-size: .75rem; }
@media (max-width: 760px) { .packet-timeline > * { margin-inline: var(--gutter); } .packet-timeline > figcaption { padding-top: 16px; } .packet-timeline .packet-timeline__stats { width: calc(100% - 2 * var(--gutter)); font-size: .75rem; } .packet-timeline__inspect { padding-bottom: 12px; } }

/* Skeptic quotes deck (chapter 1, bpyl-demo skeptics) */
.skeptics__deck { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.skeptics__card { padding: 24px; background: var(--paper); border: 1px solid var(--line); }
.article-markdown .skeptics__card blockquote { margin: 0; padding: 0; border: 0; }
.skeptics__card blockquote p { font-size: clamp(1.125rem, 2.4vw, 1.5rem); line-height: 1.4; font-weight: 700; color: var(--text); }
.skeptics__source { margin-top: 12px; color: var(--text-2); font-family: var(--mono); font-size: .75rem; }
.skeptics__source a { color: var(--accent); }
.skeptics__card--finale { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.skeptics__card--finale .skeptics__source { color: var(--accent-light); }
.skeptics__finale { font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: 700; line-height: 1.2; }
.skeptics__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.skeptics__controls[hidden] { display: none; }
.skeptics__count { color: var(--text-2); font-family: var(--mono); font-size: .8125rem; }
/* With JavaScript: stack every card in one cell and deal them one at a time. */
.skeptics.is-deck .skeptics__deck { gap: 0; position: relative; padding: 0 10px 10px 0; }
.skeptics.is-deck .skeptics__deck::before,
.skeptics.is-deck .skeptics__deck::after { content: ""; grid-area: 1 / 1; background: var(--paper-2); border: 1px solid var(--line); transform: translate(10px, 10px) rotate(1.2deg); }
.skeptics.is-deck .skeptics__deck::after { transform: translate(5px, 5px) rotate(-.8deg); background: var(--paper); }
.skeptics.is-finale .skeptics__deck::before,
.skeptics.is-finale .skeptics__deck::after { opacity: 0; }
.skeptics.is-deck .skeptics__card { grid-area: 1 / 1; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 220px; visibility: hidden; opacity: 0; transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .35s, visibility 0s .45s; }
.skeptics.is-deck .skeptics__card.is-current { visibility: visible; opacity: 1; transform: rotate(-.6deg); transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .2s, visibility 0s; }
.skeptics.is-deck .skeptics__card.is-current:nth-child(even) { transform: rotate(.6deg); }
.skeptics.is-deck .skeptics__card.is-gone { transform: translateX(-60%) rotate(-10deg); }
.skeptics.is-deck .skeptics__card--finale.is-current { transform: none; }
@media (max-width: 600px) {
  .skeptics__card { padding: 20px; }
  .skeptics.is-deck .skeptics__card { min-height: 260px; }
}