/* AIFX landing page — clean, Cayman-inspired single-page layout.
   Scoped to docs/index.html only; doesn't affect the just-the-docs
   reference pages underneath. */

:root {
  /* Reepost-inspired black-and-white palette.
     Color is kept as a single muted-slate accent used sparingly for
     interactive states and the Sequence tag; semantic ok/no greens and reds
     are preserved in the commercial-use table because they carry meaning. */
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --text: #0a0a0a;
  --text-muted: #525252;
  --text-faint: #737373;
  --border: #e5e5e5;
  --accent: #1a1a1a;          /* primary "accent" is just near-black */
  --accent-hover: #000000;
  --accent-soft: #f5f5f5;
  --secondary: #475569;       /* the one retained color — muted slate */
  --secondary-soft: #f1f5f9;
  --hero-from: #000000;
  --hero-to: #1a1a1a;
  --hero-accent: #d4d4d4;     /* light gray gradient text instead of purple */
  --ok: #16a34a;              /* semantic — kept */
  --no: #dc2626;              /* semantic — kept */
  --code-bg: #f5f5f5;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  --max-width: 1080px;
  --radius: 6px;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

code {
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background: var(--code-bg);
  border-radius: 4px;
}

/* -------------------------------------------------------- HERO */

.hero {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
  color: #ffffff;
  padding: 6rem 1.5rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* Subtle non-color noise / vignette to lift the flat black, without
     introducing chromatic accents that would clash with the monochrome
     identity. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(71, 85, 105, 0.18) 0%, transparent 50%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

/* Standards & compatibility row in the hero, between the subtagline and the
   CTAs. Visually signals 'implements OpenFX, bridges to ComfyUI, runs in
   these DCCs' at first glance. The two platform wordmarks (OpenFX,
   ComfyUI) anchor the left of the row; a separator dot follows; then the
   DCC icons. All flattened to white via brightness(0) invert(1) for
   monochrome consistency with the rest of the hero. */
.hero-standards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 auto 1.75rem;
  max-width: 640px;
}
.hero-standards-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.hero-standards-link:hover {
  opacity: 1;
  text-decoration: none;
}
.hero-standards-logo {
  height: 18px !important;
  width: auto !important;
  max-height: 18px !important;
  max-width: 72px !important;
  display: block;
  /* Force black SVG icons (simpleicons fill=#000) to white on the dark
     hero. brightness(0) flattens any color to black first; invert(1)
     flips to white. !important so no later rule can re-color them. */
  filter: brightness(0) invert(1) !important;
}
/* OpenFX (the plugin standard) and ComfyUI (the model host) are platform
   anchors — rendered as wordmarks, slightly taller than the DCC icons so
   they read as the lead-in of the row. */
.hero-standards-logo--standard {
  height: 24px !important;
  max-height: 24px !important;
  max-width: 110px !important;
}
.hero-standards-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}
.hero-title {
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #ffffff 0%, var(--hero-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-tagline {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 auto 1rem;
  max-width: 640px;
  line-height: 1.4;
}
.hero-subtagline {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 580px;
  margin: 0 auto 2.25rem;
  line-height: 1.55;
}
/* Installer chooser: a prominent OS-detecting download button with a manual
   per-OS row beneath it. Sits just above the secondary CTA row. */
.hero-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.btn-download {
  font-size: 1.05rem;
  padding: 0.85rem 1.9rem;
}
.hero-download-os {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.hero-download-os-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
.os-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  transition: all 0.15s ease;
}
.os-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
/* Per-platform version badge. Releases are cut per platform, so the pills can
   legitimately show different versions; showing each one avoids implying that
   every OS is on the newest build. Tabular figures keep the pills from jittering
   in width as version numbers change. */
.os-pill-version {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
}
.os-pill:hover .os-pill-version,
.os-pill--current .os-pill-version {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
}

/* The OS the visitor is on — outlined to mark it as the recommended pick. */
.os-pill--current {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.65);
}

.hero-download-note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}
.hero-download-note a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-download-note a:hover {
  color: #ffffff;
}

.hero-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.hero-status {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.hero-status-cnc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}
.hero-status-cnc a {
  border: none;
  text-decoration: none;
  line-height: 0;
}
.hero-status-cnc a:hover { text-decoration: none; }
/* The CNC SVG has no intrinsic width constraint and rendered at full size in
   the browser. Lock both dimensions explicitly, use !important to defeat any
   inherited img rules, and add max-* as a belt-and-suspenders fallback.
   Invert + brighten because the SVG is black and the hero is black. */
.hero-status-cnc-logo {
  height: 18px !important;
  width: auto !important;
  max-height: 18px !important;
  max-width: 56px !important;
  filter: invert(1) brightness(1.4);
  opacity: 0.7;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.15s ease;
}
.hero-status-cnc a:hover .hero-status-cnc-logo { opacity: 1; }

/* Byline: 'MaGMa for Reepost Studio' with small logos,
   sitting at the bottom of hero-inner under the status line. */
.hero-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}
.hero-byline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}
.hero-byline-link:hover {
  color: #ffffff;
  text-decoration: none;
}
/* Hard size lock — defeats any intrinsic img dimensions and any cascade
   from other img rules. Both dimensions explicit, both max-* set, and
   !important everywhere because the previous unforced version rendered
   the Reepost PNG at its full 320×320 intrinsic size. */
.hero-byline-logo {
  height: 24px !important;
  width: 24px !important;
  max-height: 24px !important;
  max-width: 24px !important;
  object-fit: contain;
  display: inline-block !important;
  vertical-align: middle;
  border-radius: 3px;
}
/* Modifier: force-recolor logos that are dark-on-transparent so they're
   visible on the black hero. MaGMa's 'icon-light' file is the dark version
   intended for light backgrounds.
   The brightness(0) invert(1) trick: brightness(0) drives all visible
   pixels to pure black (alpha unchanged), invert(1) flips that to pure
   white. Result: any non-transparent pixel renders white, regardless of
   the original color or how faint it was. Stronger than plain invert(1)
   for dark-gray icons that would otherwise invert to a barely-visible
   light gray. */
.hero-byline-logo--invert {
  filter: brightness(0) invert(1);
}

/* Modifier: larger byline logo. Used for Reepost Studio (the project
   owner) so its logo dominates the row, while MaGMa (the author) stays
   at the base 24px size. Same defensive sizing pattern as the base
   class. */
.hero-byline-logo--lg {
  height: 52px !important;
  width: 52px !important;
  max-height: 52px !important;
  max-width: 52px !important;
}

/* Modifier: lead byline link (Reepost Studio). Larger label, brighter
   color, and a touch more letter-spacing so the project owner reads as
   the primary credit; the MaGMa author link stays at the base styling. */
.hero-byline-link--lead {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.005em;
  gap: 0.7rem;
}
.hero-byline-link--lead:hover {
  color: #ffffff;
}
.hero-byline-sep {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* -------------------------------------------------------- BUTTONS */

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}
/* Primary CTA in the hero: white pill on the dark hero gradient, with
   dark text. The previous near-black accent (#1a1a1a) was nearly
   invisible against the #000 → #1a1a1a hero, and on hover the global
   a:hover rule (`color: var(--text)`) turned the white label dark —
   so the button vanished completely on hover. Explicit color on both
   states defeats that global rule. */
.btn-primary {
  background: #ffffff;
  color: var(--text);
  border-color: #ffffff;
}
.btn-primary:hover {
  background: var(--accent-soft);
  color: var(--text);
  border-color: var(--accent-soft);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.section .btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--border);
}
.section .btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* -------------------------------------------------------- MANIFESTO */

/* A short positioning statement right under the hero. Quiet, centered,
   larger type, no section heading. Sets the project's frame before any
   features get listed. */

.section-manifesto {
  padding: 4rem 1.5rem 2rem;
}
.manifesto-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.manifesto-inner p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .section-manifesto { padding: 3rem 1rem 1.5rem; }
  .manifesto-inner p { font-size: 1.1rem; }
}

/* -------------------------------------------------------- SECTIONS */

.section {
  padding: 5rem 1.5rem;
}
.section-alt {
  background: var(--bg-alt);
}
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--text);
}
.section-lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 0 3rem;
  line-height: 1.6;
}
.section-fine {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 1.5rem 0 0;
}
.section-cta {
  margin-top: 2.5rem;
  text-align: left;
}

/* -------------------------------------------------------- PLUGIN CARDS */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--secondary);
  text-decoration: none;
}
.card:hover .card-media video,
.card:hover .card-media img {
  transform: scale(1.03);
}

/* Media thumbnail strip at the top of each card. 16:9 aspect, fills the
   card width, content cover-fitted so any source ratio looks consistent.
   Slight scale on card hover for tactile feedback. */
.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  position: relative;
}
.card-media video,
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}
/* Tags differentiate per-frame vs sequence via inversion rather than hue:
   per-frame is light/neutral (outlined), sequence is filled near-black, with
   the muted slate accent used only for sequence text on hover. */
.tag-frame {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tag-sequence {
  background: var(--text);
  color: var(--bg);
}
.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.card-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}
.card-meta {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin: 0;
  font-weight: 500;
}

/* -------------------------------------------------------- ARCHITECTURE */

.architecture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
}
.arch-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.arch-box h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}
.arch-box p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.arch-detail {
  font-size: 0.85rem !important;
  color: var(--text-faint) !important;
  font-family: "SF Mono", Menlo, monospace;
}
.arch-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.arch-arrow-label {
  font-size: 0.75rem;
  color: var(--text-faint);
  text-align: center;
  letter-spacing: 0.03em;
}
.arch-arrow-line {
  font-size: 1.8rem;
  color: var(--accent);
  line-height: 1;
}

/* -------------------------------------------------------- QUICK START STEPS */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.steps > li {
  counter-increment: step;
  padding-left: 4rem;
  position: relative;
  margin-bottom: 2.5rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.steps h3 {
  margin: 0.2rem 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}
.steps p {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
}
.os-install {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.os-install > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}
.os-install > li::before {
  content: "\25B8"; /* ▸ */
  position: absolute;
  left: 0;
  color: var(--accent);
}
.os-install strong {
  color: var(--text);
}

/* -------------------------------------------------------- COMMERCIAL-USE TABLE */

.commercial-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}
.commercial-table th,
.commercial-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.commercial-table thead th {
  background: var(--bg-alt);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.commercial-table tbody tr:last-child td { border-bottom: none; }
.commercial-table td.ok { color: var(--ok); font-weight: 600; }
.commercial-table td.no { color: var(--no); font-weight: 600; }

/* -------------------------------------------------------- LEARN MORE GRID */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.link-card {
  display: block;
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: all 0.15s ease;
}
.link-card:hover {
  border-color: var(--secondary);
  background: var(--secondary-soft);
  text-decoration: none;
}
.link-card h4 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.link-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------- LOGO STRIPS */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin: 2rem 0;
}
.logo-strip-standard {
  margin-bottom: 3.5rem;
}
.logo-strip-heading {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0 0 0.5rem;
}
.logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0.7;
}
.logo-link:hover {
  opacity: 1;
  transform: translateY(-1px);
  color: var(--text);
  text-decoration: none;
}
.logo-img {
  height: 32px;
  width: auto;
  display: block;
}
/* OpenFX is the headline standard — give it more visual weight. */
.openfx-logo-link {
  opacity: 0.85;
}
.openfx-logo {
  height: 56px;
}
.logo-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: inherit;
}

/* -------------------------------------------------------- FOOTER */

.footer {
  background: var(--hero-from);
  color: rgba(255, 255, 255, 0.7);
  padding: 3rem 1.5rem;
  font-size: 0.9rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.footer p {
  margin: 0 0 1rem;
  line-height: 1.6;
}
.footer a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}
.footer a:hover {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.7);
}
/* Funding block: holds one .footer-funding-row per entity (Reepost first,
   CNC below). The rows manage their own vertical rhythm via margin, so
   no flex gap here. */
.footer-funding {
  margin: 0 0 2rem;
}
.footer-funding a {
  border: none;
  text-decoration: none;
}
.footer-funding a:hover { text-decoration: none; }
/* Funding rows: one per entity, stacked. Reepost on top, CNC below.
   Within each row the logo and its caption sit on the same line
   (logo left, caption right). The row is sized to its content via
   `width: fit-content` and centered on the page with `margin: 0 auto`,
   so the logo+caption pair reads as a single centered unit. */
.footer-funding-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
  text-align: left;
}
.footer-funding-row:last-child { margin-bottom: 0; }
.footer-funding-row a {
  border: none;
  text-decoration: none;
  line-height: 0;
  display: block;
  flex: 0 0 auto;
}
.footer-funding-row a:hover { text-decoration: none; }
.footer-funding-row .footer-credit-text {
  margin: 0;
  max-width: none;
  /* Keep the caption on a single line beside the logo — no wrapping. */
  white-space: nowrap;
}

/* Reepost logo in the footer: matches CNC height. Source PNG is already
   white-on-dark, so no filter; sits on the black footer naturally. */
.footer-reepost-logo {
  height: 56px !important;
  width: auto !important;
  max-height: 56px !important;
  max-width: 80px !important;
  display: block;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.footer-funding-row a:hover .footer-reepost-logo { opacity: 1; }

.cnc-logo {
  height: 56px !important;
  width: auto !important;
  max-height: 56px !important;
  max-width: 180px !important;
  display: block;
  filter: invert(1) brightness(2);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.footer-funding-row a:hover .cnc-logo { opacity: 1; }
.footer-credit-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  /* No width cap. The row's flex layout gives the <p> its natural width
     and wraps the whole row (logo above text) on narrow viewports via
     the row's flex-wrap. */
  max-width: none;
}

.footer-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------- RESPONSIVE */

@media (max-width: 720px) {
  .hero { padding: 4rem 1rem 3.5rem; }
  .hero-title { font-size: 3.25rem; }
  .hero-tagline { font-size: 1.2rem; }
  .hero-subtagline { font-size: 1rem; }
  .section { padding: 3.5rem 1rem; }
  .section-title { font-size: 1.6rem; }
  .section-lede { font-size: 1.05rem; margin-bottom: 2rem; }
  .architecture {
    grid-template-columns: 1fr;
  }
  .arch-arrow { transform: rotate(90deg); margin: 0.5rem 0; }
  .commercial-table { font-size: 0.85rem; }
  .commercial-table th, .commercial-table td { padding: 0.65rem 0.75rem; }
  .steps > li { padding-left: 3.25rem; }
  .steps > li::before { width: 2rem; height: 2rem; font-size: 1rem; }
}