:root {
  --blue: #0F73B3;
  --blue-deep: #0B4C78;
  --magenta: #C81F7A;
  --ink: #18232E;
  --muted: #5A6774;
  --line: #DCE4EB;
  --bg: #FFFFFF;
  --tint: #EFF4F8;
  --tint-2: #E3EDF5;
  --f-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --r: 6px;
  --ui-font-size: 16px;
  color-scheme: light;
}

@media (700px < width < 1800px) {
  :root { --ui-font-size: 15px; }
}

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1.25 var(--f-body); text-align: center;
  padding: 15px 22px; border-radius: var(--r); text-decoration: none;
  border: 2px solid var(--blue); background: var(--blue); color: #fff; cursor: pointer;
  transition: background .15s, border-color .15s;

  &:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
}
.btn.--secondary {
  border-color: var(--line); background: transparent; color: var(--ink);

  &:hover { border-color: var(--blue); color: var(--blue); }
}
.meta {
  display: flex; flex-wrap: wrap; align-items: start; gap: 16px 24px; margin: 0;

  & > div { display: grid; gap: 4px; min-width: 0; }
  & dt { color: var(--muted); font-size: 14px; }
  & dd { margin: 0; overflow-wrap: anywhere; }
}

.customer-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  padding: 12px 16px 24px; color: var(--soft); font-size: 14px;

  & a {
    color: inherit; text-decoration: none;

    &:hover { text-decoration: underline; }
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  
  img {
    transition: opacity .25s ease;

    &:not(.--loaded) { 
      opacity: 0; 
    }
  }
}