:root {
  --ink: #14201e;
  --muted: #586779;
  --line: #e5e7eb;
  --page: #f8f9fa;
  --surface: #fff;
  --marketing: #f5f1ea;
  --soft: #f2f4f5;
  --logo-backdrop: #eee8dd;
  --accent: #ffaa19;
  --accent-hover: #ed8d00;
  --accent-ink: #865100;
  --focus: #b36a00;
  --on-dark: #f3dcc0;
  --dark-line: #5d5850;
  --overlay: #15201eaa;
  --shadow: #2b211319;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --font: Inter, "Segoe UI", system-ui, sans-serif;
  accent-color: var(--accent-ink);
}
.product-logo {
  position: relative;
  display: block;
  width: min(245px, 100%);
  aspect-ratio: 5.55;
  overflow: hidden;
}
.product-logo img {
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
}
body > header { background: var(--logo-backdrop); }
body > header > div:first-child { flex: 1; min-width: 0; }
body > header .product-logo { width: min(245px, 100%); }
main > h1 > .product-logo { width: min(265px, 100%); margin-inline: auto; }
select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
[hidden] { display: none !important; }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }