/* sigillumSign marketing site: layout and components.
 *
 * Every colour, type family, size and radius comes from the vendored brand
 * tokens (brand/tokens.css, brand/fonts.css; see scripts/sync-brand.sh). Only
 * the semantic --sg-* roles are used, never raw hex, so the dark values
 * (applied by prefers-color-scheme in brand/tokens.css) follow automatically.
 * The blind-emboss tones are mixed from those roles with color-mix().
 *
 * Text pairings are the WCAG AA pairs in brand/BRAND.md section 5: fg and
 * fg-muted on bg or bg-surface, accent on bg or bg-surface, accent-fg on
 * accent, accent-tint-fg on accent-tint, and the status chip pairs.
 *
 * CSP is style-src 'self': no inline style="" anywhere, including in SVG.
 */

:root {
  --wrap: 1180px;
  --gutter: 20px;
  --band-pad: clamp(72px, 9vw, 128px);

  --h1-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.1rem);
  --h2-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);

  /* Blind emboss, paper-like grounds only: a tone a step below Surface, a 1px
     highlight and a 1px shadow at 20% (brand/reference/logo-system.html). */
  --emboss-tone: color-mix(in srgb, var(--sg-bg-surface) 94%, var(--sg-fg));
  --emboss-highlight: white;
  --emboss-shadow: color-mix(in srgb, var(--sg-fg) 20%, transparent);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

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

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

html {
  background: var(--sg-bg);
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sg-bg);
  color: var(--sg-fg);
  font-family: var(--sg-font-sans);
  font-size: var(--sg-text-body);
  line-height: var(--sg-leading-body);
  font-weight: 400;
  overflow-x: clip;
}

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

img,
svg {
  max-width: 100%;
}

p,
h1,
h2,
h3,
figure {
  margin: 0;
}

a {
  color: var(--sg-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

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

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

code {
  font-family: var(--sg-font-mono);
  font-size: 0.86em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--sg-radius-md);
  background: var(--sg-accent);
  color: var(--sg-accent-fg);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
  color: var(--sg-accent-fg);
}

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

@media (min-width: 720px) {
  :root {
    --gutter: 40px;
  }
}

/* ---- Type ------------------------------------------------------------- */

h1,
h2 {
  font-family: var(--sg-font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--h2-size);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--sg-text-heading);
  line-height: var(--sg-leading-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.eyebrow {
  margin-bottom: 18px;
  font-size: var(--sg-text-caption);
  line-height: var(--sg-leading-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-fg-muted);
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--sg-fg-muted);
  text-wrap: pretty;
}

.prose p,
.stack p {
  text-wrap: pretty;
}

/* "Coming" / "Available now": plain Slate text, never a chip or badge. */
.availability {
  font-size: var(--sg-text-caption);
  line-height: var(--sg-leading-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-fg-muted);
}

.availability-inline {
  font-weight: 600;
  color: var(--sg-fg-muted);
}

/* ---- Buttons and chips -------------------------------------------------- */

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sg-control-height);
  padding: 0 22px;
  border-radius: var(--sg-radius-md);
  font-family: var(--sg-font-sans);
  font-size: var(--sg-text-control);
  line-height: var(--sg-leading-control);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--sg-accent);
  color: var(--sg-accent-fg);
}

.btn-primary:hover {
  background: var(--sg-accent-hover);
  color: var(--sg-accent-fg);
}

.btn-secondary {
  border: 1.5px solid var(--sg-fg);
  color: var(--sg-fg);
}

.btn-secondary:hover {
  background: var(--sg-fg);
  color: var(--sg-bg);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--sg-radius-pill);
  font-family: var(--sg-font-sans);
  font-size: var(--sg-text-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Sealed is the only filled status chip. */
.chip-sealed {
  background: var(--sg-status-sealed-bg);
  color: var(--sg-status-sealed-fg);
}

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

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--sg-bg) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sg-border);
}

.navrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  min-height: 68px;
  padding-block: 10px;
}

.lockup {
  display: inline-flex;
  flex: none;
}

.lockup img {
  display: block;
  width: 152px;
  height: auto;
}

nav.main ul,
footer.site ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.main a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--sg-radius-sm);
  font-size: var(--sg-text-control);
  font-weight: 500;
  color: var(--sg-fg);
  text-decoration: none;
}

nav.main a:hover {
  color: var(--sg-accent);
}

@media (max-width: 719px) {
  header.site {
    position: static;
  }
  .navrow {
    padding-block: 12px 6px;
  }
  nav.main {
    width: 100%;
    margin-inline: -10px;
  }
  nav.main a {
    padding: 0 10px;
  }
}

/* ---- Bands -------------------------------------------------------------- */

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

.band.alt {
  background: var(--sg-bg-surface);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head h2 + .lede {
  margin-top: 20px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.stack {
  display: grid;
  gap: 18px;
}

.stack h2 {
  margin-bottom: 8px;
}

.stack .eyebrow {
  margin-bottom: 0;
}

@media (max-width: 899px) {
  .two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.hero {
  padding-block: clamp(56px, 8vw, 120px) clamp(72px, 9vw, 136px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.hero-copy {
  display: grid;
  gap: 28px;
}

.hero-copy .eyebrow {
  margin-bottom: -4px;
}

.h1-second {
  display: block;
  color: var(--sg-accent);
}

.hero .lede {
  max-width: 600px;
}

.hero .ctas {
  margin-top: 4px;
}

/* The sealed-record sheet: a page of paper with the embossed mark and an
   evidence line, sitting on a second sheet to read as a kept record. */
.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 8.5 / 11;
  justify-self: end;
  padding: 30px 30px 22px;
  background: var(--sg-bg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(14px, 14px);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-bg);
}

.sheet-head {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sg-border);
}

.sheet-head .bar {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: var(--sg-border);
}

.sheet-head .w60 {
  width: 60%;
}

.sheet-head .w35 {
  width: 35%;
  height: 6px;
}

.sheet-lines {
  display: grid;
  gap: 11px;
}

.sheet-lines span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--sg-border);
}

.sheet-lines .short {
  width: 55%;
}

.evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--sg-border);
  font-family: var(--sg-font-mono);
  font-size: var(--sg-text-evidence);
  line-height: 16px;
  color: var(--sg-fg-muted);
}

.evidence code {
  font-size: inherit;
}

@media (max-width: 899px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sheet {
    justify-self: start;
    max-width: 340px;
    margin-right: 14px;
  }
}

/* ---- Embossed mark ------------------------------------------------------ */

.emboss,
.closing-mark {
  fill: none;
  filter: drop-shadow(1px 1px 0 var(--emboss-highlight)) drop-shadow(-1px -1px 0 var(--emboss-shadow));
}

.emboss circle,
.emboss path,
.closing-mark circle,
.closing-mark path {
  stroke: var(--emboss-tone);
}

.emboss {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin-block: 18px;
}

/* Plays once on load: the S writes itself in stroke order (pathLength="1"
   normalises the dash), then the seal is pressed around it and the whole mark
   gives under the press. The resting state is the finished seal, so viewers
   with reduced motion simply see that. */
.emboss {
  transform-origin: 50% 50%;
  animation: sg-press-give 0.5s cubic-bezier(0.3, 0, 0.3, 1) 2.2s both;
}

.emboss .s {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: sg-write-s 1.8s cubic-bezier(0.45, 0.05, 0.35, 1) 0.4s both;
}

.emboss .ring,
.emboss .rim {
  transform-box: view-box;
  transform-origin: 32px 32px;
}

.emboss .ring {
  animation: sg-press-ring 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 2.2s both;
}

.emboss .rim {
  animation: sg-press-rim 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.28s both;
}

#sheet-caption .chip-sealed {
  animation: sg-chip-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 2.75s both;
}

@keyframes sg-write-s {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sg-press-ring {
  from { opacity: 0; transform: scale(1.14); }
  70% { opacity: 1; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sg-press-rim {
  from { opacity: 0; transform: scale(1.1) rotate(-6deg); }
  70% { opacity: 1; transform: scale(0.99) rotate(0deg); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sg-chip-in {
  from { opacity: 0; transform: translateY(4px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes sg-press-give {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(0.965); }
}

@media (prefers-reduced-motion: reduce) {
  .emboss,
  .emboss .s,
  .emboss .ring,
  .emboss .rim,
  #sheet-caption .chip-sealed {
    animation: none;
  }
}

/* Dark grounds are not paper-like, so no blind emboss: the mark is drawn in
   the reversed colourway instead (Paper ring and S, Verdigris rim). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .emboss,
  :root:not([data-theme="light"]) .closing-mark {
    filter: none;
  }
  :root:not([data-theme="light"]) .emboss .ring,
  :root:not([data-theme="light"]) .emboss .s,
  :root:not([data-theme="light"]) .closing-mark .ring,
  :root:not([data-theme="light"]) .closing-mark .s {
    stroke: var(--sg-mark);
  }
  :root:not([data-theme="light"]) .emboss .rim,
  :root:not([data-theme="light"]) .closing-mark .rim {
    stroke: var(--sg-mark-rim);
  }
}

/* ---- Who it is for ------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.prose {
  display: grid;
  gap: 18px;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.prose p:first-child {
  font-family: var(--sg-font-display);
  font-size: 1.375rem;
  line-height: 1.45;
  font-weight: 400;
}

@media (max-width: 899px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Agents (centerpiece) ----------------------------------------------- */

.agents {
  background: var(--sg-bg-surface);
  border-bottom: 1px solid var(--sg-border);
}

.agents-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 96px);
}

.agents .section-head {
  margin-bottom: 0;
}

.agents h2 {
  font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem);
  line-height: 1.04;
}

@media (max-width: 999px) {
  .agents-top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: feature;
  border-top: 1px solid var(--sg-fg);
}

.feature {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px 24px 8px 0;
  counter-increment: feature;
}

.feature + .feature {
  padding-left: 24px;
  border-left: 1px solid var(--sg-border);
}

.feature h3::before {
  content: counter(feature, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: var(--sg-font-display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
  color: var(--sg-accent);
}

.feature p:not(.availability) {
  color: var(--sg-fg-muted);
}

.note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--sg-border);
  color: var(--sg-fg-muted);
}

@media (max-width: 999px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .feature:nth-child(n + 3) {
    border-top: 1px solid var(--sg-border);
    padding-top: 24px;
  }
}

@media (max-width: 599px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature,
  .feature + .feature {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
  .feature + .feature {
    border-top: 1px solid var(--sg-border);
    padding-top: 24px;
  }
}

/* ---- Audit trail tables ------------------------------------------------- */

.trail,
.codecard {
  background: var(--sg-bg);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
}

.band.alt .trail,
.band.alt .codecard {
  background: var(--sg-bg);
}

.trail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sg-border);
  font-size: var(--sg-text-control);
  font-weight: 600;
}

.trail table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 18px;
}

.trail th {
  padding: 10px 14px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-fg-muted);
  border-bottom: 1px solid var(--sg-border);
}

.trail td {
  padding: 11px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--sg-border);
}

.trail tbody tr:last-child td {
  border-bottom: 0;
}

.trail code {
  font-size: 12.5px;
}

.trail .t {
  color: var(--sg-fg-muted);
  white-space: nowrap;
}

.trail .ev {
  color: var(--sg-fg);
}

.trail .who,
.trail .auth {
  color: var(--sg-fg-muted);
}

.trail .role,
.trail .auth code {
  display: block;
}

.trail .role {
  min-width: 46px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trail .sealrow td {
  background: var(--sg-bg-surface);
}

.trail-attributed tbody tr:nth-child(-n + 2) .who code {
  color: var(--sg-accent);
}

/* Narrow screens: each row becomes a small block so nothing scrolls sideways. */
@media (max-width: 699px) {
  .trail thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .trail table,
  .trail tbody {
    display: block;
  }
  .trail tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--sg-border);
  }
  .trail tbody tr:last-child {
    border-bottom: 0;
  }
  .trail td {
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .trail .t {
    grid-row: span 3;
  }
  .trail .sealrow td {
    background: none;
  }
}

/* ---- How it works ------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 28px;
}

.step::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 44px;
  right: -24px;
  height: 1px;
  background: var(--sg-border);
}

.step:last-child::before {
  display: none;
}

.step .num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--sg-fg);
  border-radius: 50%;
  font-family: var(--sg-font-display);
  font-size: 1.05rem;
  line-height: 1;
  background: var(--sg-bg);
}

.step h3 {
  margin-top: 24px;
  font-family: var(--sg-font-display);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.15;
}

.step p {
  color: var(--sg-fg-muted);
  flex: 1;
}

.tag {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: var(--sg-radius-sm);
  background: var(--sg-accent-tint);
  color: var(--sg-accent-tint-fg);
  font-size: 12.5px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

@media (max-width: 999px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }
  .step::before {
    display: none;
  }
}

@media (max-width: 599px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ---- Evidence ----------------------------------------------------------- */

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

.docs li {
  padding: 14px 16px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-bg);
}

.docs strong {
  font-weight: 600;
}

.closing-line {
  font-family: var(--sg-font-display);
  font-size: 1.25rem;
  line-height: 1.45;
}

.closing-line em {
  font-style: italic;
}

/* ---- Facts (seal, security) --------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}

.fact {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--sg-fg);
}

.facts-2 .fact {
  padding-block: 22px 32px;
}

.fact p {
  color: var(--sg-fg-muted);
}

@media (max-width: 999px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .facts,
  .facts-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Developers --------------------------------------------------------- */

.code-scroll {
  overflow-x: auto;
}

.codecard pre {
  margin: 0;
  padding: 20px 20px 22px;
  font-family: var(--sg-font-mono);
  font-size: 13px;
  line-height: 21px;
  color: var(--sg-fg);
  tab-size: 2;
}

.codecard code {
  font-size: inherit;
}

.codecard .dim {
  color: var(--sg-fg-muted);
}

.codecard .key,
.codecard .ok {
  color: var(--sg-accent);
}

/* ---- Contact ------------------------------------------------------------ */

.contact {
  text-align: center;
}

.closing {
  display: grid;
  justify-items: center;
  max-width: 760px;
}

.closing-mark {
  width: 88px;
  height: 88px;
  margin-bottom: 28px;
}

.closing h2 {
  margin-bottom: 20px;
}

.closing .lede {
  max-width: 620px;
  margin-bottom: 32px;
}

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

footer.site {
  padding-block: 36px 44px;
  border-top: 1px solid var(--sg-border);
  font-size: var(--sg-text-control);
  line-height: var(--sg-leading-control);
  color: var(--sg-fg-muted);
}

.footrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
}

.legal {
  display: grid;
  gap: 4px;
}

footer.site a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--sg-fg-muted);
}

footer.site a:hover {
  color: var(--sg-accent);
}

footer.site ul {
  margin-inline: -8px;
}