/* ===== Local Font: Inter (self-hosted, DSGVO-konform) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900.ttf') format('truetype');
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Accessibility: Skip Navigation ===== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
  color: #fff;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Accessibility: Focus Styles ===== */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===== Accessibility: Screen Reader Only ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Accessibility: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  /* Palette taken from stardock.com: a light page, white cards, one blue for
     links and one green reserved for "buy". The old dark indigo theme is in
     _build/ history if it is ever wanted back. */
  --primary: #1061ad;          /* links, headings on light */
  --primary-light: #177fd4;
  --primary-dark: #0b4a86;
  --accent: #01a2fd;           /* highlights on dark bands */
  --accent-light: #17c0ff;
  --buy: #27ba1c;              /* only ever the purchase action */
  --buy-dark: #1f9a16;

  /* Read off stardock.com rather than guessed: the header is a blue gradient,
     not a dark bar, and the section bands are these exact greys. */
  --bg: #f6f6f6;               /* the page itself */
  --bg-band: #eaeaea;          /* alternating section band */
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-dark: #0d2731;          /* the one dark band */
  --nav-top: #0d4c8b;          /* header gradient, top */
  --nav-bottom: #1061ad;       /* header gradient, bottom */
  --nav-rule: #006fda;         /* the 1px line under it */
  --nav-hover: #0a3d70;
  --bg-footer: #666666;
  --bg-footer-accent: #444444;

  --text: #2d2d2d;
  --text-muted: #5a6270;
  --text-heading: #1a1a1a;
  --text-on-dark: #e8eef1;
  --text-on-dark-muted: #9fb3bd;

  --border: #d8d8d8;
  --border-strong: #cccccc;

  --gradient-1: linear-gradient(135deg, #1061ad 0%, #01a2fd 100%);
  --gradient-2: linear-gradient(135deg, #177fd4 0%, #17c0ff 100%);

  --shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);

  --radius: 4px;               /* stardock is nearly square-cornered */
  --radius-sm: 3px;
  --nav-height: 50px;
  --container: 1420px;
  --transition: 0.2s ease;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding-top: var(--nav-height);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

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

img {
  max-width: 100%;
  display: block;
}

/* ===== Typography ===== */
h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* A narrower measure for pages that are mostly prose. A 1420px column of
   running text is unreadable. */
.legal-page .container,
.product-body,
.section-header {
  max-width: 78ch;
}

.section {
  padding: 3.5rem 0;
}

/* Full-bleed alternating bands, the way stardock stacks its home page:
   grey, white, grey, one dark. */
.band { padding: 3.5rem 0; background: var(--bg); }
.band-alt { background: var(--bg-band); }
.band-white { background: #fff; }
.band-dark { background: var(--bg-dark); color: var(--text-on-dark); }

.band > .container > h2,
.band-heading {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1.75rem;
  color: var(--text-heading);
}

/* `.band > .container > h2` scores (0,2,1); a plain `.band-dark h2` only
   scores (0,1,1) and loses however late it appears, so the override has to
   match the same shape and then win on source order. */
.band-dark h2,
.band-dark h3,
.band-dark > .container > h2,
.band-dark .band-heading { color: #fff; }
.band-dark p { color: var(--text-on-dark-muted); }
.band-dark a { color: var(--accent-light); }

.section-header {
  text-align: center;
  margin: 0 auto 2.5rem;
}

.section-header p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 1rem auto 0;
  font-size: 1.1rem;
}

/* Was a pale tint carrying --primary-light text: 2.9:1 on the light page.
   Solid primary at the same size clears 7:1 and reads as a label rather than
   a washed-out pill. */
.badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  border: none;
}

/* ===== Navigation ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: linear-gradient(var(--nav-top) 0%, var(--nav-bottom) 100%);
  border-bottom: 1px solid var(--nav-rule);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--container);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}

.logo-icon {
  width: 34px;
  height: 34px;
  background: var(--gradient-1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  font-weight: 800;
}

.logo-img {
  height: 32px;          /* the bar is 50px tall, as stardock's is */
  width: auto;
  display: inline-block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

/* Full-height hover targets, the way a desktop-software site does its top
   bar: the whole cell lights, not just the word. */
.nav-links a {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: 0 1.1rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  background: var(--nav-hover);
  color: #fff;
}

.nav-links a.active {
  box-shadow: inset 0 -3px 0 var(--accent-light);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

/* Language switch, at the right-hand end of the bar. `margin-left: auto` on
   the navigation keeps the whole group packed to the right, the way the bar
   looked when the list was the last element in it. */
.navbar .container > .nav-links {
  margin-left: auto;
}

.lang-switch {
  display: flex;
  align-items: center;
}

.lang-switch a {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: 0 0.65rem;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: background var(--transition), color var(--transition);
}

.lang-switch a + a {
  border-left: 1px solid var(--nav-rule);
}

.lang-switch a:hover {
  background: var(--nav-hover);
  color: #fff;
}

.lang-switch a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--accent-light);
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}

/* ===== Hero: one featured product, image left, copy right ===============
   Stardock leads with a single product on a full-bleed band rather than a
   slogan. Same idea here, minus the carousel -- thirteen products and one
   person do not need rotating slides. */
/* Stardock's featured slot sits on the page background, not on a dark band --
   the product art carries the contrast. Same here, and it has a second
   benefit: the symbolic images run bright to their edges, and a light band
   carries them better than a dark one would. */
.hero {
  background: var(--bg);
  color: var(--text);
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  min-height: 420px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.hero-shot {
  justify-self: center;
}

.hero-shot { width: 100%; }

.hero-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--text-heading);
  margin: 0 0 0.9rem;
  font-weight: 700;
}

.hero p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 1.75rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Pages without a featured image reuse the same band as a plain
   page header. */
.hero-plain .container {
  display: block;
  min-height: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  max-width: var(--container);
}

.hero-plain h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.hero-plain p { margin-bottom: 0; }

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .hero-buttons { justify-content: center; }
  .hero p { margin-left: auto; margin-right: auto; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
  text-decoration: none;
}

/* Blue means "go and read"; green is kept for the one action that costs
   money, so a buy button is never mistaken for a link. */
.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
}

.btn-buy,
.btn-purchase {
  background: var(--buy);
  color: #fff;
}

.btn-buy:hover:not([disabled]),
.btn-purchase:hover {
  background: var(--buy-dark);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--primary);
  background: rgba(16, 97, 173, 0.06);
  color: var(--primary-dark);
}

.band-dark .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}

.band-dark .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

/* ===== Product tiles: an image, a name, one line =======================
   Four across at the full container width, which is what a landscape image
   wants -- the same shape stardock gives its own product cards. */
/* auto-fit rather than auto-fill, and a capped track rather than 1fr: empty
   columns collapse instead of holding space, so a row that does not fill the
   width sits centred under its centred heading rather than hugging the left
   edge. Five across at the full container width. */
/* Flex rather than grid, deliberately. `justify-content: center` on a grid
   centres the track list as a whole but still packs a partial last row from
   its first track, so thirteen tiles left the thirteenth stranded on the left.
   Flex centres the items of each row, including the last one. */
.product-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 1.5rem;
}

.product-tile {
  flex: 0 1 300px;
}

.product-tile {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.product-tile:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  color: inherit;
}

/* The symbolic images are full-bleed illustrations with no frame of their own,
   so the page draws one. On a white card a light-edged picture would otherwise
   have no boundary at all. */
.symbol {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1344 / 768;
  object-fit: cover;
  margin: 0 0 1rem;
  border: 1px solid #000;
}

/* Products without an image yet hold exactly the same space, so a row never
   goes ragged while the set is incomplete. */
.symbol-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
  border-style: dashed;
}

.product-tile h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--text-heading);
}

.product-tile p {
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
  flex: 1 1 auto;
  line-height: 1.5;
}

.product-tile .tile-cta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.product-tile:hover .tile-cta { color: var(--primary-dark); }

/* Price and call to action share the bottom line of a tile, so the prices
   line up down a column however long the taglines above them run. */
.product-tile .tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.product-tile .tile-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
}

/* Belongs next to any price shown to a consumer: that it is paid once, and
   why no VAT is broken out of it. */
.price-note {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* On the tools index the note stands on its own between the last band and
   the footer, with no band padding to sit inside. The spacing goes on the
   paragraph rather than the container: .container sets `padding` as a
   shorthand in a later media query, which would silently zero a
   padding-bottom set here. */
.price-note-block .price-note {
  margin-bottom: 3rem;
}

.band-dark .product-tile {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.band-dark .product-tile h3 { color: #fff; }
.band-dark .product-tile p { color: var(--text-on-dark-muted); }
.band-dark .product-tile .tile-cta { color: var(--accent-light); }
.band-dark .product-tile .tile-price { color: #fff; }
.band-dark .price-note { color: var(--text-on-dark-muted); }

/* Lede under a band heading, and the three-step purchase explainer. */
.band-lede {
  max-width: 70ch;
  margin: -0.75rem 0 2rem;
  color: var(--text-muted);
  font-size: 1rem;
}

.band-dark .band-lede { color: var(--text-on-dark-muted); }

.step-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.step {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #04222c;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 0.85rem;
}

.step h3 { font-size: 1.02rem; margin: 0 0 0.4rem; }
.step p { margin: 0; font-size: 0.9rem; }

/* The featured box in the hero is bigger than a tile's. */
.hero-symbol {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1344 / 768;
  object-fit: cover;
  border: 1px solid #000;
}

.hero-shot .symbol-missing { width: 100%; }

/* ===== Feature Cards ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-1);
  opacity: 0;
  transition: opacity var(--transition);
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(16,97,173,0.3);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card h3 {
  margin-bottom: 0.75rem;
  white-space: nowrap;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ===== About / Info Section ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-visual {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.about-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-1);
  opacity: 0.05;
}

.about-visual-content {
  position: relative;
  text-align: center;
}

/* The square panel used to be filled by one large emoji. A number and a
   monogram carry it just as well and do not look machine-made. */
.about-visual-content .big-figure {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.about-visual-content p {
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 500;
}

.about-text h2 {
  margin-bottom: 1.5rem;
}

.about-text p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.about-text .highlight-list {
  list-style: none;
  margin-top: 1.5rem;
}

.about-text .highlight-list li {
  padding: 0.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text);
}

.about-text .highlight-list li .check {
  color: var(--accent);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ===== Stats ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.stat-item {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1rem;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: var(--gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

/* ===== CTA Section ===== */
.cta-section {
  padding: 5rem 0;
}

.cta-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-1);
  opacity: 0.04;
}

.cta-box h2 {
  margin-bottom: 1rem;
  position: relative;
}

.cta-box p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  position: relative;
}

.cta-box .btn {
  position: relative;
}

/* ===== Footer ===== */
.footer {
  background: var(--bg-footer);
  color: #f0f0f0;
  margin-top: auto;
  padding: 2.5rem 0 0;
}

.footer a { color: #f0f0f0; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2rem;
}

.footer-brand p {
  color: #f0f0f0;
  font-size: 0.88rem;
  max-width: 34ch;
  margin-top: 0.85rem;
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.9rem;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }

.footer-col ul a {
  font-size: 0.88rem;
  color: #f0f0f0;
}

.footer-col ul a:hover { color: #fff; }

/* The darker strip stardock puts the copyright on. */
/* The strip sits outside .container so it can reach the window edges without
   a 100vw trick -- 100vw counts the scrollbar and would add 8px of sideways
   scroll on every page. */
.footer-bottom {
  background: var(--bg-footer-accent);
  padding: 1.1rem 0;
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: #eaeaea;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-bottom-links a {
  font-size: 0.82rem;
  color: #eaeaea;
}

.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.legal-page {
  padding: 8rem 0 4rem;
}

.legal-page .container {
  max-width: 820px;
}

.legal-page h1 {
  margin-bottom: 0.5rem;
}

.legal-page .legal-subtitle {
  color: var(--text-muted);
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

.legal-page h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.legal-page h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal-page h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-page p,
.legal-page ul,
.legal-page address {
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  font-style: normal;
}

.legal-page ul {
  padding-left: 1.5rem;
}

.legal-page ul li {
  margin-bottom: 0.35rem;
}

.legal-page strong {
  color: var(--text);
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-visual {
    aspect-ratio: auto;
    padding: 2.5rem;
  }

  /* .footer-grid steps down in the footer block itself (4 -> 2 -> 1); a second
     rule here would jump straight to one column and win by source order. */

  .hero .container { min-height: 0; }
}

@media (max-width: 768px) {
  /* The drop-down panel belongs to the dark bar above it, so it is opaque and
     the same colour -- a translucent panel over a light page made the links
     unreadable. */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--bg-nav);
    flex-direction: column;
    padding: 0.5rem 0;
    gap: 0;
    border-bottom: 1px solid #000;
  }

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

  /* The navigation leaves the bar on small screens, so the switch has to pack
     itself against the hamburger instead of drifting into the middle of it. */
  .lang-switch {
    margin-left: auto;
    margin-right: 0.5rem;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: flex;
    height: auto;
    width: 100%;
    padding: 0.85rem 2rem;
    border-bottom: 1px solid #2e2e2e;
  }

  .nav-links a.active { box-shadow: inset 3px 0 0 var(--accent); }

  .hamburger {
    display: flex;
  }

  .container { padding: 0 1.25rem; }

  .product-row {
    gap: 1.25rem 1rem;
  }

  .product-tile { flex: 1 1 240px; }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .cta-box {
    padding: 2.5rem 1.5rem;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links { justify-content: center; }
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .stats-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Product and category pages
   Added for the per-product pages under /tools/. Everything above is
   unchanged; this section only adds, so the existing pages render as before.
   ========================================================================== */

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

.category-card {
  display: block;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}

.category-card:hover {
  border-color: rgba(16,97,173,0.3);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.category-card h3 { margin: 0 0 0.5rem; }
.category-card p { margin: 0 0 0.75rem; }

.category-card .category-count {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}

/* --- a single product ---------------------------------------------------- */

.product-hero { padding: 4rem 0 2rem; }
.product-hero .product-emoji { font-size: 4rem; display: block; margin-bottom: 1rem; }
.product-hero h1 { margin: 0 0 1rem; }

.product-hook {
  font-size: 1.15rem;
  max-width: 46rem;
  margin: 0 auto;
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; }
}

.product-body h2 { margin-top: 2.5rem; }
.product-body h2:first-child { margin-top: 0; }

.product-benefits { list-style: none; padding: 0; }
.product-benefits li { padding: 0.5rem 0 0.5rem 1.9rem; position: relative; }
.product-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #059669;
  font-weight: 700;
}

.use-case {
  border-left: 3px solid rgba(16,97,173,0.35);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.25rem 0;
}

.use-case h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.use-case p { margin: 0; }

.product-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
}

.product-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.product-facts li:last-child { border-bottom: none; }
.product-facts .fact-label { color: var(--text-muted, #6b7280); }

.product-shot {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1.5rem 0 0.5rem;
}

.product-shot-caption {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  margin-top: 0;
}

/* --- the buy block, filled in by assets/buy.js --------------------------- */

.buy-panel {
  position: sticky;
  top: 6rem;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .buy-panel { position: static; }
}

.buy-title { margin: 0 0 0.6rem; font-size: 1.15rem; }
.buy-lede { margin: 0 0 1.25rem; font-size: 0.95rem; }
.buy-form { margin: 0 0 1rem; }
.btn-buy { width: 100%; }
.btn-buy[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Section 356(5) BGB consent. Deliberately plain and full size: it has to be
   read and ticked, not skimmed past. */
.buy-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.buy-consent input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  cursor: pointer;
}

.buy-consent label { cursor: pointer; }
.buy-consent a { text-decoration: underline; }

.buy-consent-hint {
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  /* Was a negative top margin, which pulled this paragraph up into the buy
     button above it. It sits below the button, so it needs space, not less. */
  margin: 0.85rem 0 0;
}

.buy-warning {
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
  margin: 0 0 1rem;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
}

/* The spam-folder warning. Louder than .buy-warning on purpose: it is the one
   piece of fine print whose being missed produces a buyer who thinks they paid
   for nothing. Amber and a thick left rule, not red -- nothing has gone wrong,
   and a red box above a purchase button reads as an error. */
.buy-spam {
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1.1rem;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-left: 4px solid #d97706;
  border-radius: var(--radius-sm, 3px);
  background: rgba(217, 119, 6, 0.09);
  color: var(--text, #2d2d2d);
}

.buy-spam strong { color: #92400e; }

.buy-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}

.buy-notes li { padding: 0.3rem 0; }
/* The download card replaces the old source link. It is the way into the
   seven-day trial, so it is a solid block rather than an outline button, and
   it names the file: people about to run an installer should see what they
   are getting before they click. */
.download-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  transition: background var(--transition), box-shadow var(--transition),
              transform var(--transition);
}

.download-card:hover,
.download-card:focus-visible {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: #fff;
}

.download-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 1.2rem;
  line-height: 1;
}

.download-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.download-title {
  font-weight: 700;
  font-size: 1rem;
}

.download-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
}

.download-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  /* 0.75 alpha measured 4.29:1 on the button blue and failed AA at this
     size; 0.9 clears it with room to spare. */
  color: rgba(255,255,255,0.9);
  overflow-wrap: anywhere;
}

.breadcrumb {
  font-size: 0.9rem;
  padding: 1.5rem 0 0;
  color: var(--text-muted, #6b7280);
}

.breadcrumb a { color: inherit; }
.breadcrumb span { margin: 0 0.4rem; }

.buy-tax {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  margin: -0.5rem 0 1rem;
}