/* Landing page for the four Copilot reporting demos.
   Deliberately plain HTML + CSS: this page exists to survive a trade show and
   outlive it, and nothing here should need patching. The palette matches the
   video cover cards so the booth loop and this page read as one thing.

   No colour-only signalling anywhere — the owner is colour-blind, and so is
   roughly 8% of the audience. State, where it appears, is a shape plus words. */

:root {
  --ink: #f2f5fa;
  --muted: #c3ccdc;
  --dim: #8e9aae;
  --accent: #6fd8ee;
  --card: #111a2c;
  --card-hover: #16223a;
  --line: #27344d;
  --bg-top: #0b1322;
  --bg-bot: #060a12;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 760px at 88% 108%, rgba(49,140,186,0.30) 0%, rgba(49,140,186,0) 62%),
    linear-gradient(161deg, var(--bg-top) 0%, #080d18 54%, var(--bg-bot) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 88px 40px 64px; }

.eyebrow {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 20px;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.022em; font-weight: 700;
  max-width: 18ch;
}

/* Explanation copy uses the width it is given — wrapping at half the available
   width is a bug, not a style. */
.lede {
  margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--muted); max-width: 62ch;
}

.notes { list-style: none; margin-top: 30px; display: grid; gap: 12px; max-width: 72ch; }
.notes li { display: flex; gap: 12px; align-items: baseline; font-size: 0.97rem; color: var(--dim); }
.notes strong { color: var(--muted); font-weight: 600; }
.dot { color: var(--accent); font-size: 0.8rem; flex: none; }

.grid {
  list-style: none;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.card:hover, .card:focus-within { background: var(--card-hover); border-color: #3a4c6d; transform: translateY(-2px); }

/* The whole card is the target — the common path is one click. */
.card-hit { display: block; padding: 30px 30px 10px; text-decoration: none; color: inherit; border-radius: 16px; }
.card-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.kicker {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 10px;
}
.card h2 { font-size: 1.62rem; letter-spacing: -0.015em; font-weight: 700; }
.benefit { margin-top: 12px; color: var(--muted); font-size: 1.03rem; }
.go { margin-top: 20px; color: var(--accent); font-weight: 600; font-size: 0.98rem; }

.src { padding: 0 30px 24px; }
.src a {
  color: var(--dim);
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1px solid #2b3a52;
}
.src a:hover { color: var(--muted); border-bottom-color: var(--dim); }
.src a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.9rem; }

/* One column well before the cards get cramped, so nothing is ever cut off and
   the page never scrolls sideways. */
@media (max-width: 860px) {
  .wrap { padding: 56px 22px 48px; }
  .grid { grid-template-columns: 1fr; gap: 18px; }
  h1 { max-width: none; }
  .card-hit { padding: 26px 24px 8px; }
  .src { padding: 0 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-within { transform: none; }
}