/* LabShope company page: calm and neutral, colours taken from the logo (deep teal blue, mid blue,
 * light blue, warm grey). */
:root {
  color-scheme: light;
  --bg: #f8f8f8;
  --surface: #ffffff;
  --surface-2: #eef2f4;
  --text: #11242f;
  --text-dim: #47586a;
  --border: rgba(17, 36, 47, 0.14);
  --border-strong: rgba(17, 36, 47, 0.42);
  --accent-text: #0b5f87;
  --accent-solid: #0b5f87;
  --accent-solid-hover: #084a69;
  --on-accent: #ffffff;
  --link: #0b5f87;
  --link-hover: #073f59;
  --focus: #0b5f87;
  --band: #eaf3f8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0c1a23;
    --surface: #132530;
    --surface-2: #1a3140;
    --text: #e8f0f5;
    --text-dim: #a9bcc8;
    --border: rgba(160, 205, 230, 0.18);
    --border-strong: rgba(160, 205, 230, 0.45);
    --accent-text: #6cc1ea;
    --accent-solid: #6cc1ea;
    --accent-solid-hover: #96d3f0;
    --on-accent: #06222f;
    --link: #7ccaee;
    --link-hover: #a6dcf4;
    --focus: #96d3f0;
    --band: #102431;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0c1a23;
  --surface: #132530;
  --surface-2: #1a3140;
  --text: #e8f0f5;
  --text-dim: #a9bcc8;
  --border: rgba(160, 205, 230, 0.18);
  --border-strong: rgba(160, 205, 230, 0.45);
  --accent-text: #6cc1ea;
  --accent-solid: #6cc1ea;
  --accent-solid-hover: #96d3f0;
  --on-accent: #06222f;
  --link: #7ccaee;
  --link-hover: #a6dcf4;
  --focus: #96d3f0;
  --band: #102431;
}

/* The logo is a picture with its own light background: it always sits on a light plate. */
.logo-plate {
  display: inline-flex;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 4px 10px;
  margin-right: auto;
}
.logo-plate img {
  width: 188px;
  height: auto;
}
.hero {
  padding-block: clamp(56px, 10vw, 128px) clamp(48px, 8vw, 104px);
  background: linear-gradient(180deg, var(--band), var(--bg));
}
.hero h1 {
  max-width: 18ch;
}
.hero .lead {
  max-width: 52ch;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  color: var(--text-dim);
  margin-bottom: 1.6em;
}
.products {
  display: grid;
  gap: 20px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.product {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product h3 {
  font-size: 1.5rem;
  margin: 0 0 0.5em;
}
.product p {
  color: var(--text-dim);
  font-size: 1rem;
}
.product ul {
  margin: 0 0 1.2em;
  padding-left: 1.1em;
  color: var(--text-dim);
  font-size: 0.975rem;
}
.product li {
  margin-bottom: 0.3em;
}
.product .actions {
  margin-top: auto;
  padding-top: 8px;
}
.product .note {
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.area {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.8em;
}
.about p {
  max-width: 62ch;
  font-size: 1.125rem;
}