:root {
  --ink: #1a1a1a;
  --bg: #faf8f5;
  --measure: 62rem;
  --line: #ddd6cb;
  /* One accent colour, per Marek's standing preference — but deliberately
     aliased to --ink rather than a picked colour: art direction hasn't
     happened yet (Jane has not started), and his own preference is that
     the accent come from the eventual logo. Every place that wants "the"
     accent reads this one token, so landing that colour later is a
     one-line change, not a template hunt. */
  --accent: var(--ink);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  /* min-width:0 + anywhere: a long unbroken token otherwise puts horizontal
     scroll on every phone. break-word is not enough. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-header, .site-footer {
  padding: 1rem 1.25rem;
}

.site-header__brand {
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.site-footer__links a { color: inherit; }

.lede { font-size: 1.125rem; }

/* Landing page ------------------------------------------------------- */

.hero { padding: 0.5rem 0 2rem; }

.hero__lede {
  font-size: 1.125rem;
  max-width: 42rem;
}

.hero__notice {
  border-left: 3px solid var(--accent);
  background: #fff;
  padding: 0.75rem 1rem;
  max-width: 42rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0.25rem;
}

.button--primary {
  background: var(--accent);
  color: var(--bg);
}

.steps__list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
}

.steps__item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.steps__num {
  display: block;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
}

.steps__label { display: block; }

.landing-templates {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}

.landing-templates__item {
  /* Long, unbroken template names/slugs otherwise put horizontal scroll on
     every phone — break-word alone is not enough. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.landing-templates__item a {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.landing-templates__name { display: block; font-weight: 700; }

.landing-templates__kind {
  display: block;
  color: #6b6459;
  font-size: 0.9rem;
}

/* Legal pages ---------------------------------------------------------- */

.legal-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 1rem 0;
}

.legal-facts dt { font-weight: 700; }

.legal-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal-table-wrap {
  /* A wide legal table must scroll inside its own box, never widen the
     page itself. */
  overflow-x: auto;
}

.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
}

.legal th, .legal td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.legal .legal-notice {
  border-left: 3px solid var(--accent);
  background: #fff;
  padding: 0.75rem 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}