/* ==========================================================================
   Sentiv landing page
   Every color, radius and size below resolves through a custom property, so
   re-skinning to a real brand is an edit to :root and nothing else.
   ========================================================================== */

:root {
  /* Surfaces */
  --canvas: #f7f7f7;
  --surface: #ffffff;
  --surface-sunken: #f2f2f3;
  --surface-dark: #121212;

  /* Ink */
  --ink: #096192;
  /* Logo lockup only (mark + wordmark) — a darker shade of --ink so the brand reads as
     the anchor and the lighter --ink stays the interactive accent. */
  --brand-ink: #064466;
  --ink-muted: #6e6e6e;
  --ink-faint: #6e6e6e;
  --ink-invert: #ffffff;
  --ink-invert-muted: rgba(255, 255, 255, 0.62);
  --ink-invert-faint: rgba(255, 255, 255, 0.42);

  /* Feedback */
  --danger: #b42318;
  --danger-invert: #ffa39e;

  /* Lines */
  --border: #eaeaea;
  --border-strong: #dedede;
  --border-invert: rgba(255, 255, 255, 0.16);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Rhythm */
  --shell-max: 1120px;
  --shell-pad: 24px;
  --section-pad: clamp(64px, 9vw, 112px);
  --gap: 16px;

  /* Type. Drop a woff2 into Public/fonts/ and add an @font-face above to
     upgrade the display face; the stack falls back to the system sans today. */
  --font-display: "Satoshi", "General Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Inter, system-ui, sans-serif;
  /* Code blocks in rendered Markdown. Lives here, not in blog.css, so `:root` stays the
     single place a re-skin has to touch. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --tracking-tight: -0.03em;

  --shadow-card: 0 1px 2px rgba(16, 16, 16, 0.04);
  --shadow-pop: 0 24px 60px rgba(16, 16, 16, 0.18);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Keeps anchored sections clear of the sticky header. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
}

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* Prose wants a shorter measure than the marketing grid's 1120px. */
.shell--reading {
  max-width: 760px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ink-invert);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-size: 0.875rem;
  text-decoration: none;
}

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

:where(a, button, input):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Headings (#splitHeading / #sectionIntro)
   -------------------------------------------------------------------------- */

.hd {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  text-wrap: balance;
}

h1.hd {
  font-size: clamp(2.25rem, 6.4vw, 4rem);
}

.hd__accent {
  color: var(--ink-faint);
}

/* Rotating trailing word (#rotatingHeading).
   All words share one grid cell, so the box is only ever as tall as a single line and
   nothing below it shifts. `justify-self: start` keeps each word at its natural width so
   landing.js can measure it and animate the container width to match — that keeps a
   centered heading optically centered as the word changes. With JS off, the cell sizes to
   the widest word and the first word simply stays put. */
.rotator {
  display: inline-grid;
  grid-template-areas: "word";
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.rotator__item {
  grid-area: word;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.32em);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
  /* Inactive words must not swallow clicks or text selection on top of the live one. */
  pointer-events: none;
}

.rotator__item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.section-intro {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}

.section-intro__sub {
  margin-top: 18px;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.section-outro {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.section-outro__note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Buttons (#button) and form submits
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--ink);
  color: var(--ink-invert);
}

.btn--primary:hover {
  background: #2a2a2a;
}

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--ink-faint);
}

.btn--invert {
  background: var(--ink-invert);
  color: var(--ink);
}

.btn--invert:hover {
  background: #ededed;
}

.btn__arrow {
  font-size: 1em;
  line-height: 1;
  transition: transform 0.18s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

/* The inline SVG from #brandMark(). Strokes are currentColor, which .brand resolves to
   var(--brand-ink), so the mark re-skins with the palette and needs no colour rule here. */
.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
  overflow: visible;
}

.site-nav {
  display: none;
  gap: 30px;
}

.site-nav a {
  color: var(--ink-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.18s ease;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--border);
}

.section--alt {
  background: var(--surface-sunken);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 72px);
  border-top: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(48px, 7vw, 88px);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__lede {
  margin-top: 22px;
  max-width: 640px;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.hero__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.hero__media {
  margin-top: clamp(40px, 6vw, 64px);
  width: 100%;
}

.hero__media .media {
  border-radius: var(--r-lg);
}

/* Muted partner wordmarks under the hero. */
.logo-strip {
  margin-top: clamp(32px, 4vw, 48px);
  padding-bottom: 8px;
  overflow: hidden;
}

.logo-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.logo-strip__item {
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Media placeholders (#media)
   -------------------------------------------------------------------------- */

.media {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, #f4f4f5 0%, #ededef 55%, #e6e6e9 100%);
  border: 1px solid var(--border);
  overflow: hidden;
}

.media__label {
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  padding: 8px 14px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Cards (#featureCard) and grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(40px, 5vw, 56px);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.card__text {
  padding: 16px 10px 10px;
}

.card__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.card__title {
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
}

.card__body {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.card__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.card__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Stats row
   -------------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-block: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.stat__value {
  display: block;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Split (text beside media)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 72px);
}

.split__title {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
}

.split__body {
  margin-top: 14px;
  margin-bottom: 24px;
  color: var(--ink-muted);
  line-height: 1.7;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Integration tiles (#logoTile)
   -------------------------------------------------------------------------- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-top: clamp(40px, 5vw, 56px);
}

.logo-tile {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.logo-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.logo-tile__mark {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  text-align: center;
  transition: color 0.18s ease;
}

.logo-tile:hover .logo-tile__mark {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Dark closing band
   -------------------------------------------------------------------------- */

.band {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  background: var(--ink-muted);
  border-radius: var(--r-lg);
  color: var(--ink-invert);
}

.band .hd__accent {
  color: var(--ink-invert);
}

.band__body {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--ink-invert);
  line-height: 1.7;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Subscribe form (#subscribeForm)
   -------------------------------------------------------------------------- */

.subscribe__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.subscribe__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subscribe__field {
  flex: 1 1 220px;
  min-width: 0;
}

.subscribe__input {
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
}

.subscribe__input::placeholder {
  color: var(--ink-faint);
}

.subscribe__submit {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.subscribe__actions {
  flex: 0 1 auto;
}

.subscribe__note {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* Validation state, driven by landing.js. */
.subscribe__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.subscribe__submit:disabled:hover {
  transform: none;
}

.subscribe__input[aria-invalid="true"] {
  border-color: var(--danger);
}

.subscribe__hint {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--danger);
}

/* The hidden attribute alone loses to any display rule, so state it explicitly. */
.subscribe__hint[hidden] {
  display: none;
}

/* The band sits on a mid-tone surface, where no red can reach 4.5:1 — mid grey tops out at
   about 5.2:1 against pure white and 4.0:1 against black. So rather than depend on the band
   colour, the message carries its own dark backing and the light red is measured against
   that. This also survives the band being re-skinned to any other tone. */
.subscribe--band .subscribe__hint {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.42);
  color: var(--danger-invert);
}

.subscribe--band .subscribe__input[aria-invalid="true"] {
  border-color: var(--danger-invert);
}

.subscribe__responses .response {
  margin-top: 10px;
  font-size: 0.8125rem;
}

/* Hero variant sits inline on the light canvas: field and submit share one row. */
.subscribe--hero {
  text-align: center;
}

.subscribe--hero .subscribe__row {
  flex-wrap: nowrap;
  justify-content: center;
}

.subscribe--hero .subscribe__field {
  flex: 0 1 260px;
}

.subscribe--hero .subscribe__actions {
  flex: 0 0 auto;
}

/* Band and modal variants stack, so the submit reads as a full-width commitment. */
.subscribe--band .subscribe__row,
.subscribe--modal .subscribe__row {
  flex-direction: column;
}

.subscribe--band .subscribe__field,
.subscribe--band .subscribe__actions,
.subscribe--modal .subscribe__field,
.subscribe--modal .subscribe__actions {
  flex: 1 1 auto;
  width: 100%;
}

.subscribe--band .subscribe__note {
  color: var(--ink-invert-faint);
}

.subscribe--band .subscribe__input {
  border-color: var(--border-invert);
}

/* Below ~480px the hero row has no room for two controls side by side. */
@media (max-width: 30rem) {
  .subscribe--hero .subscribe__row {
    flex-wrap: wrap;
  }

  .subscribe--hero .subscribe__field,
  .subscribe--hero .subscribe__actions {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   Timed modal
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in 0.24s ease both;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: clamp(28px, 5vw, 40px);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  text-align: center;
  animation: pop-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.modal__dialog .hd {
  font-size: clamp(1.375rem, 3.4vw, 1.75rem);
}

.modal__body {
  margin-top: 14px;
  margin-bottom: 24px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.modal__close:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 72px) 32px;
}

.site-footer__top {
  display: grid;
  gap: 40px;
}

.site-footer__blurb {
  margin-top: 16px;
  max-width: 38ch;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 24px;
}

.link-col__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.link-col a {
  display: block;
  padding-block: 5px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.link-col a:hover {
  color: var(--ink);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Long-form prose

   The base layer resets `p { margin: 0 }` and `h1, h2, h3 { margin: 0; line-height: 1.08 }`,
   which is right for a marketing page built out of tags and wrong for a document a parser
   emitted. Everything below puts the vertical rhythm back.

   Lives here rather than in blog.css because the legal pages need it too, and they load
   landing.css alone.
   -------------------------------------------------------------------------- */

.prose {
  margin-top: 36px;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: 2em;
  color: var(--ink);
  /* 1.08 is a display setting; it collapses a two-line subhead into a smudge. */
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

.prose h2 {
  font-size: 1.5rem;
}

.prose h3 {
  font-size: 1.1875rem;
}

.prose h4 {
  margin-bottom: 0;
  font-size: 1rem;
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose ul,
.prose ol {
  padding-left: 1.35em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--border-strong);
  color: var(--ink-faint);
  font-style: italic;
}

.prose code {
  padding: 0.15em 0.4em;
  background: var(--surface-sunken);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.prose pre {
  padding: 16px 18px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow-x: auto;
  line-height: 1.55;
}

/* The block already carries the surface; a second inset chip inside it reads as a bug. */
.prose pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 0.8125rem;
}

.prose img {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.prose hr {
  margin-block: 2.5em;
  border: 0;
  border-top: 1px solid var(--border);
}

/* `display: block` is what makes overflow-x work on a table; the page itself must never
   scroll sideways. */
.prose table {
  display: block;
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  font-size: 0.875rem;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
}

.prose th {
  background: var(--surface-sunken);
  color: var(--ink);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .split {
    grid-template-columns: 1fr 1fr;
  }

  .band {
    grid-template-columns: 1fr minmax(280px, 380px);
  }

  .site-footer__top {
    grid-template-columns: 1fr 1.5fr;
  }
}

@media (min-width: 64rem) {
  .site-nav {
    display: flex;
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .logo-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Five campaign cards over a six-track grid: three on top, two wider below,
     so the last row reads as intentional rather than short. */
  .grid--3 {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid--3 > * {
    grid-column: span 2;
  }

  .grid--3 > :nth-child(4),
  .grid--3 > :nth-child(5) {
    grid-column: span 3;
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .logo-tile:hover {
    transform: none;
  }
}