/* ontiqo.com. The chrome follows the reader's system scheme, in both directions.

   The palette is sampled from the brand sheet's own swatches, not read off its
   labels: three of the five hex codes printed on it are not valid hex. Blue
   #286DAB, orange #EE8A33, charcoal #3E3E3E, silver #E0E0E0, ground #ECEEF2.

   The dark ground is NOT the sheet's #222B32, which came out too light: it is a
   near-neutral charcoal with only a trace of blue left in it.

   The cards are uniform. Each product's own colour appears once, as the rule
   across the top and the domain beneath, so the grid reads as one page while
   each card still says which thing it belongs to. */

:root {
  color-scheme: light dark;
  --bg: #ECEEF2;
  --surface: #ffffff;
  --text: #3E3E3E;
  --muted: #71787F;
  --rule: #E0E0E0;
  --blue: #286DAB;
  --orange: #EE8A33;
  --shadow: 0 10px 24px rgba(40, 60, 80, .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1F23;
    --surface: #24292E;
    --text: #E6E8EA;
    --muted: #979EA5;
    --rule: #333A41;
    /* Lifted off the sheet's values only as far as legibility on the dark
       ground needs; the mark itself keeps the swatches unchanged. */
    --blue: #6BA7DA;
    --orange: #F0A05A;
    --shadow: 0 10px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 24px; }

/* Masthead. The bar under it is the two brand colours in the proportion the
   sheet's own card mockup uses. */
header {
  background: var(--surface);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--blue) 0 72%, var(--orange) 72% 100%) 1;
}
header .wrap { display: flex; align-items: center; gap: 12px; height: 60px; }
header .mark { width: 34px; height: 34px; display: block; }
header .word { height: 20px; display: block; }

/* Hero: the headline and nothing else, with the same air above it as below. */
.hero { padding: 10vh 0; }
h1 {
  margin: 0;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: -.03em;
  max-width: 13ch;
}

/* Cards: one shape for all five. Each shows the program itself, which is the
   part that differs; everything around the picture is identical. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 20px;
  padding-bottom: 9vh;
}

.card {
  --accent: var(--blue);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
  border-top-color: var(--accent);
}

/* The screenshot is the full width of the card and sits under the accent rule. */
.card .shot {
  display: block; width: 100%; height: auto;
  border-bottom: 1px solid var(--rule);
}
.card .body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 22px; }
.card .mark { width: 38px; height: 38px; border-radius: 9px; margin-bottom: 14px; }

.card .name {
  font-size: 19px; font-weight: 650; letter-spacing: -.015em;
  color: var(--text); margin-bottom: 8px;
}
.card .say { font-size: 15px; line-height: 1.55; color: var(--muted); }

.card .foot {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: auto; padding-top: 20px;
  font-size: 13px;
}
.card .host { color: var(--accent); font-weight: 600; }
.card .state { margin-left: auto; color: var(--muted); font-size: 12px; }

/* The one thing each card keeps of its own: its product's colour. Taken from
   that product, and darkened for the light ground where the product's own value
   is a dark-theme accent that would not hold against white. */
.leafviewer { --accent: #2E9E70; }
.echofiles  { --accent: #2A8CB0; }
.ontiqo     { --accent: #9B7A12; }
.longtom    { --accent: #0A6DA0; }
.guestbay   { --accent: #2A8F86; }

@media (prefers-color-scheme: dark) {
  .leafviewer { --accent: #7ECFA4; }
  .echofiles  { --accent: #6FC0DD; }
  .ontiqo     { --accent: #FFC72C; }
  .longtom    { --accent: #4FA3D8; }
  .guestbay   { --accent: #3FB6A8; }
}

/* Footer */
footer {
  border-top: 1px solid var(--rule);
  padding: 22px 0 9vh;
  color: var(--muted); font-size: 14px;
}
footer a { color: var(--blue); }
footer p { margin: 0 0 3px; }

/* The legal pages. */
.doc { max-width: 40rem; padding: 8vh 0 6vh; }
.doc h1 { font-size: 26px; margin-bottom: 22px; max-width: none; letter-spacing: -.02em; }
.doc h2 { margin: 30px 0 6px; font-size: 16px; font-weight: 640; }
.doc p, .doc li { font-size: 15.5px; color: var(--muted); }
.doc a { color: var(--blue); }
.doc ul { padding-left: 20px; }
.doc footer { margin-top: 42px; padding-bottom: 0; }

@media (max-width: 560px) {
  .hero { padding: 8vh 0 6vh; }
}