/* ---------- Self-hosted fonts ----------
   Served from this origin instead of fonts.googleapis.com: the Google
   stylesheet is render-blocking, so any slowness or blocking of that host
   left the page blank (measured: 180ms first paint vs 14s when the request
   hung). Variable files cover every weight we use in 123KB instead of the
   377KB the static cuts would need. unicode-range keeps a Cyrillic page
   from downloading Latin-ext or Greek it never renders. */

/* Cormorant Garamond — cyrillic-ext */
@font-face  {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-var-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 
}

/* Cormorant Garamond — cyrillic */
@font-face  {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-var-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 
}

/* Cormorant Garamond — latin-ext */
@font-face  {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 
}

/* Cormorant Garamond — latin */
@font-face  {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-var-latin.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;
 
}

/* Inter — cyrillic-ext */
@font-face  {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Inter-var-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 
}

/* Inter — cyrillic */
@font-face  {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Inter-var-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 
}

/* Inter — latin-ext */
@font-face  {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 
}

/* Inter — latin */
@font-face  {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Inter-var-latin.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;
 
}

:root {
  /* InvLib brand palette (rebrand) — deep blue / turquoise, replacing the
     former dark-green/brass "antique library" theme. --spine/--brass keep
     their names (structural role: heading color / accent color) so every
     rule built on var(--spine)/var(--brass) below repaints automatically. */
  --paper: #f8fafc;
  --paper-alt: #e9eef5;
  --ink: #101826;
  --ink-soft: #47566b;
  --ink-faint: #8a97ac;
  --spine: #1e3a8a;
  --spine-2: #142a63;
  --spine-warm: #2748a0;
  --bordo: #7a2e35;
  --brass: #0ea5a8;
  --brass-light: #5eead4;
  --brass-dark: #0b7a80;
  --line: rgba(16, 24, 38, 0.14);
  --good: #3f7d55;
  --bad: #a8452f;
  --shadow: 0 12px 32px rgba(16, 24, 38, 0.14);
  --glow: 0 8px 26px rgba(14, 165, 168, 0.35);
  --radius: 14px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

::selection {
  background: var(--brass-light);
  color: var(--spine-2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--spine);
  line-height: 1.15;
  margin: 0 0 0.6em;
}

h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  text-align: center;
}

/* Brass underline that draws itself in when the heading scrolls into view */
.section h2 {
  position: relative;
  padding-bottom: 0.4em;
}

.section h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 68px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass-light), var(--brass));
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.6s ease 0.2s;
}

.section h2.in-view::after,
.section .in-view h2::after {
  transform: translateX(-50%) scaleX(1);
}

.compliance-wrap h2::after {
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.compliance-wrap .in-view h2::after {
  transform: scaleX(1);
}

p {
  color: var(--ink-soft);
  margin: 0 0 1em;
}

a {
  color: inherit;
}

ul {
  padding-left: 1.2em;
}

/* ---------- Scroll progress bar ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--brass-dark), var(--brass-light));
  z-index: 100;
  pointer-events: none;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 6px 20px rgba(16, 24, 38, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
  transition: height 0.25s ease;
}

.site-header.scrolled .header-inner {
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--spine);
}

.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.08);
}

.brand-name {
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.primary-nav a {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.primary-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--brass);
  transition: right 0.25s ease;
}

.primary-nav a:not(.nav-cta):hover::after,
.primary-nav a:not(.nav-cta).active::after {
  right: 0;
}

.primary-nav a:not(.nav-cta).active {
  color: var(--spine);
}

.primary-nav a:hover {
  color: var(--spine);
}

.nav-cta {
  transition: background 0.15s ease, transform 0.15s ease;
}

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

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.4rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.lang-switch a,
.lang-switch .lang-current {
  text-decoration: none;
  color: #5a6b85;
  transition: color 0.15s ease;
}

.lang-switch a:hover {
  color: var(--spine);
}

.lang-switch .lang-current {
  color: var(--spine);
}

.nav-cta {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--spine);
  color: var(--brass-light) !important;
}

.nav-cta:hover {
  background: var(--spine-2);
  color: var(--brass-light) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--spine);
  border-radius: 2px;
}

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

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 90% at 15% 100%, rgba(14, 165, 168, 0.28) 0%, transparent 55%),
    radial-gradient(120% 140% at 50% -10%, var(--spine-warm) 0%, var(--spine) 55%, var(--spine-2) 100%);
  color: var(--paper);
  padding: 5.5rem 0 5rem;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 20%, rgba(236, 203, 106, 0.18), transparent 60%);
  animation: heroGlow 10s ease-in-out infinite;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass-light) 50%, var(--brass) 80%, transparent);
  opacity: 0.8;
}

@keyframes heroGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-inner > * {
  position: relative;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}

.hero-inner .eyebrow { animation-delay: 0.05s; }
.hero-inner h1 { animation-delay: 0.15s; }
.hero-inner .shelf-scene { animation-delay: 0.55s; }
.hero-inner .lead { animation-delay: 0.3s; }
.hero-inner .hero-badges { animation-delay: 0.4s; }
.hero-inner .hero-actions { animation-delay: 0.5s; }
.hero-inner .hero-note { animation-delay: 0.6s; }

.eyebrow {
  color: var(--brass-light);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* ---------- Enchanted shelf (flying books) ---------- */

.shelf-scene {
  position: relative;
  max-width: 760px;
  height: 250px;
  margin: 3.2rem auto 0;
  pointer-events: none;
}

.shelf-board {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--board-y);
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brass-light) 0%, var(--brass-dark) 90%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.shelf-board::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 9px;
  height: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent);
  filter: blur(2px);
}

.fly-book {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 20px);
  height: var(--h, 70px);
  border-radius: 2px 3px 3px 2px;
  background: linear-gradient(90deg, var(--c2, #142a63) 0%, var(--c1, #1e3a8a) 35%, var(--c1, #1e3a8a) 75%, var(--c2, #142a63) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  z-index: 2;
  will-change: transform;
  /* Pivot at the spine's foot: rotation in flight reads as a book tipping,
     and the landing squash keeps the bottom edge pinned to the shelf.
     Every transform stays in the `transform` property alone — the separate
     `scale`/`translate` properties compose BEFORE it and would scale the
     translation offset, lifting the book off the board. */
  transform-origin: bottom center;
}

/* Gilded bands near the top of each spine */
.fly-book::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 8px;
  height: 2px;
  background: var(--brass-light);
  opacity: 0.75;
  box-shadow: 0 4px 0 rgba(236, 203, 106, 0.45);
}

.fly-book.flying {
  z-index: 4;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.45));
}

/* Signature label stamped onto the spine */
.fly-book .sig {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%) scale(0);
  width: calc(100% - 4px);
  padding: 1px 0;
  background: var(--paper);
  border: 1px solid var(--brass-dark);
  border-radius: 1px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 6.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1), opacity 0.2s ease;
}

.fly-book.stamped .sig {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Golden flash at the moment the signature is stamped */
.fly-book.stamped::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 6px;
  background: radial-gradient(circle, rgba(236, 203, 106, 0.55), transparent 70%);
  animation: stampFlash 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes stampFlash {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.5); }
}

@media (max-width: 720px) {
  .shelf-scene {
    height: 200px;
    margin-top: 2.4rem;
  }

  .shelf-board:nth-child(1) { --board-y: 96px !important; }
  .shelf-board:nth-child(2) { --board-y: 190px !important; }
}

.hero h1 {
  color: var(--paper);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* The product name leads the headline — it was previously absent from the
   hero entirely, living only in the nav and the body copy. Kept inside the
   h1 so the brand is part of the page's primary heading, not decoration. */
.hero-name {
  display: block;
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--brass-light);
  text-shadow: 0 3px 18px rgba(20, 42, 99, 0.45);
  margin-bottom: 0.22em;
}

.hero-tagline {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
}

.hero .lead {
  max-width: 640px;
  margin: 0 auto 2.2rem;
  color: #c7d2e8;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Shine sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn:hover::after {
  left: 130%;
}

.btn-primary {
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
  color: var(--spine-2);
  box-shadow: 0 3px 10px rgba(14, 165, 168, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

/* Default reads on the paper/paper-alt backgrounds every non-hero section
   uses. The hero and the 404 page sit on a dark spine background, so they
   need the inverse — see .hero .btn-ghost / .nf .btn-ghost below. */
.btn-ghost {
  background: transparent;
  color: var(--spine);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  background: rgba(30, 58, 138, 0.06);
}

.hero .btn-ghost,
.nf .btn-ghost {
  color: var(--paper);
  border-color: rgba(248, 250, 252, 0.4);
}

.hero .btn-ghost:hover,
.nf .btn-ghost:hover {
  background: rgba(248, 250, 252, 0.1);
}

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

.section {
  padding: 5rem 0;
}

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

.section-intro {
  max-width: 640px;
  margin: 0 auto 2.8rem;
  text-align: center;
}

/* ---------- Problem / compare ---------- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 820px;
  margin: 0 auto;
}

.compare-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  border: 1px solid var(--line);
}

.compare-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

.compare-card ul {
  margin: 0;
  padding-left: 1.1em;
}

.compare-card li {
  margin-bottom: 0.5em;
  color: var(--ink-soft);
}

.compare-bad {
  border-color: rgba(168, 69, 47, 0.25);
}

.compare-bad h3 {
  color: var(--bad);
}

.compare-good {
  background: linear-gradient(150deg, var(--spine-warm) 0%, var(--spine) 45%, var(--spine-2) 100%);
  border-color: rgba(14, 165, 168, 0.5);
  box-shadow: var(--shadow);
}

.compare-good h3 {
  color: var(--brass-light);
}

.compare-good li {
  color: #d6deef;
}

/* ---------- Features ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}

.feature-card {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Brass accent line that grows across the card's top edge on hover */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-light), var(--brass));
  transition: right 0.3s ease;
}

.feature-card:hover::before {
  right: 0;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(14, 165, 168, 0.45);
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- Screenshots ---------- */

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.screenshot {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.screenshot:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 168, 0.45);
}

.screenshot-link {
  position: relative;
  display: block;
  cursor: zoom-in;
  overflow: hidden;
}

.screenshot-link::after {
  content: "\26F6";
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 42, 99, 0.65);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.screenshot:hover .screenshot-link::after {
  opacity: 1;
  transform: translateY(0);
}

.screenshot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.45s ease;
}

.screenshot:hover img {
  transform: scale(1.04);
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(20, 42, 99, 0.88);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-figure {
  position: relative;
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.lightbox.open .lightbox-figure {
  transform: scale(1);
}

.lightbox img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: var(--paper);
}

.lightbox-caption {
  color: var(--brass-light);
  font-size: 0.95rem;
  margin-top: 1rem;
  text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(236, 203, 106, 0.4);
  background: rgba(20, 42, 99, 0.7);
  color: var(--paper);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--spine-warm);
  transform: scale(1.06);
}

.lightbox-close {
  top: -3.2rem;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 1.4rem;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  transform: translateY(-50%) scale(1.06);
}

.lightbox-prev {
  left: -1.4rem;
}

.lightbox-next {
  right: -1.4rem;
}

@media (max-width: 720px) {
  .lightbox-close {
    top: -2.6rem;
    right: 0;
  }

  .lightbox-prev {
    left: 0.3rem;
  }

  .lightbox-next {
    right: 0.3rem;
  }
}

.screenshot figcaption {
  padding: 0.75rem 0.95rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* ---------- Callouts, stat chips, button rows ---------- */

.callout {
  background: rgba(14, 165, 168, 0.08);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brass);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  font-size: 0.92rem;
  margin-top: 1.6rem;
}

.callout a {
  color: var(--spine);
  font-weight: 600;
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 1.8rem;
}

.stat-chip {
  background: var(--paper);
  border: 1px solid rgba(14, 165, 168, 0.35);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--spine);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-chip:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: var(--glow);
}

.btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- Compliance ---------- */

.compliance-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}

.compliance-wrap h2 {
  text-align: left;
}

.law-list {
  list-style: none;
  padding: 0;
  margin-top: 1.4rem;
}

.law-list li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.compliance-text.in-view .law-list li {
  opacity: 1;
  transform: none;
}

.compliance-text.in-view .law-list li:nth-child(1) { transition-delay: 0.15s; }
.compliance-text.in-view .law-list li:nth-child(2) { transition-delay: 0.25s; }
.compliance-text.in-view .law-list li:nth-child(3) { transition-delay: 0.35s; }
.compliance-text.in-view .law-list li:nth-child(4) { transition-delay: 0.45s; }
.compliance-text.in-view .law-list li:nth-child(5) { transition-delay: 0.55s; }
.compliance-text.in-view .law-list li:nth-child(6) { transition-delay: 0.65s; }

.law-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.law-list span {
  display: inline-block;
  min-width: 150px;
  font-weight: 700;
  color: var(--spine);
  font-family: var(--serif);
}

.compliance-badge {
  display: flex;
  justify-content: center;
}

.badge-ring {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid var(--brass);
  outline: 1px solid var(--line);
  outline-offset: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  text-align: center;
}

.badge-ring::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1px dashed var(--brass-light);
  opacity: 0.6;
  animation: spin 30s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes badgeBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 168, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(14, 165, 168, 0); }
}

.badge-ring {
  animation: badgeBreathe 4.5s ease-in-out infinite;
}

.badge-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--spine);
}

.badge-sub {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

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

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.step {
  text-align: center;
  padding: 0 0.5rem;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--spine-warm), var(--spine-2));
  color: var(--brass-light);
  border: 1px solid rgba(236, 203, 106, 0.45);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  transform: scale(0.4);
  opacity: 0;
}

@keyframes popIn {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.steps.in-view .step-num {
  animation: popIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.steps.in-view .step:nth-child(1) .step-num { animation-delay: 0.1s; }
.steps.in-view .step:nth-child(2) .step-num { animation-delay: 0.3s; }
.steps.in-view .step:nth-child(3) .step-num { animation-delay: 0.5s; }

.step h3 {
  font-size: 1.1rem;
}

.step p {
  font-size: 0.95rem;
}

/* ---------- Security ---------- */

.security-wrap h2 {
  margin-bottom: 2.6rem;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  text-align: center;
}

.security-grid h3 {
  font-size: 1.1rem;
}

.security-grid p {
  font-size: 0.95rem;
}

/* ---------- CTA ---------- */

.cta-wrap {
  text-align: center;
  max-width: 560px;
}

.cta-wrap p {
  margin-bottom: 1.6rem;
}

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

.site-footer {
  background: linear-gradient(180deg, var(--spine) 0%, var(--spine-2) 100%);
  border-top: 2px solid var(--brass);
  color: #b8c4dc;
  padding: 1.7rem 0;
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--brass-light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: #7dd3d8;
  text-decoration: underline;
}

.footer-inner {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  text-align: center;
}

.footer-sep {
  opacity: 0.5;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-group.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.34s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.42s; }
.reveal-group > *:nth-child(7) { transition-delay: 0.5s; }
.reveal-group > *:nth-child(8) { transition-delay: 0.58s; }
.reveal-group > *:nth-child(9) { transition-delay: 0.66s; }
.reveal-group > *:nth-child(10) { transition-delay: 0.7s; }
.reveal-group > *:nth-child(11) { transition-delay: 0.74s; }
.reveal-group > *:nth-child(12) { transition-delay: 0.78s; }
.reveal-group > *:nth-child(13) { transition-delay: 0.82s; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .compliance-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .compliance-wrap h2 {
    text-align: center;
  }

  .compliance-badge {
    order: -1;
  }
}

/* The nav collapses on its own width, not the page's. Seven links plus the
   download button and the language switch need about 1040px next to the
   wordmark; below that they used to spill past the viewport, run into the
   brand and wrap "Отворен код" onto two lines. Between 1040 and 1200 the
   spacing tightens to buy that room; under 1040 it becomes the drawer.
   Content grids keep their own 720px breakpoint further down. */
@media (max-width: 1200px) {
  .primary-nav {
    gap: 1.05rem;
  }

  .primary-nav a {
    font-size: 0.88rem;
  }

  .lang-switch {
    margin-left: 0.15rem;
    padding-left: 0.7rem;
  }

  .nav-cta {
    padding: 0.5rem 0.95rem;
  }
}

@media (max-width: 1040px) {
  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.2rem;
    display: none;
  }

  .site-header.scrolled .primary-nav {
    top: 60px;
  }

  .primary-nav.open {
    display: flex;
  }

  .primary-nav a {
    font-size: 0.95rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-cta {
    margin-top: 0.8rem;
    padding: 0.7rem 1.1rem;
    text-align: center;
  }

  .lang-switch {
    justify-content: center;
    margin: 0.8rem 0 0;
    padding: 0.8rem 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .compare,
  .steps,
  .security-grid {
    grid-template-columns: 1fr;
  }

  /* Screenshots drop from the desktop 3-up to 2-up on mobile — 3 columns
     at phone widths made each thumbnail too narrow to read. Still not a
     single column: with 24 shots that made for an extremely long scroll.
     The lightbox is one tap away for full-size detail, so small
     thumbnails here are fine. */
  .screenshots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .screenshot figcaption {
    padding: 0.6rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }
}

/* ---------- Ambient flying books across the whole site ---------- */

.book-sky {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

.sky-book {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 46px;
  border-radius: 2px 3px 3px 2px;
  background: linear-gradient(90deg, var(--c2, #142a63) 0%, var(--c1, #1e3a8a) 35%, var(--c1, #1e3a8a) 75%, var(--c2, #142a63) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  will-change: transform;
  filter: drop-shadow(0 10px 9px rgba(20, 42, 99, 0.3));
}

.sky-book::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 7px;
  height: 2px;
  background: var(--brass-light);
  opacity: 0.7;
}

/* ---------- Back-to-top button ---------- */

.to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(236, 203, 106, 0.5);
  background: linear-gradient(160deg, var(--spine-warm), var(--spine-2));
  color: var(--brass-light);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 8px 20px rgba(20, 42, 99, 0.35);
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 120;
  background: var(--spine);
  color: var(--brass-light);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

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

/* ---------- FAQ ---------- */

.faq-wrap {
  max-width: 760px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  margin-bottom: 0.8rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
  border-color: rgba(14, 165, 168, 0.5);
  box-shadow: var(--shadow);
}

.faq-item summary {
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-weight: 600;
  color: var(--spine);
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brass);
  font-size: 1.35rem;
  font-weight: 400;
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
  padding: 0 1.3rem 1.1rem;
  margin: 0;
}

@media (max-width: 720px) {
  .sky-book {
    width: 11px;
    height: 34px;
  }

  .to-top {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 44px;
    height: 44px;
  }
}

/* ---------- Recent-changes list (opensource section) ---------- */

.changelog {
  max-width: 640px;
  margin: 0.4rem auto 1.8rem;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem 1.1rem;
}

.changelog-title {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--spine);
  font-size: 1.05rem;
}

.changelog-item {
  display: flex;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.changelog-ver {
  flex: 0 0 auto;
  min-width: 62px;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--brass-dark);
}

.changelog-more {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--spine);
  text-decoration: none;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  width: 100%;
}

.changelog-more:hover {
  color: var(--brass-dark);
}

@media (max-width: 540px) {
  .changelog-item {
    flex-direction: column;
    gap: 0.2rem;
  }
}

/* ---------- Keyboard focus ----------
   Only the skip link had any focus styling; on the dark hero and the brass
   buttons the UA default ring was effectively invisible. :focus-visible so
   the ring appears for keyboard users without outlining every mouse click.
   The pairing of a dark and a light ring keeps it legible on both the cream
   sections and the dark green hero/footer. */

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero :focus-visible,
.site-footer :focus-visible,
.compare-good :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--brass-light);
  box-shadow: 0 0 0 6px rgba(20, 42, 99, 0.55);
}

/* Inline links inside prose sit below the 24px target size; padding them out
   keeps the sentence intact while giving pointers a bigger hit area. */
.callout a,
.changelog-more {
  padding: 2px 1px;
}

/* ---------- Libraries using the software ---------- */

.libraries-wrap {
  max-width: 720px;
}

.library-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.library-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  margin-bottom: 0.7rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.library-item:hover {
  border-color: rgba(14, 165, 168, 0.5);
  box-shadow: var(--shadow);
}

.library-name {
  font-weight: 600;
  color: var(--spine);
}

.library-site {
  font-size: 0.9rem;
  color: var(--brass-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 2px 1px;
}

.library-site:hover {
  text-decoration: underline;
}

/* The invitation stands in for the list while it is empty, and steps aside
   on its own as soon as a library is added — no second edit to remember. */
.libraries-wrap:has(.library-item) .library-empty {
  display: none;
}

.library-empty {
  text-align: left;
}

/* ---------- Guide / article pages (e.g. /naredba-3-inventarna-kniga/) ---------- */

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0 0 1.6rem;
  text-align: center;
}

.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--spine);
  text-decoration: underline;
}

.guide-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  text-align: center;
  max-width: 840px;
  margin: 0 auto 1.2rem;
}

.guide-body h2 {
  text-align: left;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.guide-body .section h2::after,
.guide-body .section-alt h2::after {
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.guide-body .in-view h2::after {
  transform: scaleX(1);
}

.guide-body p,
.guide-body ul.plain-list {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto 1.1rem;
}

.guide-body ul.plain-list {
  padding-left: 1.3rem;
  list-style: disc;
}

.guide-body ul.plain-list li {
  margin-bottom: 0.5rem;
}

.guide-body h3 {
  font-size: 1.15rem;
  max-width: 760px;
  margin: 1.6rem auto 0.6rem;
}

/* ---------- Hero trust badges ---------- */

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.1rem 0 1.5rem;
}

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

.site-footer {
  padding-top: 2.6rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem 2rem;
  max-width: 1100px;
  margin: 0 auto 1.8rem;
  padding: 0 1.5rem;
  text-align: left;
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0 0 0.8rem;
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  color: #b8c4dc;
}

.footer-tagline {
  max-width: 1100px;
  margin: 0 auto 1.4rem;
  padding: 0 1.5rem;
  font-style: italic;
  opacity: 0.85;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.1rem;
}

@media (max-width: 720px) {
  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
  }

  .footer-col ul {
    align-items: center;
  }

  .footer-tagline {
    text-align: center;
  }
}

@media (max-width: 420px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

.hero-note {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---------- Documentation modal ----------
   Docs open in an on-page dialog instead of a GitHub tab: PDFs are fetched
   as a blob and shown in an iframe, Markdown is fetched as text and run
   through a small client-side parser (see mdToHtml in main.js). */

.doc-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(20, 42, 99, 0.88);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.doc-modal.open {
  opacity: 1;
  visibility: visible;
}

.doc-modal-box {
  width: min(880px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.doc-modal.open .doc-modal-box {
  transform: scale(1);
}

.doc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.doc-modal-title {
  margin: 0;
  font-size: 1.2rem;
}

.doc-modal-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 8px;
}

.doc-modal-close:hover {
  color: var(--bordo);
  background: rgba(122, 46, 53, 0.08);
}

.doc-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.3rem 1.6rem;
}

.doc-modal-status {
  text-align: center;
  color: var(--ink-faint);
  padding: 3rem 0;
}

.doc-modal-status a {
  color: var(--spine);
  font-weight: 600;
}

.doc-modal-pdf {
  width: 100%;
  height: 74vh;
  border: 0;
  display: block;
}

.doc-modal-foot {
  padding: 0.8rem 1.3rem;
  border-top: 1px solid var(--line);
  text-align: right;
  flex-shrink: 0;
}

.doc-modal-github {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brass-dark);
  text-decoration: none;
}

.doc-modal-github:hover {
  text-decoration: underline;
}

/* Prose typography for rendered Markdown */
.doc-modal-md h1,
.doc-modal-md h2,
.doc-modal-md h3,
.doc-modal-md h4 {
  text-align: left;
  margin: 1.4em 0 0.5em;
}

.doc-modal-md h1:first-child,
.doc-modal-md h2:first-child,
.doc-modal-md h3:first-child {
  margin-top: 0;
}

.doc-modal-md h2::after {
  content: none;
}

.doc-modal-md p {
  line-height: 1.7;
  margin: 0 0 1em;
}

.doc-modal-md ul,
.doc-modal-md ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
  color: var(--ink-soft);
  line-height: 1.7;
}

.doc-modal-md li {
  margin-bottom: 0.3em;
}

.doc-modal-md code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.88em;
  background: var(--paper-alt);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

.doc-modal-md pre {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1em;
  overflow-x: auto;
  margin: 0 0 1em;
}

.doc-modal-md pre code {
  background: none;
  padding: 0;
}

.doc-modal-md blockquote {
  margin: 0 0 1em;
  padding: 0.2em 1em;
  border-left: 3px solid var(--brass);
  color: var(--ink-faint);
}

.doc-modal-md hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 1.4em 0;
}

.doc-modal-md a {
  color: var(--spine);
  font-weight: 600;
}

.doc-modal-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 0.9rem;
}

.doc-modal-md th,
.doc-modal-md td {
  border: 1px solid var(--line);
  padding: 0.5em 0.7em;
  text-align: left;
  vertical-align: top;
}

.doc-modal-md th {
  background: var(--paper-alt);
  color: var(--spine);
}

@media (max-width: 640px) {
  .doc-modal-body {
    padding: 1rem;
  }

  .doc-modal-pdf {
    height: 66vh;
  }
}