/*
  Gridtiva website styles.

  System font stack on purpose: no webfont means no request to a font host, which keeps
  the privacy policy honest (no third party sees a visitor's IP) and removes a render-
  blocking dependency. There is no CSS framework here for the same reason the build has
  no dependencies — five static pages do not need one.

  Colours are defined once as tokens on :root and redefined for dark mode. Every text
  pairing below was chosen to clear WCAG AA contrast in both themes.
*/

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-subtle: #f6f7f9;
  --bg-raised: #ffffff;
  --text: #14171d;
  --text-muted: #545b6a;
  --border: #e2e5ea;
  --border-strong: #cdd2db;
  --accent: #2450d8;
  --accent-hover: #1c3fae;
  --accent-contrast: #ffffff;
  --accent-subtle: #eef2fe;

  --wrap: 68rem;
  --wrap-prose: 46rem;
  --radius: 10px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --bg-subtle: #161922;
    --bg-raised: #171a23;
    --text: #e7eaf1;
    --text-muted: #a3abbd;
    --border: #262b36;
    --border-strong: #363d4c;
    --accent: #93aeff;
    --accent-hover: #b3c6ff;
    --accent-contrast: #0f1115;
    --accent-subtle: #182034;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- links, focus, skip ---------- */

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent-hover);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 680;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
}

.wordmark__mark {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 5px;
  flex: none;
  background: var(--accent);
  background-image: linear-gradient(
      to right,
      transparent calc(50% - 0.55px),
      var(--bg) calc(50% - 0.55px),
      var(--bg) calc(50% + 0.55px),
      transparent calc(50% + 0.55px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.55px),
      var(--bg) calc(50% - 0.55px),
      var(--bg) calc(50% + 0.55px),
      transparent calc(50% + 0.55px)
    );
}

.site-nav {
  display: flex;
  gap: 1.4rem;
  font-weight: 550;
  font-size: 0.97rem;
}

.site-nav a {
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
}

/* ---------- generic sections ---------- */

section {
  padding-block: 3.75rem;
}

section + section {
  border-top: 1px solid var(--border);
}

.section--subtle {
  background: var(--bg-subtle);
}

h1,
h2,
h3 {
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-block: 0 0.6rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.85vw, 1.8rem);
  font-weight: 660;
}

h3 {
  font-size: 1.12rem;
  font-weight: 640;
}

p {
  margin-block: 0 1rem;
}

.lede {
  font-size: 1.16rem;
  color: var(--text-muted);
  max-width: 42rem;
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

.hero h1 {
  max-width: 20ch;
}

.hero p {
  max-width: 40rem;
  font-size: 1.18rem;
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 1.9rem;
}

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  padding: 0.72rem 1.35rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
}

.button:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

.button--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.button--secondary:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.hero__note {
  color: var(--text-muted);
  font-size: 0.97rem;
  margin: 0;
}

/* ---------- feature and step grids ---------- */

.grid {
  display: grid;
  gap: 1.6rem 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  margin-top: 2.25rem;
  padding: 0;
  list-style: none;
}

.grid h3 {
  margin-bottom: 0.35rem;
}

.grid p {
  color: var(--text-muted);
  margin-bottom: 0;
}

.steps {
  margin-top: 2.25rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  max-width: var(--wrap-prose);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

/*
  The number occupies the narrow column and spans both rows; the label and the
  description are both placed explicitly in the wide column, stacked.

  Placing them explicitly matters: with auto-placement the description flows into the
  next free cell, which is the 2.1rem number column, and its text renders one word per
  line. That is what this looked like before the columns were pinned.
*/
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 680;
  font-size: 0.93rem;
}

.steps strong {
  grid-column: 2;
  grid-row: 1;
}

.steps span {
  grid-column: 2;
  grid-row: 2;
  color: var(--text-muted);
}

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  margin-block: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.97rem;
  background: var(--bg-raised);
}

caption {
  caption-side: top;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.94rem;
  padding: 0.65rem 0.9rem;
}

th,
td {
  text-align: left;
  padding: 0.68rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  font-weight: 640;
  background: var(--bg-subtle);
  white-space: nowrap;
}

tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 0;
}

tbody th {
  font-weight: 600;
}

/* ---------- prose (legal and support pages) ---------- */

.prose {
  max-width: var(--wrap-prose);
}

.prose h2 {
  margin-top: 2.6rem;
  padding-top: 0.2rem;
}

.prose h3 {
  margin-top: 1.9rem;
}

.prose > h2:first-of-type {
  margin-top: 2rem;
}

.prose ul,
.prose ol {
  margin-block: 0 1.1rem;
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.45rem;
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.45rem;
}

.prose .table-scroll {
  max-width: 100%;
}

/*
  Document pages centre their reading column at --wrap-prose. The heading block has to
  match that width, or the title sits against the page edge while the text it introduces
  begins a hundred pixels further in. .wrap already centres, so constraining the width
  here is enough to line the two up.
*/
.page-header {
  max-width: var(--wrap-prose);
  padding-block: 3rem 0.5rem;
}

.page-header p {
  color: var(--text-muted);
  margin: 0;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.callout {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  margin-block: 1.5rem;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout h3 {
  margin-top: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.08em 0.36em;
}

/* ---------- faq ---------- */

.faq {
  max-width: var(--wrap-prose);
  margin-top: 1.5rem;
}

.faq h3 {
  margin-top: 2rem;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding-block: 2.5rem;
  margin-top: 0;
  font-size: 0.94rem;
  color: var(--text-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.2rem;
  font-weight: 550;
}

.site-footer p {
  max-width: 52rem;
  margin-block: 0 0.6rem;
}

.site-footer__legal {
  margin-bottom: 0;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}