:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-row { padding-block: var(--s-7); }
@media (min-width: 768px) { :is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-row { padding-block: var(--s-8); } }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-copy { display: grid; gap: var(--s-4); min-width: 0; }
@media (min-width: 768px) { :is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-copy { gap: var(--s-5); } }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
@media (min-width: 768px) { :is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-lead { font-size: 18px; } }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-shot-phone { max-width: 260px; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-list li {
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-list strong { font-weight: 600; color: var(--ink); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-dl { margin: 0; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-decisions li + li { margin-top: var(--s-2); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-decisions li::marker { color: var(--ink-3); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-note { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; color: var(--ink-3); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-ai-row {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--bg-subtle);
}
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-ai-row .dl-value { display: grid; gap: var(--s-2); justify-items: start; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-ai-row .dl-value p { max-width: 60ch; }
@media (min-width: 1100px) {
  :is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-split {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  :is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-split > * + * { margin-top: 0; }
}
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-copy > .link-ext { justify-self: start; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-list .link-ext { display: flex; width: max-content; margin-top: var(--s-2); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-compare { display: grid; gap: var(--s-3); min-width: 0; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-compare h3 { margin: 0; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-compare .ledger { --cols: minmax(0, 1fr) minmax(0, 1fr); }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-compare .ledger-cell { font-size: 16px; line-height: 1.5; }
:is(#p-solutions, #p-gimbal, #p-engineering, #p-innovation-hub) .sol-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  justify-self: start;
  margin: 0;
}
/* Wide rows (solutions and gimbal only): the row header, a full-width pair of screens, copy in two columns below.
   The pair is the wide screen plus a phone in the iPhone frame (.device-phone, below). On phones the phone sits under the
   wide screen's right edge, overlapping it; from 768px it sits beside the wide screen. No caption and no status tag:
   the alt text says sample, invented or concept. All four solutions rows use it. */
:is(#p-solutions, #p-gimbal) .sol-wide .spec-body > * + * { margin-top: var(--s-6); }
:is(#p-solutions, #p-gimbal) .sol-duo { display: grid; grid-template-columns: minmax(0, 1fr) min(48%, 220px); gap: var(--s-3); }
:is(#p-solutions, #p-gimbal) .sol-duo > .shot:first-child { grid-column: 1 / -1; }
:is(#p-solutions, #p-gimbal) .sol-duo-side { grid-area: 2 / 2; margin-top: calc(var(--s-8) * -1); box-shadow: var(--shadow-1); }
/* The plate reader's Pause motion control (the site's check row) sits just under the figure, right-aligned under the phone */
#p-solutions .sol-duo + .lpr-pause { width: fit-content; margin: var(--s-3) 0 0 auto; }
:is(#p-solutions, #p-gimbal) .sol-cols { display: grid; gap: var(--s-5); }
@media (min-width: 768px) {
  :is(#p-solutions, #p-gimbal) .sol-wide { grid-template-columns: minmax(0, 1fr); }
  :is(#p-solutions, #p-gimbal) .sol-duo { grid-template-columns: minmax(0, 1fr) 24%; column-gap: 0; align-items: center; }
  :is(#p-solutions, #p-gimbal) .sol-duo > .shot:first-child { grid-area: 1 / 1; }
  :is(#p-solutions, #p-gimbal) .sol-duo-side { grid-area: 1 / 2; margin: 0 0 0 calc(var(--s-5) * -1); }
}
@media (min-width: 1024px) {
  :is(#p-solutions, #p-gimbal) .sol-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); align-items: start; }
}
/* Row header (solutions and gimbal): the product logo leads, the sector sits under it in the same h2 at a smaller size.
   The tag group (ownership, platforms) sits on the right from 768px, top-aligned with the logo; on phones it sits
   under the subtitle, left-aligned, and wraps with no indent (the extra space before the platforms is desktop only).
   Each logo's width and height attributes set its size, so wordmarks of different shapes read at a similar weight.
   The Chariot lockup is its mark plus live text. */
:is(#p-solutions, #p-gimbal) .sol-head { display: grid; justify-items: start; gap: var(--s-3); }
@media (min-width: 768px) {
  :is(#p-solutions, #p-gimbal) .sol-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); }
  :is(#p-solutions, #p-gimbal) .sol-head .sol-meta { justify-content: flex-end; }
  :is(#p-solutions, #p-gimbal) .sol-head .tag-neutral + .tag-platform { margin-inline-start: var(--s-2); }
}
:is(#p-solutions, #p-gimbal) .sol-head h2 { display: grid; justify-items: start; gap: var(--s-3); font-size: 20px; line-height: 1.3; letter-spacing: var(--track-h3); }
@media (min-width: 768px) { :is(#p-solutions, #p-gimbal) .sol-head h2 { gap: var(--s-4); font-size: 24px; } }
:is(#p-solutions, #p-gimbal) .sol-logo { max-width: 100%; height: auto; }
@media (max-width: 479px) { :is(#p-solutions, #p-gimbal) .sol-head .sol-logo { zoom: 0.85; } }
:is(#p-solutions, #p-gimbal) .sol-meta { list-style: none; gap: var(--s-2); }
:is(#p-solutions, #p-gimbal) .tag-platform { background: transparent; border-color: var(--hairline); color: var(--ink-3); }
#p-solutions .sol-lockup { display: flex; align-items: center; gap: var(--s-3); font-size: 34px; line-height: 1.05; color: var(--white); }
#p-solutions .sol-lockup img { width: auto; height: 1.65em; }
#p-solutions .sol-lockup > span { display: grid; }
#p-solutions .sol-lockup small { font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); }
/* Supporting technology (solutions only): four equal-height cards, drawing, title and text, with no link row.
   Below 1100px the drawing sits beside the title; from 1100px it sits on top. Rows pack to the top, so a shorter
   card ends on its text. The decision models card adds its status tag under the text. */
#p-solutions .sol-addons { display: grid; gap: var(--s-4); }
#p-solutions .sol-addons > li { display: grid; grid-template-columns: min(40%, 176px) minmax(0, 1fr); align-content: start; align-items: start; gap: var(--s-3) var(--s-4); }
#p-solutions .sol-addons img { width: 100%; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-control); }
#p-solutions .sol-addons h3 { align-self: center; font-size: 17px; line-height: 1.35; }
#p-solutions .sol-addons p { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#p-solutions .sol-addons .tag { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 768px) { #p-solutions .sol-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  #p-solutions .sol-addons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #p-solutions .sol-addons > li { grid-template-columns: minmax(0, 1fr); }
  #p-solutions .sol-addons img { margin-bottom: var(--s-2); }
}
/* iPhone frame (.device-phone): a titanium band, black glass bezel, dynamic island, status bar and home indicator around one screen.
   Pure CSS, no gradients, blur, inset shadows or text-shadow. Sized from its own width, so it fits any slot.
   The frame (bezel, corners) is in cqi of .device-phone; the screen is a container too, so the bar, island and any
   component inside it (the LPR animation) size in cqi of the screen. The screen keeps the iPhone 15/16 ratio, 393:852.
   Modifiers: --light (white bar, dark icons), --overlay (bar floats over full-bleed content), --safe (bottom safe area
   kept clear), --bare (the screen image draws its own status bar and home indicator: leave the bar out).
   The row placement (.sol-duo-side) is in the rules above. */
.device-phone {
  --dp-metal: #4B4D52;
  --dp-edge: #7C7F86;
  --dp-seam: #1A1B1E;
  --dp-glass: #050506;
  --dp-bar: #1C1C1E;
  --dp-ink: #FFFFFF;
  --dp-ink-dim: rgba(255, 255, 255, 0.4);
  --dp-home: #000000;
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--dp-edge);
  border-radius: 16.7% / 8.03%;
  background: var(--dp-metal);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 40px -24px rgba(0, 0, 0, 0.9);
}
/* side buttons: action and volume on the left, the side button on the right */
.device-phone::before, .device-phone::after {
  content: "";
  position: absolute;
  width: calc(1px + 0.6cqi);
  background: var(--dp-edge);
}
.device-phone::before { right: 100%; top: 19%; height: 5.4%; border-radius: 1px 0 0 1px; box-shadow: 0 17.5cqi 0 var(--dp-edge), 0 31cqi 0 var(--dp-edge); }
.device-phone::after { left: 100%; top: 30%; height: 10.5%; border-radius: 0 1px 1px 0; }
.device-phone-screen {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template: "bar" auto "app" minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
  margin: 3.8cqi;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: 12.9cqi;
  background: var(--dp-bar);
  box-shadow: 0 0 0 2.7cqi var(--dp-glass), 0 0 0 calc(2.7cqi + 1px) var(--dp-seam);
}
/* dynamic island and home indicator (in cqi of the screen) */
.device-phone-screen::before, .device-phone-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  translate: -50% 0;
  border-radius: 999px;
}
.device-phone-screen::before { top: 2.8cqi; width: 32cqi; height: 9.4cqi; background: #000; }
.device-phone-screen::after { bottom: 2cqi; width: 34cqi; height: 1.3cqi; background: var(--dp-home); }
/* the app: an <img>, or a component that stretches to fill the area (its own display and position are left alone) */
.device-phone-screen > :not(.device-phone-bar) { grid-area: app; min-width: 0; min-height: 0; }
.device-phone-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the site's screenshot dim (--shot-dim, as on .shot img), on the whole screen so the bar and the app match */
.device-phone-screen { filter: var(--shot-dim, none); }
.device-phone:hover .device-phone-screen { filter: none; }
@media (prefers-reduced-motion: no-preference) { .device-phone-screen { transition: filter var(--t-fast, 0.15s) ease-out; } }
/* status bar: time, signal, wifi, battery (drawn, aria-hidden) */
.device-phone-bar {
  grid-area: bar;
  position: relative;
  z-index: 2;
  height: 13.7cqi;
  color: var(--dp-ink);
  background: var(--dp-bar);
}
.device-phone-bar > *, .device-phone-bar::before, .device-phone-bar::after { position: absolute; top: 7.5cqi; translate: 0 -50%; }
.device-phone-bar b { left: 15.3%; translate: -50% -50%; font: 600 4.33cqi/1 var(--font-sans, system-ui, -apple-system, sans-serif); letter-spacing: -0.01em; }
.device-phone-bar::before {
  content: "";
  left: 76.1%;
  width: 4.33cqi;
  height: 2.93cqi;
  background: currentColor;
  clip-path: polygon(0 100%, 0 65%, 17.6% 65%, 17.6% 100%, 27.5% 100%, 27.5% 43%, 45.1% 43%, 45.1% 100%, 55% 100%, 55% 22%, 72.6% 22%, 72.6% 100%, 82.4% 100%, 82.4% 0, 100% 0, 100% 100%);
}
/* wifi: dot (content box), middle arc (border), outer arc (outline), cut to a 90 degree fan */
.device-phone-bar::after {
  content: "";
  left: 83.6%;
  top: 8.9cqi;
  translate: -50% -50%;
  width: 0.8cqi;
  height: 0.8cqi;
  padding: 0.45cqi;
  border: 0.6cqi solid currentColor;
  border-radius: 50%;
  outline: 0.6cqi solid currentColor;
  outline-offset: 0.45cqi;
  background: currentColor;
  background-clip: content-box;
  clip-path: polygon(50% 50%, calc(50% - 4cqi) calc(50% - 4cqi), calc(50% + 4cqi) calc(50% - 4cqi));
}
.device-phone-bar i {
  left: 86.8%;
  box-sizing: border-box;
  width: 6.87cqi;
  height: 3.3cqi;
  border: max(1px, 0.3cqi) solid var(--dp-ink-dim);
  border-radius: 1cqi;
  box-shadow: 1.55cqi 0 0 -1cqi var(--dp-ink-dim);
}
.device-phone-bar i::after { content: ""; position: absolute; inset: 0.3cqi; border-radius: 0.5cqi; background: currentColor; }
/* --light: white bar, dark icons */
.device-phone--light { --dp-bar: #FFFFFF; --dp-ink: #000000; --dp-ink-dim: rgba(0, 0, 0, 0.35); }
/* --overlay: the bar floats over full-bleed content (a camera view, or a phone screen with a blank top band for the bar) */
.device-phone--overlay .device-phone-bar { position: absolute; inset: 0 0 auto; background: transparent; }
/* --safe: keep the bottom safe area clear (the home indicator sits under the content, not on it); the image is contained
   above it, so any spare edge shows --dp-bar. Use it when the screen's edges are that colour (Chariot: white, with --light). */
.device-phone--safe .device-phone-screen > img { box-sizing: border-box; padding-bottom: 8.6cqi; object-fit: contain; background: var(--dp-bar); }
/* --bare: the image draws its own status bar and home indicator; a smaller island covers its camera dot */
.device-phone--bare .device-phone-screen::before { top: 1.5cqi; width: 28cqi; height: 6.7cqi; }
.device-phone--bare .device-phone-screen::after { content: none; }
/* Sticky Tickets plate reader (ported from the Sticky Tickets technology page).
   The camera frames the plate, a red beam reads it, the corners lock green and the pill switches to "Plate read", then the results
   sheet slides up with three matches. One phone screen, no frame: the iPhone frame (.device-phone--overlay: status bar, island, bezel) wraps it.
   Sized in cqw of the screen width (100cqw = screen width; the source was drawn on a 278px screen, so 1px there = .36cqw).
   Motion: a 10s loop (scan 0.5-1.6s, lock 1.75s, sheet 2.3s, rows 2.6s, hold, sheet down at 8.5s), only with
   prefers-reduced-motion: no-preference. The base rules are the finished state, so reduced motion shows the read plate and the matches.
   Pause (WCAG 2.2.2): a <label class="lpr-pause"> checkbox on the page stops the loop on that finished frame. */
.lpr-demo {
  --lpr-ink: #1A1A1A; --lpr-muted: #66665F; --lpr-canvas: #F6F6F4; --lpr-hair: rgba(17, 17, 17, 0.09);
  --lpr-green: #1A9D54; --lpr-green-ink: #0F7B3D; --lpr-green-bg: #E7F5EC;
  --lpr-amber: #946000; --lpr-amber-bg: #FDF1DC; --lpr-red: #C8102E; --lpr-red-bg: #FBE9EC;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  background: #1C1E22;
  color: #FFFFFF;
  font-family: var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  line-height: 1.2;
  text-align: left;
}
.lpr-demo *, .lpr-demo *::before, .lpr-demo *::after { box-sizing: border-box; }
.lpr-demo p { margin: 0; max-width: none; }
/* in the iPhone frame: fill the screen exactly (the photo stays square at the top, the sheet stays on the bottom edge) */
.device-phone-screen > .lpr-demo { height: 100%; aspect-ratio: auto; }

/* camera: a square shot full width from the top. The photo carries the original scrim (darker top under the status bar,
   bottom fading to #1C1E22), baked into the webp because the gate allows no gradient here. */
.lpr-demo .lpr-shot { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #2A2E33; }
.lpr-demo .lpr-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; filter: none; }
.lpr-demo .lpr-where { position: absolute; left: 0; right: 0; bottom: 5.76cqw; text-align: center; font-size: 3.96cqw; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }

/* scan box around the plate (left/top/width/height in % of the square): ::before = four corner brackets (a border clipped to its corners), ::after = the beam */
.lpr-demo .lpr-tgt { position: absolute; left: 23%; top: 30%; width: 54%; height: 31%; }
.lpr-demo .lpr-tgt::before, .lpr-demo .lpr-search::before {
  content: "";
  clip-path: polygon(50% 50%, 0 0, var(--c) 0, var(--c) var(--c), 0 var(--c), 0 0, 50% 50%, 100% 0, 100% var(--c), calc(100% - var(--c)) var(--c), calc(100% - var(--c)) 0, 100% 0, 50% 50%, 100% 100%, calc(100% - var(--c)) 100%, calc(100% - var(--c)) calc(100% - var(--c)), 100% calc(100% - var(--c)), 100% 100%, 50% 50%, 0 100%, 0 calc(100% - var(--c)), var(--c) calc(100% - var(--c)), var(--c) 100%, 0 100%);
}
.lpr-demo .lpr-tgt::before { --c: 5.76cqw; position: absolute; inset: 0; border: 0.9cqw solid var(--lpr-green); border-radius: 3.24cqw; }
.lpr-demo .lpr-tgt::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1.08cqw; background: var(--lpr-red); box-shadow: 0 0 4.3cqw 1.08cqw rgba(200, 16, 46, 0.5); opacity: 0; }

/* status pill under the camera: "Reading plate…" and "Plate read" stacked in one cell */
.lpr-demo .lpr-hint { display: grid; justify-items: center; margin-top: 5cqw; }
.lpr-demo .lpr-hint b { grid-area: 1 / 1; padding: 2.5cqw 4.3cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 4.3cqw; font-weight: 600; line-height: 1; color: #FFFFFF; white-space: nowrap; }
.lpr-demo .lpr-hint b:first-child { opacity: 0; }
.lpr-demo .lpr-hint b:last-child { background: var(--lpr-green-ink); }

/* results sheet: grabber, the read plate, three matches */
.lpr-demo .lpr-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 7.9cqw 5cqw 6.5cqw; border-radius: 9.35cqw 9.35cqw 0 0; background: #FFFFFF; color: var(--lpr-ink); box-shadow: 0 -3.6cqw 10.8cqw rgba(0, 0, 0, 0.25); }
.lpr-demo .lpr-sheet::before { content: ""; position: absolute; top: 2.9cqw; left: 50%; width: 12.95cqw; height: 1.8cqw; margin-left: -6.48cqw; border-radius: 1.08cqw; background: #D5D5D0; }
.lpr-demo .lpr-search { position: relative; display: flex; align-items: center; gap: 2.9cqw; padding: 3.96cqw 4.3cqw; border-radius: 5cqw; background: var(--lpr-canvas); }
.lpr-demo .lpr-search::before { --c: 1.1cqw; flex: none; width: 4.07cqw; height: 4.07cqw; margin: 0 1cqw; border: 0.43cqw solid var(--lpr-muted); border-radius: 0.3cqw; }
.lpr-demo .lpr-search::after { content: ""; position: absolute; top: 50%; left: 6.07cqw; width: 2.54cqw; height: 0.43cqw; margin-top: -0.215cqw; border-radius: 0.2cqw; background: var(--lpr-muted); }
.lpr-demo .lpr-search b { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 6.1cqw; font-weight: 600; line-height: 1; letter-spacing: 0.06em; color: var(--lpr-ink); white-space: nowrap; }
.lpr-demo .lpr-search span { margin-left: auto; padding: 1.8cqw 2.5cqw; border-radius: 999px; background: var(--lpr-green-bg); color: var(--lpr-green-ink); font-size: 3.6cqw; font-weight: 600; line-height: 1; white-space: nowrap; }
.lpr-demo .lpr-res { position: relative; display: flex; align-items: center; gap: 3.6cqw; padding: 3.24cqw 0.72cqw; border-bottom: 1px solid var(--lpr-hair); }
.lpr-demo .lpr-res:last-child { border-bottom: 0; }
.lpr-demo .lpr-res::before { content: ""; flex: none; width: 10.8cqw; height: 10.8cqw; border-radius: 3.6cqw; background: var(--lpr-badge); }
.lpr-demo .lpr-res::after { content: ""; position: absolute; top: 50%; left: 6.12cqw; translate: -50% -50%; color: var(--lpr-icon); }
.lpr-demo .lpr-res b { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 4.86cqw; font-weight: 600; line-height: 1.3; color: var(--lpr-ink); }
.lpr-demo .lpr-res span { margin-left: auto; padding: 2.5cqw 3.24cqw; border-radius: 999px; background: var(--lpr-badge); color: var(--lpr-icon); font-size: 3.96cqw; font-weight: 600; line-height: 1; white-space: nowrap; }
.lpr-demo .lpr-ok { --lpr-badge: var(--lpr-green-bg); --lpr-icon: var(--lpr-green-ink); }
.lpr-demo .lpr-warn { --lpr-badge: var(--lpr-amber-bg); --lpr-icon: var(--lpr-amber); }
.lpr-demo .lpr-no { --lpr-badge: var(--lpr-red-bg); --lpr-icon: var(--lpr-red); }
.lpr-demo .lpr-no span { background: var(--lpr-red); color: #FFFFFF; }
/* badge icons: check (two borders of a turned box), alert (ring with "!"), x (a clipped square) */
.lpr-demo .lpr-ok::after { width: 1.9cqw; height: 3.4cqw; margin-top: -0.5cqw; border: solid currentColor; border-width: 0 0.45cqw 0.45cqw 0; rotate: 45deg; }
.lpr-demo .lpr-warn::after { content: "!"; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border: 0.42cqw solid currentColor; border-radius: 50%; font-size: 3.1cqw; font-weight: 700; line-height: 1; }
.lpr-demo .lpr-no::after { width: 3.3cqw; height: 3.3cqw; background: currentColor; clip-path: polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0, 50% 40%); }

/* pause control: hidden unless the loop runs and :has() can act on it (shown in the motion block below) */
.lpr-pause { display: none; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .lpr-demo .lpr-tgt::after { animation: lpr-beam 10s infinite both; }
  .lpr-demo .lpr-tgt::before { animation: lpr-lock 10s infinite both; }
  .lpr-demo .lpr-hint b:first-child { animation: lpr-reading 10s infinite both; }
  .lpr-demo .lpr-hint b:last-child { animation: lpr-read 10s infinite both; }
  .lpr-demo .lpr-sheet { animation: lpr-sheet 10s infinite both; }
  .lpr-demo .lpr-res { animation: lpr-row 10s infinite both; }
  .lpr-demo .lpr-res:nth-child(3) { animation-delay: 0.12s; }
  .lpr-demo .lpr-res:nth-child(4) { animation-delay: 0.24s; }
  /* pause: animation none = the finished frame (listed after the rules above; pseudo-elements carry the beam and corners) */
  body:has(.lpr-pause :checked) .lpr-demo *, body:has(.lpr-pause :checked) .lpr-demo *::before, body:has(.lpr-pause :checked) .lpr-demo *::after { animation: none; }
  @supports selector(:has(*)) { .lpr-pause { display: flex; } }
}
@keyframes lpr-beam {
  0%, 5% { left: 0; opacity: 0; }
  5.01% { left: 0; opacity: 1; animation-timing-function: ease-in-out; }
  10.5% { left: calc(100% - 1.08cqw); opacity: 1; animation-timing-function: ease-in-out; }
  16% { left: 0; opacity: 1; }
  16.01%, 100% { left: 0; opacity: 0; }
}
@keyframes lpr-lock { 0%, 17.5% { border-color: #FFFFFF; } 20.5%, 88% { border-color: var(--lpr-green); } 91%, 100% { border-color: #FFFFFF; } }
@keyframes lpr-reading { 0%, 17.5% { opacity: 1; } 19.5%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes lpr-read { 0%, 18% { opacity: 0; } 20.5%, 88% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes lpr-sheet {
  0%, 23% { transform: translateY(100%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  29%, 85% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  89%, 100% { transform: translateY(100%); }
}
@keyframes lpr-row {
  0%, 26% { opacity: 0; transform: translateY(-5cqw); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  30.5%, 90% { opacity: 1; transform: none; }
  90.01%, 100% { opacity: 0; transform: translateY(-5cqw); }
}