/* Holding pages for the apex domain until stage 5 ships the web app.
   Clean white base; palette and type from docs/brand/README.md. */
@font-face {
  font-family: "Poppins";
  src: url("poppins-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --indigo: #4d4fa2;
  --royal: #4465af;
  --blue: #4676bb;
  --cyan: #1e9bd3;
  --sky: #52ade1;
  --ink: #1b1c33;
  --ink-soft: #55576f;
  --line: #ececf3;
  --display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fff;
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--text);
}

/* The brand's five blues as one thin line along the top: the only ornament. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--indigo) 0 20%, var(--royal) 20% 40%, var(--blue) 40% 60%, var(--cyan) 60% 80%, var(--sky) 80% 100%);
}

::selection { background: var(--indigo); color: #fff; }

a {
  color: var(--indigo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--royal); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 6vw, 3rem);
}

.bar { padding-top: clamp(1.75rem, 5vw, 2.75rem); }
.bar img { display: block; width: clamp(9.5rem, 28vw, 11.5rem); height: auto; }

main { display: grid; align-content: center; padding-block: clamp(3rem, 10vw, 7rem); }

.copy { max-width: 36rem; }

h1 {
  margin: 0 0 1.25rem;
  font: 600 clamp(2.1rem, 6vw, 3.6rem)/1.08 var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 span { color: var(--indigo); }

p { margin: 0 0 1rem; max-width: 62ch; color: var(--ink-soft); text-wrap: pretty; }
.lede { font-size: clamp(1.0625rem, 2vw, 1.2rem); color: #3f4160; }

.note {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

footer { padding-block: 1.75rem 2.25rem; font-size: 0.875rem; color: var(--ink-soft); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; align-items: center; }
footer img { width: 1.75rem; height: auto; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .copy { animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes rise { from { opacity: 0.001; transform: translateY(0.6rem); } }
}