/* =========================================================================
   ServoChain landing page — https://servochain.org/
   Design system: OD "Neutral Modern" light, identical to the dashboard
   (cobalt #2F6FEB accent, #FAFAFA page bg, white cards, #F4F5F7 "moony"
   body region, Inter font, brand mark gradient #7c5cff → #22d3ee).

   The page top mirrors the dashboard exactly: a 220px full-bleed brand
   hero strip (with the same ComfyUI-generated abstract backdrop as the
   dashboard) carrying the brand mark + "ServoChain" + tagline, followed
   by a slim utility nav (the nav links + "Sign in" CTA), followed by a
   shorter content hero with the h2 headline.

   This page introduces ServoChain as a product company holding four
   self-hosted apps (Crypto Port, Limo Assistant, Limo Chess, Karta Karta).
   Each app card uses one of the four brand colors and links to its
   public domain. The full service fleet (opencode, hermes, terminal,
   limoemr, design, boot-os, etc.) lives behind the auth-gated dashboard
   at https://dashboard.servochain.org/ — they are intentionally NOT
   linked from this public page.
   ========================================================================= */

:root {
  --bg: #FAFAFA;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #F4F5F7;       /* "moony" — matches the dashboard tile body */
  --border: #E5E5E5;
  --border-strong: #D4D4D4;
  --text: #111111;
  --muted: #6B6B6B;
  --muted-2: #9CA3AF;
  --accent: #2F6FEB;          /* cobalt — primary CTA */
  --accent-hover: #2563DB;
  --accent-active: #1D4ED8;
  --accent-soft: #EFF4FF;     /* used for subtle accents */
  --grad-a: #7c5cff;          /* brand mark gradient start (violet) */
  --grad-b: #22d3ee;          /* brand mark gradient end (cyan) */
  --good: #17A34A;
  --bad: #DC2626;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(17, 17, 17, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(17, 17, 17, 0.06), 0 2px 4px rgba(17, 17, 17, 0.04);
  --shadow-elev: 0 6px 20px rgba(17, 17, 17, 0.06), 0 2px 4px rgba(17, 17, 17, 0.04);
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --content-max: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
code {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--text);
}

/* ---------- Brand mark ---------- */
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-mark--sm { width: 28px; height: 28px; border-radius: 8px; }
.brand-mark--sm svg { width: 18px; height: 18px; }

/* ---------- Brand hero strip (matches the dashboard) ----------
   Full-bleed 1920×320 image strip across the top, identical to the
   dashboard's .brand-hero. The ComfyUI-generated abstract image is the
   backdrop; a white-to-transparent overlay on the left keeps the brand
   mark and headline readable on any image variant. Below the image a
   thin bottom border transitions cleanly into the page background. */
.brand-hero {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
}
.brand-hero-img {
  position: absolute;
  inset: 0;
  background:
    /* Soft white wash on the left for readability, fading to transparent
       around the 70% mark so the abstract image shows on the right. */
    linear-gradient(90deg, rgba(250, 250, 250, 0.92) 0%, rgba(250, 250, 250, 0.55) 35%, rgba(250, 250, 250, 0) 70%),
    /* Soft white fade at the bottom edge for a clean handoff to the page. */
    linear-gradient(180deg, rgba(250, 250, 250, 0) 60%, rgba(250, 250, 250, 0.5) 100%),
    url('/static/img/hero-bg.jpg') center/cover no-repeat;
}
.brand-hero-inner {
  position: relative;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand-hero-mark {
  width: 80px; height: 80px; flex: 0 0 80px;
  display: grid; place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.05);
}
.brand-hero-mark svg { width: 56px; height: 56px; }
.brand-hero-text { display: flex; flex-direction: column; gap: 4px; }
.brand-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
.brand-hero-tagline {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 640px) {
  .brand-hero { height: 160px; }
  .brand-hero-inner { padding: 0 18px; gap: 14px; }
  .brand-hero-mark {
    width: 56px; height: 56px; flex-basis: 56px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.06);
  }
  .brand-hero-mark svg { width: 40px; height: 40px; }
  .brand-hero-title { font-size: 24px; }
}

/* ---------- Top nav (slim utility row) ----------
   The brand mark is now in the .brand-hero strip above, so this row
   only carries the section links and the "Sign in" CTA, right-aligned
   via .topnav-inner's flex. Same pattern as the dashboard's slim
   post-brand-hero header. */
.topnav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 24px;
}
.topnav-links {
  display: flex; align-items: center; gap: 22px;
}
.topnav-links a {
  color: var(--muted);
  font-size: 14px; font-weight: 500;
  transition: color 120ms ease;
}
.topnav-links a:hover { color: var(--text); }
.topnav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: #FFFFFF !important;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(47, 111, 235, 0.20);
  transition: background 120ms ease, transform 80ms ease;
}
.topnav-cta:hover { background: var(--accent-hover); color: #FFFFFF !important; }
.topnav-cta:active { background: var(--accent-active); transform: translateY(1px); }

@media (max-width: 720px) {
  .topnav-inner { padding: 10px 18px; gap: 12px; }
  .topnav-links a:not(.topnav-cta) { display: none; }
  .topnav-cta { padding: 6px 12px; font-size: 12px; }
}

/* ---------- Content hero (under the brand strip) ----------
   Smaller than the brand-hero; carries the eyebrow + h2 + tagline +
   primary CTA. No background image — the page bg carries the visual
   weight now. */
.hero {
  padding: 56px 32px 32px;
  background: var(--bg);
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.18);
}
.hero-title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  max-width: 820px;
}
.grad-word {
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-tagline {
  margin: 0 0 28px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 640px;
}
.hero-cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 720px) {
  .hero { padding: 36px 18px 24px; }
}

/* ---------- Sections ---------- */
.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 88px 32px;
}
.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-title {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
}
.section-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 720px) {
  .section { padding: 56px 18px; }
  .section-head { margin-bottom: 32px; }
}

/* ---------- App cards (Crypto Port, Limo Assistant, Limo Chess, Karta Karta) ----------
   The four flagship products of the ServoChain company. Each card has:
   - A real screenshot of the live app as the thumbnail (when available),
     or a subtle placeholder pattern (for prelaunch apps)
   - A white icon in the top-left corner identifying the app
   - An "Open app" badge in the top-right that surfaces on hover (or
     "Coming soon" badge for prelaunch apps)
   - A white body with eyebrow (product name) + h3 (one-line value prop)
     + description (1-2 sentences on what the product does) +
     3-bullet feature list + primary CTA link to the product's domain
   - The brand color is set per-card via the inline --app custom property
   - The whole card is a link to the app domain (when live); prelaunch
     cards are not links

   Layout: 2 columns on desktop (>900px), 1 column on mobile. */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.app {
  --app: var(--accent);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  position: relative;
}
.app:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-elev);
}
/* Subtle 3px colored top border so each app's brand color shows even
   before the thumbnail loads. */
.app::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--app);
  z-index: 2;
}
/* Make the wrapping <a> fill the card so the whole card is clickable. */
.app-link {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  flex: 1;
}
.app-link:hover { color: inherit; }

.app-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app) 18%, var(--bg-elev-2)), var(--bg-elev-2));
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.app-thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms ease, filter 200ms ease;
}
.app:hover .app-thumb img { transform: scale(1.03); }
/* Slight dark gradient so the white icon and badge stay readable on
   lighter thumbnails. */
.app-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}
.app-icon {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--app);
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.app-icon svg { width: 22px; height: 22px; }

/* "Open app" badge — surfaces on hover. */
.app-open-badge {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--app);
  color: #FFFFFF;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.app:hover .app-open-badge { opacity: 1; transform: translateY(0); }
.app-open-badge--locked {
  background: rgba(17, 17, 17, 0.72);
  color: #FFFFFF;
  opacity: 1;
  transform: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Prelaunch thumbnail — no real screenshot yet, so show a tinted
   pattern. Chess (the longer-marketing-page one) already has a real
   screenshot; this is for Karta until launch. */
.app-thumb--placeholder {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--app) 28%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--app) 22%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--app) 14%, var(--bg-elev-2)), var(--bg-elev-2));
}
.placeholder-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--app) 20%, transparent) 1.2px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: 0.55;
}
.app-thumb--placeholder .app-icon { background: rgba(255, 255, 255, 0.98); }

.app-body {
  padding: 24px 26px 26px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.app-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app);
}
.app-name {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
}
.app-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.app-bullets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.app-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.app-bullets li::before {
  /* Custom small checkmark in the app's brand color. */
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--app);
  border-bottom: 2px solid var(--app);
  transform: rotate(-45deg);
  opacity: 0.85;
}
.app-cta {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--app);
  text-decoration: none;
  transition: gap 120ms ease, color 120ms ease;
  align-self: flex-start;
}
.app-cta:hover { gap: 10px; color: var(--app); }
.app-cta svg { transition: transform 200ms ease; }
.app-cta:hover svg { transform: translateX(2px); }
.app-cta--disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.app-cta--disabled:hover { gap: 6px; }
.app-cta--disabled:hover svg { transform: none; }
@media (max-width: 900px) {
  .apps-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- About section (company card) ---------- */
.about-card {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.about-copy {
  padding: 40px 44px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.about-copy p { margin: 0 0 16px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { color: var(--text); font-weight: 600; }
.about-side {
  display: flex; flex-direction: column;
  background: var(--bg-elev-2);
  border-left: 1px solid var(--border);
  padding: 32px 28px;
  gap: 24px;
}
.about-stat { margin: 0; }
.about-stat-num {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.about-stat-label {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .about-card { grid-template-columns: 1fr; }
  .about-side { border-left: none; border-top: 1px solid var(--border); flex-direction: row; gap: 32px; padding: 24px 28px; }
  .about-copy { padding: 28px 24px; }
  .about-stat-num { font-size: 28px; }
}
@media (max-width: 560px) {
  .about-side { flex-wrap: wrap; }
  .about-stat { flex: 1 1 calc(50% - 16px); }
}

/* ---------- Why grid ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.why {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.why:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
}
.why-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.why h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.why p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Stack card ---------- */
.stack-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}
.stack-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
.stack-row:first-child { border-top: none; }
.stack-col {
  padding: 28px 32px;
}
.stack-col + .stack-col { border-left: 1px solid var(--border); }
.stack-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.stack-col ul {
  margin: 0; padding: 0; list-style: none;
}
.stack-col li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  padding: 4px 0;
}
.stack-col code {
  background: var(--bg-elev-2);
  font-size: 12.5px;
}
@media (max-width: 720px) {
  .stack-row { grid-template-columns: 1fr; }
  .stack-col + .stack-col { border-left: none; border-top: 1px solid var(--border); }
  .stack-col { padding: 22px 22px; }
}

/* ---------- CTA ---------- */
.section-cta { padding-bottom: 120px; }
.cta-card {
  background: linear-gradient(135deg, var(--accent) 0%, #4F46E5 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(47, 111, 235, 0.18);
}
.cta-card h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.cta-card p {
  margin: 0 auto 28px;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.cta-fineprint {
  margin: 20px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.cta-fineprint a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
@media (max-width: 720px) {
  .section-cta { padding-bottom: 80px; }
  .cta-card { padding: 48px 24px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(47, 111, 235, 0.20);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
.btn-primary:active { background: var(--accent-active); border-color: var(--accent-active); transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg-elev-2); color: var(--text); }

.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-lg svg { stroke-width: 2.2; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 36px 32px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 16px 24px;
  align-items: center;
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted);
  font-size: 13px;
  grid-column: 1; grid-row: 1;
}
.footer-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  grid-column: 2; grid-row: 1;
}
.footer-links a {
  font-size: 13px;
  color: var(--muted);
  transition: color 120ms ease;
}
.footer-links a:hover { color: var(--text); }
.footer-fineprint {
  margin: 0;
  grid-column: 1 / -1; grid-row: 2;
  font-size: 12px;
  color: var(--muted-2);
}
.footer-fineprint a { color: var(--muted-2); text-decoration: underline; }
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; padding: 28px 18px 32px; }
  .footer-brand { grid-column: 1; grid-row: 1; }
  .footer-links { grid-column: 1; grid-row: 2; }
  .footer-fineprint { grid-column: 1; grid-row: 3; }
}