/* Minimal layout: whitespace and text only. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

:root {
  color-scheme: light;
  --upcr-border: rgba(17, 17, 17, 0.28);
  --upcr-input-border: var(--upcr-border);
  --upcr-radius: 0.5rem;
  --upcr-control-padding-y: 0.5rem;
  --upcr-control-padding-x: 0.85rem;
  --upcr-control-min-height: auto;
  --upcr-space-block: 1.25rem;
  --upcr-space-section: 3.25rem;
  --upcr-space-page-bottom: 5rem;
  --upcr-space-section-y: var(--upcr-space-page-bottom);
  --upcr-section-divider: var(--upcr-border);
  --upcr-font: "Poppins", sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--upcr-font);
  font-size: 1rem;
  line-height: 1.65;
  color: #111;
  background: #fff;
}

.page-load-host {
  position: relative;
}

.page-load-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #fff;
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.28s ease;
}

.page-load-overlay--hide {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-load-overlay {
    display: none;
  }
}

button,
input,
textarea,
select {
  font-family: inherit;
}

main {
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--upcr-space-block);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--upcr-space-block);
}

h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
}

h2 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

ul,
ol {
  padding-left: 1.25rem;
}

.wrap {
  width: min(42rem, calc(100% - 2.5rem));
  margin: 0 auto;
}

.topbar {
  padding: 2rem 0 1rem;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  line-height: 1.2;
}

.brand:hover {
  text-decoration: none;
  opacity: 0.85;
}

.brand__name {
  font-family: var(--upcr-font);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #111;
}

.brand__name strong {
  font-weight: 700;
}

.brand__logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 2rem;
  max-width: min(12rem, 40vw);
  object-fit: contain;
  aspect-ratio: 753 / 754;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.nav a {
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

html.pwa-standalone .nav > a {
  display: none;
}

html.pwa-standalone .site-footer {
  display: none;
}

html.pwa-standalone #pwa-install-panel {
  display: none !important;
}

.hero {
  padding: 3.5rem 0;
}

.hero .wrap {
  width: min(52rem, calc(100% - 2.5rem));
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: center;
}

.hero__mark {
  justify-self: center;
}

.hero__logo {
  display: block;
  width: 100%;
  max-width: 10.5rem;
  height: auto;
  margin: 0;
  object-fit: contain;
  aspect-ratio: 753 / 754;
}

.hero__copy h1 {
  margin-bottom: 1rem;
}

.hero__copy p {
  max-width: 36rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  html.scroll-reveal-ready .scroll-reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(1.75rem);
  }

  .scroll-reveal {
    transition:
      opacity 0.65s ease,
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.scroll-reveal-ready .scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .enrich-example__phase > span,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .enrich-example__slide,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .enrich-example__product,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .enrich-example__pane,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .enrich-example > .demo-phase-loading,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .scanner-mock__phase > span,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .scanner-mock__slide,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .scanner-mock__pane,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .scanner-mock__barcode span,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .scanner-mock__laser,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .scanner-mock__code,
  html.scroll-reveal-ready .scroll-reveal:not(.demo-playing) .demo-phase-spinner {
    animation-play-state: paused;
  }
}

main > section + section,
main > .page-load-host > section + section {
  position: relative;
  border-top: 0;
}

main > section + section::before,
main > .page-load-host > section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--upcr-section-divider);
  pointer-events: none;
}

.page-sections {
  display: grid;
  gap: 0;
  padding: var(--upcr-space-section-y) 0;
}

.page-sections article + article {
  border-top: 1px solid var(--upcr-section-divider);
  padding-top: var(--upcr-space-section);
}

.page-sections article h2 {
  margin-bottom: 0.85rem;
}

.enrich-examples {
  padding: 4rem 0;
}

.supported-platforms {
  padding: 4rem 0;
}

.supported-platforms > .wrap > h2 {
  margin-bottom: 0.85rem;
}

.supported-platforms > .wrap > p {
  max-width: 36rem;
  margin-bottom: 2rem;
}

.supported-platforms__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 2.5rem;
}

.supported-platforms__item {
  margin: 0;
}

.supported-platforms__logo {
  display: block;
  width: auto;
  max-width: min(100%, 12rem);
  height: auto;
  max-height: 3.5rem;
  object-fit: contain;
}

.supported-platforms__logo--linga {
  max-height: 3.25rem;
}

.home-scroll-hint-wrap {
  position: relative;
  margin-top: -1.5rem;
  padding-bottom: 0.5rem;
}

.home-scroll-hint-wrap + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--upcr-section-divider);
  pointer-events: none;
}

.home-scroll-hint-wrap + section {
  position: relative;
}

.home-scroll-hint {
  display: flex;
  justify-content: center;
  margin: 0;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.home-scroll-hint[hidden] {
  display: none;
}

.home-scroll-hint.is-dismissed {
  opacity: 0;
  pointer-events: none;
}

.home-scroll-hint__bounce {
  display: block;
}

.home-scroll-hint__chevron {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .home-scroll-hint__bounce {
    animation: home-scroll-hint-bounce 1.75s ease-in-out infinite;
  }
}

@keyframes home-scroll-hint-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  50% {
    transform: translateY(0.4rem);
    opacity: 1;
  }
}

.enrich-examples > h2 {
  margin-bottom: 0.85rem;
}

.enrich-examples > p {
  max-width: 36rem;
  margin-bottom: 2.25rem;
}

.enrich-example {
  position: relative;
  border: 1px solid var(--upcr-input-border);
  border-radius: var(--upcr-radius);
  padding: 1.25rem 1.25rem 1.5rem;
}

main {
  --demo-cycle: 12s;
  --demo-seg: 33.333%;
}

.enrich-example__stage,
.scanner-mock {
  /* Inherit shared demo timing from main. */
}

.enrich-example__phase {
  position: relative;
  height: 2rem;
  margin: 0 0 0.85rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.enrich-example__phase > span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.enrich-example__phase-before {
  color: rgba(17, 17, 17, 0.55);
  animation-name: enrich-phase-before;
}

.enrich-example__phase-after {
  color: #111;
  font-weight: 700;
  animation-name: enrich-phase-after;
}

.enrich-example__card {
  position: relative;
  padding: 0.85rem 1rem 1rem;
  background: rgba(17, 17, 17, 0.02);
}

.enrich-example__demo {
  position: relative;
}

.enrich-example__slides {
  position: relative;
  display: grid;
}

.enrich-example__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  opacity: 0;
  visibility: hidden;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.enrich-example__slide:nth-child(1) { animation-name: enrich-slide-1; }
.enrich-example__slide:nth-child(2) { animation-name: enrich-slide-2; }
.enrich-example__slide:nth-child(3) { animation-name: enrich-slide-3; }

.enrich-example__product {
  grid-row: 1;
  grid-column: 1;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  opacity: 0;
  visibility: hidden;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.enrich-example__slide:nth-child(1) .enrich-example__product { animation-name: enrich-p1-product; }
.enrich-example__slide:nth-child(2) .enrich-example__product { animation-name: enrich-p2-product; }
.enrich-example__slide:nth-child(3) .enrich-example__product { animation-name: enrich-p3-product; }

.enrich-example__pane {
  grid-row: 2;
  grid-column: 1;
  opacity: 0;
  visibility: hidden;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.enrich-example__pane--after {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
}

.enrich-example__slide:nth-child(1) .enrich-example__pane--before { animation-name: enrich-s1-before; }
.enrich-example__slide:nth-child(1) .enrich-example__pane--after { animation-name: enrich-s1-after; }
.enrich-example__slide:nth-child(2) .enrich-example__pane--before { animation-name: enrich-s2-before; }
.enrich-example__slide:nth-child(2) .enrich-example__pane--after { animation-name: enrich-s2-after; }
.enrich-example__slide:nth-child(3) .enrich-example__pane--before { animation-name: enrich-s3-before; }
.enrich-example__slide:nth-child(3) .enrich-example__pane--after { animation-name: enrich-s3-after; }

.enrich-example__fields {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.enrich-example__fields > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
}

.enrich-example__fields dt {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(17, 17, 17, 0.55);
}

.enrich-example__fields dd {
  margin: 0;
  font-size: 0.9375rem;
}

.enrich-example__fields dd.is-missing {
  color: rgba(17, 17, 17, 0.4);
  font-style: italic;
}

.demo-phase-loading {
  z-index: 4;
  display: grid;
  place-items: center;
  line-height: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  animation: enrich-phase-active var(--demo-cycle) ease-in-out infinite;
}

.enrich-example > .demo-phase-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 0;
}

.demo-phase-spinner {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--upcr-border);
  border-top-color: transparent;
  border-radius: 50%;
  animation: demo-phase-spinner-turn 0.7s linear infinite;
}

@keyframes demo-phase-spinner-turn {
  to { transform: rotate(360deg); }
}

@keyframes enrich-phase-before {
  0%, 8% { opacity: 1; visibility: visible; }
  11%, 32% { opacity: 0; visibility: hidden; }
  33.333%, 41% { opacity: 1; visibility: visible; }
  44.333%, 65% { opacity: 0; visibility: hidden; }
  66.666%, 74.666% { opacity: 1; visibility: visible; }
  77.666%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-phase-active {
  0%, 10% { opacity: 0; visibility: hidden; }
  11%, 15% { opacity: 1; visibility: visible; }
  16%, 32% { opacity: 0; visibility: hidden; }
  33.333%, 43% { opacity: 0; visibility: hidden; }
  44.333%, 48.333% { opacity: 1; visibility: visible; }
  49%, 65% { opacity: 0; visibility: hidden; }
  66.666%, 77% { opacity: 0; visibility: hidden; }
  77.666%, 81.666% { opacity: 1; visibility: visible; }
  82%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-phase-after {
  0%, 14% { opacity: 0; visibility: hidden; }
  16%, 29% { opacity: 1; visibility: visible; }
  32%, 33% { opacity: 0; visibility: hidden; }
  33.333%, 47% { opacity: 0; visibility: hidden; }
  48.333%, 63.333% { opacity: 1; visibility: visible; }
  65%, 66% { opacity: 0; visibility: hidden; }
  66.666%, 80% { opacity: 0; visibility: hidden; }
  81.666%, 96.666% { opacity: 1; visibility: visible; }
  98%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-slide-1 {
  0%, 31% { opacity: 1; visibility: visible; }
  33.333%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-slide-2 {
  0%, 31% { opacity: 0; visibility: hidden; }
  33.333%, 64.333% { opacity: 1; visibility: visible; }
  66.666%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-slide-3 {
  0%, 64.333% { opacity: 0; visibility: hidden; }
  66.666%, 97.666% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-s1-before {
  0%, 8% { opacity: 1; visibility: visible; }
  11%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-s1-after {
  0%, 14% { opacity: 0; visibility: hidden; transform: translateY(0.25rem); }
  16%, 29% { opacity: 1; visibility: visible; transform: translateY(0); }
  32%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-s2-before {
  0%, 32% { opacity: 0; visibility: hidden; }
  33.333%, 41% { opacity: 1; visibility: visible; }
  44.333%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-s2-after {
  0%, 47% { opacity: 0; visibility: hidden; transform: translateY(0.25rem); }
  48.333%, 63.333% { opacity: 1; visibility: visible; transform: translateY(0); }
  65%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-s3-before {
  0%, 65% { opacity: 0; visibility: hidden; }
  66.666%, 74.666% { opacity: 1; visibility: visible; }
  77.666%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-s3-after {
  0%, 80% { opacity: 0; visibility: hidden; transform: translateY(0.25rem); }
  81.666%, 96.666% { opacity: 1; visibility: visible; transform: translateY(0); }
  98%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-p1-product {
  0%, 8% { opacity: 1; visibility: visible; }
  11%, 15% { opacity: 0; visibility: hidden; }
  16%, 29% { opacity: 1; visibility: visible; }
  32%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-p2-product {
  0%, 32% { opacity: 0; visibility: hidden; }
  33.333%, 41% { opacity: 1; visibility: visible; }
  44.333%, 48% { opacity: 0; visibility: hidden; }
  48.333%, 63.333% { opacity: 1; visibility: visible; }
  65%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes enrich-p3-product {
  0%, 65% { opacity: 0; visibility: hidden; }
  66.666%, 74.666% { opacity: 1; visibility: visible; }
  77.666%, 81% { opacity: 0; visibility: hidden; }
  81.666%, 96.666% { opacity: 1; visibility: visible; }
  98%, 100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .enrich-example__phase {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .enrich-example__phase > span {
    position: static;
    display: inline;
    transform: none;
    animation: none;
    opacity: 1;
    visibility: visible;
  }

  .enrich-example__phase-before::after {
    content: " / ";
    color: rgba(17, 17, 17, 0.35);
  }

  .demo-phase-loading {
    display: none;
  }

  .demo-phase-spinner {
    animation: none;
  }

  .enrich-example__slide {
    grid-area: auto;
  }

  .enrich-example__slides {
    min-height: 0;
    display: grid;
    gap: 2rem;
  }

  .enrich-example__slide {
    position: static;
    animation: none;
    opacity: 1;
    visibility: visible;
    padding: 0;
    display: grid;
    gap: 1rem;
  }

  .enrich-example__product {
    animation: none;
    opacity: 1;
    visibility: visible;
  }

  .enrich-example__slide + .enrich-example__slide {
    padding-top: 1.5rem;
    border-top: 1px solid var(--upcr-border);
  }

  .enrich-example__pane,
  .enrich-example__pane--after {
    position: static;
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .enrich-example__pane--before::before {
    content: "Before";
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.55);
  }

  .enrich-example__pane--after::before {
    content: "After";
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
  }

  @media (min-width: 40rem) {
    .enrich-example__slide {
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }

    .enrich-example__product {
      grid-column: 1 / -1;
    }

    .enrich-example__pane--before {
      padding-right: 1rem;
      border-right: 1px solid var(--upcr-border);
    }
  }
}

.scanner-showcase {
  padding: 4.5rem 0;
}

.scanner-showcase__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .scanner-showcase__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
  }
}

.scanner-showcase__copy > p {
  max-width: 36rem;
  margin-bottom: 1.25rem;
}

.scanner-showcase__steps {
  margin: 0;
  padding-left: 1.25rem;
  max-width: 36rem;
}

.scanner-showcase__steps li + li {
  margin-top: 0.5rem;
}

.scanner-showcase__demo {
  justify-self: center;
  width: min(100%, 18rem);
}

.scanner-mock {
  width: 100%;
  display: grid;
  gap: 0.85rem;
}

.scanner-mock__card {
  border: 1px solid var(--upcr-input-border);
  border-radius: var(--upcr-radius);
  padding: 0.85rem 1rem 1rem;
  background: rgba(17, 17, 17, 0.02);
}

.scanner-mock__phase {
  position: relative;
  height: 2rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.scanner-mock__phase > span {
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  opacity: 0;
  visibility: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scanner-mock__phase-scan {
  color: rgba(17, 17, 17, 0.55);
  animation-name: enrich-phase-before;
}

.scanner-mock__phase-ready {
  color: #111;
  font-weight: 700;
  animation-name: enrich-phase-after;
}

.scanner-mock__demo {
  position: relative;
}

.scanner-mock__slides {
  position: relative;
  display: grid;
}

.scanner-mock__slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scanner-mock__slide:nth-child(1) { animation-name: enrich-slide-1; }
.scanner-mock__slide:nth-child(2) { animation-name: enrich-slide-2; }
.scanner-mock__slide:nth-child(3) { animation-name: enrich-slide-3; }

.scanner-mock__stage {
  position: relative;
}

.scanner-mock__pane {
  opacity: 0;
  visibility: hidden;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scanner-mock__slide:nth-child(1) .scanner-mock__pane--scan { animation-name: scanner-s1-scan; }
.scanner-mock__slide:nth-child(1) .scanner-mock__pane--result { animation-name: enrich-s1-after; }
.scanner-mock__slide:nth-child(2) .scanner-mock__pane--scan { animation-name: scanner-s2-scan; }
.scanner-mock__slide:nth-child(2) .scanner-mock__pane--result { animation-name: enrich-s2-after; }
.scanner-mock__slide:nth-child(3) .scanner-mock__pane--scan { animation-name: scanner-s3-scan; }
.scanner-mock__slide:nth-child(3) .scanner-mock__pane--result { animation-name: enrich-s3-after; }

.scanner-mock__pane--result {
  position: absolute;
  inset: 0;
  padding: 0.15rem 0 0;
}

.scanner-mock__device {
  border-radius: 1.25rem;
  padding: 0.65rem;
  background: rgba(17, 17, 17, 0.03);
}

.scanner-mock__screen {
  border-radius: 0.85rem;
  padding: 1rem 0.85rem 0.85rem;
  background: rgba(17, 17, 17, 0.04);
}

.scanner-mock__viewfinder {
  position: relative;
  overflow: hidden;
  border-radius: 0.35rem;
  padding: 1.1rem 0.75rem;
  background: #fff;
}

.scanner-mock__barcode {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  height: 3.25rem;
}

.scanner-mock__barcode span {
  display: block;
  width: 3px;
  background: #111;
  border-radius: 1px;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scanner-mock__slide:nth-child(1) .scanner-mock__barcode span { animation-name: scanner-barcode-1; }
.scanner-mock__slide:nth-child(2) .scanner-mock__barcode span { animation-name: scanner-barcode-2; }
.scanner-mock__slide:nth-child(3) .scanner-mock__barcode span { animation-name: scanner-barcode-3; }

.scanner-mock__barcode span:nth-child(3n) { width: 2px; opacity: 0.85; }
.scanner-mock__barcode span:nth-child(4n) { width: 4px; }
.scanner-mock__barcode span:nth-child(5n) { width: 2px; height: 88%; align-self: center; }
.scanner-mock__barcode span:nth-child(7n) { width: 5px; }

.scanner-mock__laser {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  top: 12%;
  height: 2px;
  background: rgba(180, 24, 24, 0.85);
  box-shadow: 0 0 10px rgba(180, 24, 24, 0.45);
  pointer-events: none;
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scanner-mock__slide:nth-child(1) .scanner-mock__laser { animation-name: scanner-laser-1; }
.scanner-mock__slide:nth-child(2) .scanner-mock__laser { animation-name: scanner-laser-2; }
.scanner-mock__slide:nth-child(3) .scanner-mock__laser { animation-name: scanner-laser-3; }

.scanner-mock__code {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(17, 17, 17, 0.55);
  animation-duration: var(--demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.scanner-mock__slide:nth-child(1) .scanner-mock__code { animation-name: scanner-code-1; }
.scanner-mock__slide:nth-child(2) .scanner-mock__code { animation-name: scanner-code-2; }
.scanner-mock__slide:nth-child(3) .scanner-mock__code { animation-name: scanner-code-3; }

.scanner-mock__result-name {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.scanner-mock__result-meta {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: rgba(17, 17, 17, 0.55);
}

.scanner-mock__result-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(17, 17, 17, 0.72);
}

@keyframes scanner-s1-scan {
  0%, 8% { opacity: 1; visibility: visible; }
  9%, 10% { opacity: 1; visibility: visible; }
  11%, 15% { opacity: 0.45; visibility: visible; }
  16%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes scanner-s2-scan {
  0%, 32% { opacity: 0; visibility: hidden; }
  33.333%, 41% { opacity: 1; visibility: visible; }
  42%, 43% { opacity: 1; visibility: visible; }
  44.333%, 48.333% { opacity: 0.45; visibility: visible; }
  49%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes scanner-s3-scan {
  0%, 65% { opacity: 0; visibility: hidden; }
  66.666%, 74.666% { opacity: 1; visibility: visible; }
  75.666%, 76.666% { opacity: 1; visibility: visible; }
  77.666%, 81.666% { opacity: 0.45; visibility: visible; }
  82%, 100% { opacity: 0; visibility: hidden; }
}

@keyframes scanner-laser-1 {
  0%, 1% { top: 12%; opacity: 0; }
  2%, 7% { opacity: 1; }
  8%, 10% { top: calc(100% - 0.75rem); opacity: 1; }
  11%, 100% { opacity: 0; }
}

@keyframes scanner-laser-2 {
  0%, 33% { top: 12%; opacity: 0; }
  33.333%, 34% { top: 12%; opacity: 0; }
  35%, 40% { opacity: 1; }
  41%, 43% { top: calc(100% - 0.75rem); opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes scanner-laser-3 {
  0%, 66% { top: 12%; opacity: 0; }
  66.666%, 67.333% { top: 12%; opacity: 0; }
  68.666%, 74% { opacity: 1; }
  75%, 76.666% { top: calc(100% - 0.75rem); opacity: 1; }
  77%, 100% { opacity: 0; }
}

@keyframes scanner-code-1 {
  0%, 6% { opacity: 0.45; }
  7%, 10% { opacity: 1; }
  11%, 100% { opacity: 0.45; }
}

@keyframes scanner-code-2 {
  0%, 33% { opacity: 0.45; }
  39%, 43% { opacity: 1; }
  44%, 100% { opacity: 0.45; }
}

@keyframes scanner-code-3 {
  0%, 65% { opacity: 0.45; }
  72.666%, 76.666% { opacity: 1; }
  77%, 100% { opacity: 0.45; }
}

@keyframes scanner-barcode-1 {
  0%, 4% { opacity: 0.72; }
  5%, 10% { opacity: 1; }
  11%, 15% { opacity: 0.85; }
  16%, 100% { opacity: 0.72; }
}

@keyframes scanner-barcode-2 {
  0%, 33% { opacity: 0.72; }
  37%, 43% { opacity: 1; }
  44.333%, 48.333% { opacity: 0.85; }
  49%, 100% { opacity: 0.72; }
}

@keyframes scanner-barcode-3 {
  0%, 65% { opacity: 0.72; }
  70.666%, 76.666% { opacity: 1; }
  77.666%, 81.666% { opacity: 0.85; }
  82%, 100% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .scanner-mock__phase {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .scanner-mock__phase > span {
    position: static;
    transform: none;
    animation: none;
    opacity: 1;
    visibility: visible;
  }

  .scanner-mock__phase-scan::after {
    content: " / ";
    color: rgba(17, 17, 17, 0.35);
  }

  .demo-phase-loading {
    display: none;
  }

  .demo-phase-spinner {
    animation: none;
  }

  .scanner-mock__laser,
  .scanner-mock__code,
  .scanner-mock__barcode span {
    animation: none;
  }

  .scanner-mock__slide {
    grid-area: auto;
  }

  .scanner-mock__slides {
    min-height: 0;
    display: grid;
    gap: 2rem;
  }

  .scanner-mock__slide {
    position: static;
    animation: none;
    opacity: 1;
    visibility: visible;
    padding: 0;
    display: grid;
    gap: 1rem;
  }

  .scanner-mock__slide + .scanner-mock__slide {
    padding-top: 1.5rem;
    border-top: 1px solid var(--upcr-border);
  }

  .scanner-mock__stage {
    min-height: 0;
    display: grid;
    gap: 1rem;
  }

  .scanner-mock__pane,
  .scanner-mock__pane--result {
    position: static;
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
  }

  .scanner-mock__pane--scan::before {
    content: "Scan";
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.55);
  }

  .scanner-mock__pane--result::before {
    content: "Ready to add";
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
  }
}

.page-sections article p:last-child {
  margin-bottom: 0;
}

.btn,
button:not(.scanner-history-item),
.hero-actions a {
  display: inline-block;
  margin: 0;
  min-height: var(--upcr-control-min-height);
  padding: var(--upcr-control-padding-y) var(--upcr-control-padding-x);
  border: 1px solid var(--upcr-input-border);
  border-radius: var(--upcr-radius);
  background: #fff;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

.btn:hover,
button:not(.scanner-history-item):hover,
.hero-actions a:hover {
  border-color: rgba(17, 17, 17, 0.45);
  text-decoration: none;
}

.btn:focus-visible,
button:not(.scanner-history-item):focus-visible,
.hero-actions a:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.25);
  outline-offset: 2px;
}

.site-footer {
  position: relative;
  padding: 5rem 0;
  border-top: 0;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--upcr-section-divider);
  pointer-events: none;
}

.site-footer__inner {
  display: grid;
  gap: 1.5rem;
}

.site-footer__inner > p {
  margin-bottom: 0;
}

.site-footer__brand {
  margin-bottom: var(--upcr-space-block);
}

.site-footer__brand .brand--lockup {
  text-decoration: none;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.site-footer__nav a {
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.public-contact-page,
.portal-page {
  padding: var(--upcr-space-section-y) 0;
}

.page-content .page-load-host > .account-policy,
.page-content .page-load-host > .subscription-panel,
.page-content .page-load-host > .portal-section,
.page-content .page-load-host > .portal-connect-card,
.page-content .page-load-host > .review-help,
.page-content .page-load-host > .review-matches,
.page-content .page-load-host > .scanner-help,
.page-content .page-load-host > .scanner-history {
  margin: 0;
  padding-top: var(--upcr-space-section);
  padding-bottom: var(--upcr-space-section);
}

.page-content .page-load-host > .account-policy + .account-policy,
.page-content .page-load-host > .account-policy + .subscription-panel,
.page-content .page-load-host > .subscription-panel + .account-policy,
.page-content .page-load-host > .subscription-panel + .subscription-panel,
.page-content .page-load-host > .account-policy + .portal-section,
.page-content .page-load-host > .portal-section + .portal-section,
.page-content .page-load-host > .portal-section + .portal-connect-card,
.page-content .page-load-host > .portal-connect-card + .portal-section,
.page-content .page-load-host > .portal-section + .account-policy,
.page-content .page-load-host > .review-help + .account-policy,
.page-content .page-load-host > .review-help + .review-matches,
.page-content .page-load-host > .account-policy + .review-matches,
.page-content .page-load-host > .review-matches > .review-match.account-policy + .review-match.account-policy,
.page-content .page-load-host > .scanner-history {
  border-top: 1px solid var(--upcr-section-divider);
}

.page-content > h1 {
  margin-bottom: 0.35rem;
}

.page-content .page-load-host > h1 {
  margin-bottom: 0.35rem;
}

.page-content > h1 + p,
.page-content > h1 + .account-summary,
.page-content > h1 + .scanner-lead,
.page-content .page-load-host > h1 + p,
.page-content .page-load-host > h1 + .account-summary,
.page-content .page-load-host > h1 + .scanner-lead {
  margin-bottom: 2rem;
}

.account-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.account-summary__email,
.account-summary__actions {
  margin: 0;
}

.pwa-install__row,
.portal-section__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.pwa-install__copy,
.portal-section__copy {
  flex: 1 1 14rem;
  min-width: 0;
}

.pwa-install__copy > p:first-child,
.portal-section__copy > p:first-child {
  margin: 0;
}

.pwa-install__steps {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.pwa-install__steps li {
  margin: 0.35rem 0;
}

.pwa-install__steps li.is-current {
  font-weight: 600;
}

.portal-section__copy .form-note,
.portal-section__copy .portal-status {
  margin: 0.5rem 0 0;
}

.pwa-install__actions,
.portal-section__actions {
  flex: 0 0 auto;
  margin: 0;
}

.portal-section__detail {
  margin: 0.75rem 0 0;
}

.portal-section__actions:not(:empty) {
  margin-top: 1.25rem;
}

.portal-section .portal-section__row + .portal-section__actions {
  margin-top: 0;
}

.portal-status {
  margin: 0;
  opacity: 1;
  font-weight: 600;
}

.page-content .page-load-host > .form-note + .account-policy,
.page-content .page-load-host > .form-note + .portal-section,
.page-content .page-load-host > .form-error + .portal-section,
.page-content .page-load-host > .form-error + .review-matches,
.page-content .page-load-host > p + .portal-section {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

.public-contact-form,
.scanner-add-form {
  display: grid;
  gap: 1.35rem;
  margin-top: 2rem;
}

.public-contact-form label,
.scanner-add-form label,
.scanner-input-label {
  display: grid;
  gap: 0.35rem;
}

.public-contact-form input,
.public-contact-form textarea,
.public-contact-form select,
.scanner-add-form input,
.scanner-add-form select,
.scanner-input {
  width: 100%;
  margin: 0;
  min-height: var(--upcr-control-min-height);
  padding: var(--upcr-control-padding-y) var(--upcr-control-padding-x);
  border: 1px solid var(--upcr-input-border);
  border-radius: var(--upcr-radius);
  background: #fff;
  color: inherit;
  font: inherit;
  box-shadow: none;
}

.public-contact-form input:focus,
.public-contact-form textarea:focus,
.public-contact-form select:focus,
.scanner-add-form input:focus,
.scanner-add-form select:focus,
.scanner-input:focus {
  outline: none;
  border-color: rgba(17, 17, 17, 0.45);
}

fieldset {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-error,
.form-note,
.form-foot,
.portal-status,
.scanner-lead,
.scanner-field dt,
.scanner-history-item__meta {
  color: inherit;
  opacity: 0.72;
  font-size: inherit;
}

.scanner-status:empty {
  display: none;
}

.scanner-status:not(:empty) {
  margin-top: 1.25rem;
  opacity: 0.72;
}

.form-error {
  opacity: 1;
}

.form-foot {
  margin-top: 2rem;
}

.contact-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.portal-section,
.portal-connect-card {
  margin: 0;
  padding: 0;
  border: 0;
}

.portal-section h2,
.portal-connect-card h2 {
  margin-bottom: 0.75rem;
}

.portal-connect-form {
  margin-top: 1.25rem;
}

.portal-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
}

.portal-radio-group label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.plan-list {
  margin: 1.25rem 0 1.75rem;
  padding-left: 1.25rem;
}

.legal-doc h2 {
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--upcr-section-divider);
  font-size: 1.0625rem;
}

.legal-doc h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-doc h2 + p,
.legal-doc h2 + ul {
  margin-top: 0.5rem;
}

.legal-doc > p.form-note:first-of-type {
  margin-bottom: 1.25rem;
}

.terms-accept {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.terms-accept input {
  margin-top: 0.2rem;
}

.account-policy {
  margin: 0;
}

.account-policy__title {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.subscription-panel {
  margin: 0;
}

.subscription-panel p {
  margin: 0 0 0.75rem;
}

.scanner-lead {
  margin-bottom: 2rem;
}

.scanner-result,
.scanner-result--found,
.scanner-result--missing {
  margin-top: 2rem;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.scanner-result--visible {
  opacity: 1;
  transform: translateY(0);
}

.scanner-fields {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.scanner-field dd {
  margin: 0.15rem 0 0;
}

.scanner-history {
  padding: 0;
  border: 0;
}

.scanner-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.scanner-history-item {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  appearance: none;
}

.scanner-history-item:hover {
  text-decoration-thickness: 2px;
}

.scanner-history-item__title {
  display: inline;
  font-weight: inherit;
}

.scanner-history-item__meta {
  display: inline;
  margin-left: 0.35rem;
}

.scanner-history-item__meta::before {
  content: "·";
  margin-right: 0.35rem;
}

.scanner-add-panel {
  margin-top: 2rem;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.scanner-add-panel--visible {
  opacity: 1;
  transform: translateY(0);
}

.scanner-picks {
  margin: 2rem 0 0;
}

.scanner-picks legend {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.scanner-picks__lead {
  margin: 0 0 1rem;
}

.scanner-picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.scanner-pick {
  width: 100%;
  text-align: left;
}

.scanner-pick__name {
  display: block;
  font-weight: 600;
}

.scanner-pick__meta {
  display: block;
  margin-top: 0.25rem;
  opacity: 0.72;
  font-size: inherit;
  font-weight: 400;
}

.scanner-pick__meta + .scanner-pick__meta {
  margin-top: 0.35rem;
}

.scanner-pick__meta--desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.review-matches {
  margin: 0;
}

.review-matches > .review-match.account-policy:first-child {
  margin-top: 0;
}

.review-match .form-note + .scanner-picks {
  margin-top: 1.25rem;
}

.review-match__actions {
  margin: 1.25rem 0 0;
}

.scanner-add-msg--ok,
.scanner-status--loading,
.scanner-status--ok,
.scanner-status--warn,
.scanner-status--error {
  color: inherit;
  opacity: 0.72;
}

.scanner-status--visible {
  animation: scanner-status-in 0.3s ease forwards;
}

.scanner-status--visible.scanner-status--error {
  opacity: 1;
}

@keyframes scanner-status-in {
  from {
    opacity: 0;
    transform: translateY(0.2rem);
  }

  to {
    opacity: 0.72;
    transform: translateY(0);
  }
}

.scanner-input-row {
  margin: 2rem 0 1rem;
}

.scanner-input-actions {
  display: grid;
  gap: 0.75rem;
}

.scanner-input-actions .scanner-input {
  width: 100%;
  min-width: 0;
}

.scanner-input-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
}

.scanner-submit-btn,
.scanner-camera-btn,
.scanner-camera-stop {
  width: 100%;
  white-space: nowrap;
}

@media (min-width: 36rem) {
  .scanner-input-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
  }

  .scanner-input-buttons {
    display: contents;
  }

  .scanner-submit-btn,
  .scanner-camera-btn {
    width: auto;
    align-self: stretch;
  }
}

.scanner-camera-panel {
  margin: 1.25rem 0 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--upcr-radius);
  background: rgba(0, 0, 0, 0.03);
}

.scanner-camera-panel__frame {
  position: relative;
  overflow: hidden;
  border-radius: 0.35rem;
  background: #000;
  aspect-ratio: 4 / 3;
  max-height: min(60vh, 24rem);
}

.scanner-camera-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-camera-panel__guide {
  position: absolute;
  inset: 12% 10%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0.25rem;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.scanner-camera-hint {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  opacity: 0.78;
}

.scanner-camera-stop {
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .scanner-result,
  .scanner-add-panel {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .scanner-status--visible {
    animation: none;
  }
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 2.75rem;
  padding: 0;
  border: 0;
}

.account-tabs a {
  text-decoration: none;
  opacity: 0.72;
}

.account-tabs a:hover {
  opacity: 1;
  text-decoration: underline;
}

.account-tabs a.is-active {
  opacity: 1;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 640px) {
  :root {
    --upcr-control-padding-y: 0.65rem;
    --upcr-control-padding-x: 1rem;
    --upcr-control-min-height: 2.75rem;
  }

  .wrap,
  .hero .wrap {
    width: min(100%, calc(100% - 1.5rem));
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 1.5rem 0 0.75rem;
  }

  .topbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .nav {
    gap: 0.75rem 1.25rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .hero {
    padding: 2.5rem 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero__mark {
    justify-self: start;
    max-width: 6.5rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero-actions a,
  .hero-actions .btn,
  .hero-actions button {
    text-align: center;
  }

  .page-sections {
    padding: 4rem 0;
  }

  .page-sections article + article {
    padding-top: 2.75rem;
  }

  .enrich-examples {
    padding: 3.25rem 0;
  }

  .supported-platforms {
    padding: 3.25rem 0;
  }

  .scanner-showcase {
    padding: 3.75rem 0;
  }

  .account-policy.portal-section,
  .portal-section,
  .portal-connect-card {
    margin-top: 0;
  }

  .page-content .page-load-host > .account-policy,
  .page-content .page-load-host > .subscription-panel,
  .page-content .page-load-host > .portal-section,
  .page-content .page-load-host > .portal-connect-card,
  .page-content .page-load-host > .review-help,
  .page-content .page-load-host > .review-matches,
  .page-content .page-load-host > .scanner-help,
  .page-content .page-load-host > .scanner-history {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .account-tabs {
    margin-bottom: 2.25rem;
  }

  .enrich-example__fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .enrich-example__fields dt {
    margin-bottom: 0.1rem;
  }

  .scanner-camera-panel {
    padding: 0.85rem;
  }

  .scanner-camera-stop {
    width: 100%;
  }

  .upcr-dialog {
    padding: 1rem;
  }

  .upcr-dialog__panel {
    width: min(100%, calc(100% - 1rem));
    padding: 1.25rem;
  }

  .upcr-dialog__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .upcr-dialog__actions button,
  .upcr-dialog__actions .btn {
    width: 100%;
    text-align: center;
  }
}

.upcr-dialog[hidden] {
  display: none !important;
}

.upcr-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.upcr-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.35);
}

.upcr-dialog__panel {
  position: relative;
  width: min(28rem, calc(100% - 2rem));
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--upcr-input-border);
  border-radius: var(--upcr-radius);
}

.upcr-dialog__title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.upcr-dialog__body {
  margin: 0 0 1.25rem;
  white-space: pre-wrap;
}

.upcr-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem 1rem;
}

body.upcr-dialog-open {
  overflow: hidden;
}