/* Self-hosted fonts. Latin subsets only, all SIL OFL 1.1, vendored under
   public/fonts/ so no request leaves the origin. Inter and JetBrains Mono are
   variable, so one file covers every weight the site uses.
   See CREDITS.md for sources. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   Casita Software homepage styles
   ============================================================ */

:root {
  --bg: #F7F1E6;            /* Plaster */
  --bg-soft: #FFFFFF;
  --bg-warm: #F4EDDE;
  --surface: #FFFFFF;
  --surface-2: #F4EDDE;
  --surface-3: #EBE3D0;
  --border: #E7DFCC;
  --border-soft: #EFE9D8;
  --border-strong: #D6CCB4;
  --text: #1E2328;          /* Ink */
  --text-muted: #6E6E73;
  --text-faint: #9A9388;
  --accent: #34506B;        /* Adoquin */
  --accent-deep: #27405A;
  --accent-glow: rgba(52, 80, 107, 0.10);

  /* Casita Software brand tokens, merged from the kit's casita-theme.css.
     The site's own token names above stay in use and point at these. */
  --cs-plaster: #F7F1E6;
  --cs-ink: #1E2328;
  --cs-adoquin: #34506B;
  --cs-terracotta: #C4553B;
  --cs-seaglass: #7FB3A1;
  --cs-mango: #E6A03A;

  --cs-bg: var(--cs-plaster);
  --cs-surface: #FFFDF8;
  --cs-text: var(--cs-ink);
  --cs-text-muted: #5B6168;
  --cs-brand: var(--cs-terracotta);
  --cs-accent: var(--cs-adoquin);
  --cs-highlight: var(--cs-mango);
  --cs-border: #E6DCCB;

  --cs-radius-sm: 8px;
  --cs-radius: 14px;
  --cs-radius-lg: 24px;
  --cs-space: 8px;
  --cs-pattern: url('/brand/pattern-adoquin.svg');
  --aubergine: #4A1A30;
  --pink: #D43F77;
  --maxw: 1080px;
  --pad-x: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* dot grid removed for light theme */

/* ============================================================
   MOTION: page-load entrance + scroll reveal + hover lifts
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: stagger mark, title, sub */
  .hero-mark img,
  .hero-title,
  .hero-sub {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .hero-mark img { animation-delay: 0.05s; }
  .hero-title    { animation-delay: 0.18s; }
  .hero-sub      { animation-delay: 0.32s; }
  @keyframes rise {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Scroll-reveal: sections + bands fade up as they enter viewport */
  .section,
  .spotlight-band,
  .updates-band,
  .docs-card {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }
  .section.is-visible,
  .spotlight-band.is-visible,
  .updates-band.is-visible,
  .docs-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hover lift on the hero mark itself */
  .hero-mark img:hover {
    transform: translateY(-6px) scale(1.02);
  }

  /* CTA "Learn more" gets an animated arrow */
  .cta-secondary {
    transition: transform 0.18s, background 0.18s, border-color 0.18s, gap 0.18s;
  }
  .cta-secondary::after {
    content: "\2192";
    display: inline-block;
    margin-left: 2px;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .cta-secondary:hover::after {
    transform: translateX(4px);
  }

  /* App icon in deep-dive: subtle lift on hover */
  .deep .meta .header img {
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
  }
  .deep .meta .header img:hover {
    transform: translateY(-4px) scale(1.015);
  }

  /* Update rows: subtle background tint on hover */
  .update-row {
    transition: background-color 0.2s ease;
  }
  .update-row:hover {
    background-color: rgba(28, 18, 4, 0.025);
  }
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* utility */
.accent {
  color: var(--accent);
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.accent-text { color: var(--accent); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: relative;
  z-index: 50;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--bg);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
}
.nav-toggle:hover { background: var(--bg-warm); }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Casita Software logo. Every logo file is custom drawn and outlined, so no
   webfont is involved. Do not retype, recolour or stretch it.
   Compact wordmark below 640px, horizontal logo above. Dark variants are
   selected by the <picture> sources in the markup. */
.nav-brand .nav-logo {
  height: 28px;
  width: auto;
  display: block;
}
@media (min-width: 640px) {
  .nav-brand .nav-logo { height: 40px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}
.nav-links a {
  transition: color 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.external::after {
  content: "↗";
  font-size: 12px;
  color: var(--text-faint);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-download {
  padding: 8px 16px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .nav-actions { gap: 12px; }
  .nav-download { padding: 7px 12px; font-size: 12px; }
}

.nav-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.nav-cta .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: led-pulse 2.4s infinite;
}
@keyframes led-pulse {
  0%, 60% { opacity: 1; }
  70%, 80% { opacity: 0.35; }
  90%, 100% { opacity: 1; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px var(--pad-x) 16px;
  text-align: center;
}

.hero-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.hero-mark img {
  width: 180px;
  height: 180px;
  border-radius: 40px;
  box-shadow:
    0 24px 48px rgba(28, 18, 4, 0.18),
    0 6px 12px rgba(28, 18, 4, 0.08);
  transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.hero-mark img:hover {
  transform: translateY(-4px) scale(1.02);
}
@media (max-width: 640px) {
  .hero-mark img { width: 132px; height: 132px; border-radius: 30px; }
}

.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow .dot {
  color: var(--accent);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--border-strong);
}

.hero-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 auto 28px;
  max-width: 1040px;
  text-wrap: balance;
}

.hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 auto 72px;
  max-width: 620px;
  text-wrap: pretty;
}

.hero-cta {
  margin: 0 auto;
}
.hero-cta-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-faint);
  margin: 0 0 16px;
}
.hero-cta .cta-row {
  justify-content: center;
}

.hero-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
}
.hero-icon-link:hover { transform: translateY(-8px); }
.hero-icon-link .icon-wrap {
  filter:
    drop-shadow(0 24px 36px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: filter 0.4s;
}
.hero-icon-link:hover .icon-wrap {
  filter:
    drop-shadow(0 30px 44px rgba(0, 0, 0, 0.6))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.hero-icon-link img {
  width: 200px;
  height: 200px;
}
.hero-icon-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hero-icon-label .arrow {
  margin-left: 6px;
  color: var(--text-faint);
  transition: color 0.18s, transform 0.18s;
  display: inline-block;
}
.hero-icon-link:hover .arrow {
  color: var(--accent);
  transform: translateX(2px) translateY(-2px);
}
.hero-icon-platform {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* tiny ambient grub bottom-right of hero */
.hero-grub {
  position: absolute;
  right: var(--pad-x);
  bottom: 24px;
  width: 70px;
  height: 70px;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 2;
}
.hero-grub:hover {
  opacity: 1;
  transform: translateY(-4px);
}
.hero-grub .speech {
  position: absolute;
  bottom: 110%;
  right: 0;
  background: var(--surface);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.hero-grub:hover .speech {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SECTION shared
   ============================================================ */
.section {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--pad-x);
}
.section-band {
  background: var(--bg-soft);
  margin: 0;
  max-width: none;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-band > .section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px var(--pad-x);
}

/* App spotlight full-bleed colored bands */
.spotlight-band {
  width: 100%;
  margin: 0;
  max-width: none;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  box-sizing: border-box;
}
.spotlight-band > .section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px var(--pad-x);
  box-sizing: border-box;
}

/* Updates band: warmer cream tint, separates hero from spotlights */
.updates-band {
  width: 100%;
  background: var(--bg-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0;
  box-sizing: border-box;
}
.updates-band > .section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--pad-x) 48px;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .spotlight-band > .section-inner {
    padding: 56px var(--pad-x);
  }
}
.spotlight-wine {
  background: #F0CFC2;
}
.spotlight-cream {
  background: #F0DCAA;
}

/* Bigger app icons inside spotlights */
.spotlight-band .deep .meta .header img {
  width: 132px;
  height: 132px;
  border-radius: 30px;
  box-shadow: 0 18px 36px rgba(28, 18, 4, 0.20), 0 6px 12px rgba(28, 18, 4, 0.08);
}
.spotlight-band .deep .meta .name {
  font-size: 38px;
  letter-spacing: -0.025em;
}
.spotlight-band .section-head {
  border-bottom-color: rgba(28, 18, 4, 0.12);
}
.spotlight-band .section-title {
  font-size: clamp(40px, 5vw, 64px);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.section-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.section-desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 580px;
  text-wrap: pretty;
}
.section-aside {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  line-height: 1.85;
  white-space: nowrap;
}
.section-aside .v { color: var(--text-muted); }

/* ============================================================
   RECENT UPDATES list
   ============================================================ */
.updates-list {
  display: flex;
  flex-direction: column;
}
.update-row {
  display: grid;
  grid-template-columns: 90px 110px 1fr;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.update-row:first-child { padding-top: 0; }
.update-row:last-child { border-bottom: none; padding-bottom: 0; }
.update-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 3px;
}
.update-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 4px;
}
.update-content {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.update-content strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}
@media (max-width: 640px) {
  .update-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .update-date, .update-tag { padding-top: 0; }
}

/* ============================================================
   APPS LINEUP cards
   ============================================================ */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 880px) {
  .lineup-grid { grid-template-columns: 1fr; }
}
.lineup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
  text-decoration: none;
  color: inherit;
}
.lineup-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.lineup-card .row1 {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lineup-card .row1 img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(28, 18, 4, 0.18), 0 4px 8px rgba(28, 18, 4, 0.06);
  flex-shrink: 0;
}
.lineup-card .name-block {
  flex: 1;
  min-width: 0;
}
.lineup-card .name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lineup-card .name .ver {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.lineup-card .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
}
.lineup-card .desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.lineup-card .platform-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.platform-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.platform-pill.live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.platform-pill.beta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFB020;
}
.platform-pill.tbd {
  color: var(--text-faint);
}
.platform-pill.tbd::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

.lineup-card .visit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lineup-card:hover .visit { color: var(--text); }
.lineup-card .visit .arrow {
  transition: transform 0.18s;
}
.lineup-card:hover .visit .arrow {
  transform: translateX(3px);
}

/* ============================================================
   DEEP DIVE shared
   ============================================================ */
.deep {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.deep.reverse { grid-template-columns: 1.05fr 1fr; }
/* Single-column spotlight, for a product with no artwork yet. Drop the
   modifier and add a .visual sibling once there is something to show. */
.deep.single { grid-template-columns: 1fr; }
.deep.single > .meta { max-width: 680px; }
.deep.reverse > .meta { order: 2; }
.deep.reverse > .visual { order: 1; }
@media (max-width: 980px) {
  .deep, .deep.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .deep.reverse > .meta,
  .deep.reverse > .visual { order: 0; }
}

.deep .meta { display: flex; flex-direction: column; gap: 20px; }
.deep .meta .header {
  display: flex;
  align-items: center;
  gap: 18px;
}
.deep .meta .header img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.deep .meta .header .title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deep .meta .name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 0;
}
.deep .meta .tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
}
.deep .meta .deep-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.deep .meta .deep-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 540px;
  text-wrap: pretty;
}
.deep .meta .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deep .meta .feature-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--text);
}
.deep .meta .feature-list li::before {
  content: "→";
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  flex-shrink: 0;
}
.deep .meta .feature-list li b {
  color: var(--text);
  font-weight: 600;
}
.deep .meta .feature-list li span {
  color: var(--text-muted);
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s, border-color 0.18s;
  border: 1px solid transparent;
}
.cta-primary {
  background: var(--text);
  color: var(--bg);
}
.cta-primary:hover {
  transform: translateY(-1px);
  background: #000;
}
.cta-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.cta-secondary:hover {
  background: var(--surface);
  border-color: var(--text-faint);
}
.cta .size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.65;
  font-weight: 500;
}

/* ============================================================
   APP MOCK FRAMES: Crosswire window
   ============================================================ */

/* macOS window frame: light theme */
.mac-window {
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.mac-titlebar {
  background: linear-gradient(180deg, #ECECEE, #E2E2E5);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #D1D1D6;
}
.mac-traffic {
  display: flex;
  gap: 8px;
}
.mac-traffic span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.mac-traffic span:nth-child(1) { background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4); }
.mac-traffic span:nth-child(2) { background: #FEBC2E; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4); }
.mac-traffic span:nth-child(3) { background: #28C840; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4); }
.mac-title {
  flex: 1;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #4A4A50;
}
.mac-titlebar .right {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  width: 50px;
  text-align: right;
}

.mac-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 460px;
}
@media (max-width: 600px) {
  .mac-body { grid-template-columns: 1fr; min-height: auto; }
}

.mac-main {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
}
.mac-main .lib-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mac-main .lib-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mac-main .lib-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
}
.mac-main .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mac-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: default;
}
.mac-btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}
.mac-btn .glyph { margin-right: 4px; opacity: 0.7; }
.mac-search {
  margin-left: auto;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-faint);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 160px;
}

.prog-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.prog-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px 60px 18px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  background: var(--surface);
  font-size: 12.5px;
}
.prog-row.head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-soft);
}
.prog-row.head > * { color: var(--text-faint); }
.prog-row .p-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
}
.prog-row .p-name {
  font-weight: 500;
  color: var(--text);
}
.prog-row .p-date,
.prog-row .p-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.prog-row .p-action {
  color: var(--text-faint);
  font-size: 14px;
}

/* Selected library row: the signature left accent bar + warm tint. */
.prog-row { position: relative; }
.prog-row.selected { background: var(--accent-glow); }
.prog-row.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.prog-row.selected .p-name { color: var(--accent-deep); font-weight: 600; }

/* Icon tiles read like real app icons: a soft sheen + top highlight + lift
   layered over each tile's base colour. */
.prog-row .p-icon {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.12));
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.16);
}

/* The selected row's run affordance: a filled accent disc, not a faint glyph. */
.p-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 8px;
  padding-left: 1px;
  box-shadow: 0 1px 3px rgba(52, 80, 107, 0.45);
}

/* Detail hero for the selected app: the app's row to detail view, in serif. */
.lib-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(52, 80, 107, 0.07), transparent 62%),
    var(--surface-2);
  border: 1px solid var(--border);
}
.lib-detail .det-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  font-size: 20px;
}
.det-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.det-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text);
}
.det-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.det-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  display: inline-block;
}
.det-play {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-deep);
  border-radius: 8px;
  padding: 8px 18px;
  cursor: default;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(52, 80, 107, 0.30);
}
.det-play .glyph { font-size: 9px; margin-right: 5px; opacity: 0.95; }


/* ============================================================
   STUDIO
   ============================================================ */
.studio {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.studio.studio-no-visual {
  display: block;
}
/* Stacked logo in the About section. Kit minimum for this file is 200px wide. */
.studio-logo img {
  width: 320px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .studio { grid-template-columns: 1fr; gap: 32px; }
}
.studio-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.studio-text .h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
}
.studio-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.studio-text p b { color: var(--text); font-weight: 500; }
.studio-text .signature {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--text);
  margin-top: 8px;
}
.studio-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.studio-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, var(--accent-glow), transparent 70%);
}
.studio-visual img {
  width: 240px;
  height: 240px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}
.studio-visual .corner-text {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   STATUS BOARD
   ============================================================ */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .status-grid { grid-template-columns: 1fr; }
}
.status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.status-card .when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-card .what {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
}
.status-card .who {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
}
.status-card .blurb {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding: 32px var(--pad-x) 48px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
}
.footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.footer-brand .dot { color: var(--accent); }
.footer-links {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 var(--pad-x);
  max-width: 100%;
}
@media (max-width: 540px) {
  .footer-links {
    gap: 12px 18px;
    font-size: 11px;
  }
}
.footer-links a:hover { color: var(--text); }
.footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
}
.footer-meta .accent-text { color: var(--accent); }

/* fixed corner version */
.corner-version {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 99;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: rgba(20, 20, 26, 0.7);
  border: 1px solid var(--border);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.corner-version .accent-text { color: var(--accent); }

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 720px) {
  :root { --pad-x: 24px; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
    box-shadow: 0 12px 24px rgba(28, 18, 4, 0.08);
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a {
    padding: 12px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-links a:last-child { border-bottom: none; }

  .hero { padding-top: 56px; padding-bottom: 48px; }
  .hero-icons { gap: 32px; }
  .hero-icon-link img { width: 140px; height: 140px; }
  .hero-grub { right: 12px; bottom: 8px; width: 50px; height: 50px; }
  .section { padding: 56px var(--pad-x); }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .section-aside { text-align: left; }
}

/* ============================================================
   Utility classes
   Replaces former inline style="..." attributes so the CSP can
   drop 'unsafe-inline' from style-src.
   ============================================================ */
.mono-strong { color: var(--text); }
.p-icon-hk { background: #1a8a3e; }
.p-icon-cl { background: #d83a3a; }
.p-icon-rm { background: #c8a23a; }
.p-icon-dd { background: #5a4a8a; }
.docs-cta-row.docs-cta-row-top {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-bottom: 48px;
}

/* ============================================================
   REFRESH (2026-06): atmosphere + editorial type + staggered motion.
   Additive layer, grouped so it can be reverted as one block. Stays
   inside the existing warm-paper / forest-green / serif identity.
   ============================================================ */

/* Fine film grain over the warm paper: texture, not noise. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.022;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::before { opacity: 0.018; } }

.hero { isolation: isolate; }
.hero > * { position: relative; z-index: 1; }

/* Accent bar above each section title. */
.section-head .section-title::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 3px;
  margin-bottom: 16px;
  background: var(--accent);
}

/* Staggered reveal: update rows + spotlight feature list cascade in
   after their band crosses into view (motion.js toggles .is-visible). */
@media (prefers-reduced-motion: no-preference) {
  .updates-band .update-row,
  .spotlight-band .feature-list li {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .updates-band.is-visible .update-row,
  .spotlight-band.is-visible .feature-list li {
    opacity: 1;
    transform: none;
  }
  .updates-band.is-visible .update-row:nth-child(1) { transition-delay: 0.04s; }
  .updates-band.is-visible .update-row:nth-child(2) { transition-delay: 0.10s; }
  .updates-band.is-visible .update-row:nth-child(3) { transition-delay: 0.16s; }
  .updates-band.is-visible .update-row:nth-child(4) { transition-delay: 0.22s; }
  .updates-band.is-visible .update-row:nth-child(5) { transition-delay: 0.28s; }
  .updates-band.is-visible .update-row:nth-child(6) { transition-delay: 0.34s; }
  .updates-band.is-visible .update-row:nth-child(7) { transition-delay: 0.40s; }
  .spotlight-band.is-visible .feature-list li:nth-child(1) { transition-delay: 0.10s; }
  .spotlight-band.is-visible .feature-list li:nth-child(2) { transition-delay: 0.18s; }
  .spotlight-band.is-visible .feature-list li:nth-child(3) { transition-delay: 0.26s; }
  .spotlight-band.is-visible .feature-list li:nth-child(4) { transition-delay: 0.34s; }
}

/* Update rows: an accent tick slides in on hover (with the existing tint). */
.update-row { position: relative; }
.update-row::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.update-row:hover::after { transform: scaleY(1); }

/* Primary CTA: warmer lift + faint green edge so Download has presence. */
.cta-primary { transition: transform 0.18s, background 0.18s, box-shadow 0.22s; }
.cta-primary:hover {
  box-shadow: 0 10px 24px rgba(28, 18, 4, 0.18), 0 0 0 1px var(--accent-deep);
}

/* Feature-list arrows nudge on row hover for a touch of life. */
.deep .meta .feature-list li::before { transition: transform 0.18s; }
.deep .meta .feature-list li:hover::before { transform: translateX(3px); }

/* More color: nav + footer links pick up the accent on hover. */
.nav-links a:hover { color: var(--accent-deep); }
.footer-links a { transition: color 0.18s; }
.footer-links a:hover { color: var(--accent-deep); }

/* Update tags get a small green LED: a per-row pop of color. */
.update-tag { display: inline-flex; align-items: center; gap: 7px; }
.update-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(52, 80, 107, 0.55);
  flex-shrink: 0;
}

/* Mockup: the primary action goes green; rows tint green on hover. */
.mac-btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.prog-row:not(.head) { transition: background-color 0.16s; }
.prog-row:not(.head):hover { background: var(--accent-glow); }
.prog-row:not(.head):hover .p-action { color: var(--accent-deep); }

/* ============================================================
   Docs shared layout
   (/crosswire/, /crosswire/docs/, /crosswire/compatibility/)
   ============================================================ */

.docs-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px 96px;
}

.docs-wrap--wide { max-width: 860px; }

/* GPL-3 corresponding-source offer shown beside each download CTA.
   Deliberately plain: it is a legal offer, not a badge. */
.source-offer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: -20px 0 40px;
}
.source-offer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.source-offer a:hover { color: var(--text); }
/* Hero variant: centred under the hero CTA row, tighter than the in-page ones. */
.source-offer-hero {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
}

/* Per-product subnav. One block per app, see PRODUCT-SUBNAV in the markup. */
.product-subnav {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.product-subnav-name {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-faint);
  margin-right: 4px;
}
.product-subnav a {
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.product-subnav a:hover { color: var(--text); }
.product-subnav a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Status pill for an app that is not released yet. Reusable per product. */
.docs-status {
  display: inline-block;
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-glow);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 28px;
}

.docs-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.docs-hero img {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.docs-hero .meta h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.docs-hero .meta p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.docs-wrap h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.docs-wrap h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 56px 0 16px;
  letter-spacing: -0.015em;
}
.docs-wrap h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 28px 0 10px;
}
.docs-wrap p,
.docs-wrap li {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.docs-wrap strong { color: var(--text); font-weight: 600; }
.docs-wrap ul, .docs-wrap ol {
  padding-left: 22px;
  margin-bottom: 16px;
}
.docs-wrap a { color: var(--accent); text-decoration: none; }
.docs-wrap a:hover { text-decoration: underline; }
.docs-wrap code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text);
}
.docs-wrap .lede {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.docs-callout {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 24px 0;
}
.docs-callout p:last-child { margin-bottom: 0; }

.docs-back {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  display: inline-block;
  margin-bottom: 32px;
}
.docs-back:hover { color: var(--text); }

.docs-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 48px 0 8px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   Docs: preset table
   ============================================================ */

.preset-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.92rem;
}
.preset-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.preset-table td {
  padding: 8px 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--bg-soft);
  vertical-align: top;
}
.preset-table code { font-size: 0.82em; }

/* ============================================================
   Compatibility: table, badges, legend
   ============================================================ */

.compat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.compat-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.compat-table td {
  padding: 10px 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--bg-soft);
  vertical-align: top;
}
.compat-table tr:last-child td { border-bottom: none; }
.badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge-works { background: #d4f5d4; color: #1a6e1a; }
.badge-tweaks { background: #fef3c7; color: #92400e; }
.badge-broken { background: #fee2e2; color: #991b1b; }
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  font-size: 0.85rem;
  color: var(--text-muted);
  align-items: center;
}
.legend span { display: flex; gap: 6px; align-items: center; }

/* ============================================================
   Docs index (/docs/)
   ============================================================ */

.docs-index {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.docs-index-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.docs-index h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.docs-index .lede {
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 56px;
  line-height: 1.55;
  max-width: 580px;
}
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.docs-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.docs-card:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  transform: translateY(-2px);
}
.docs-card img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  box-shadow: 0 8px 16px rgba(28, 18, 4, 0.16);
  flex-shrink: 0;
}
.docs-card .name {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text);
}
.docs-card .tagline {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}
.docs-card .visit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
}

/* ============================================================
   Legal pages (privacy.html, terms.html)
   ============================================================ */

.legal-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 96px;
}
.legal-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.legal-wrap h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 8px;
}
.legal-updated {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 56px;
}
.legal-wrap h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 10px;
}
.legal-wrap p,
.legal-wrap li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.legal-wrap ul {
  padding-left: 20px;
  margin-bottom: 12px;
}
.legal-wrap a { color: var(--accent); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* Casita Software dark tokens from the kit. The site's own components still
   use the light palette, so these are available but not yet wired through.
   See tasks/BLOCKERS.md, "site has no dark theme". */
@media (prefers-color-scheme: dark) {
  :root {
    --cs-bg: #15191D;
    --cs-surface: #1E2328;
    --cs-text: #F2EBDD;
    --cs-text-muted: #A8ADB2;
    --cs-brand: var(--cs-mango);
    --cs-accent: #8FB0CC;
    --cs-highlight: #F0B45A;
    --cs-border: #2C3238;
  }
}