/* ─────────────────────────────────────────────────────────────────────────────
   Shared stylesheet for the long-form content landing pages
   (/dms-ohne-server, /dms-nas-synology-qnap, /paperless-ngx-installieren).

   The rest of the site keeps its <style> block inline, one per page. These three
   are an exception on purpose: they are a cluster that gets edited together
   (comparison table, disclaimer, FAQ, cross-links), so one file beats three
   copies of the same 250 lines. Tokens, nav, buttons and footer are byte-for-byte
   the ones from ueber.html — this file adds the long-form components on top and
   never redefines the shared visual language.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bone: #F4F1E8; --bone-pale: #FBF9F2; --bone-warm: #EFE9D8;
  --ink: #0F1410; --ink-soft: #4A4F42; --muted: #62695E;
  --sage: #819F80; --sage-dark: #647F63; --sage-deep: #3F5340;
  --sage-pale: #C5D4C4; --sage-mist: #E1E8DD;
  --accent: #C66A3D; --accent-pale: #FBE4DA;
  --hairline: rgba(15,20,16,0.08); --hairline-strong: rgba(15,20,16,0.14);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
/* The guide pages carry a sticky side nav, so their shell is wider than the
   rest of the site: 1280 − 2×28 padding − 240 nav − 56 gap leaves ~920px of
   content column, while the prose itself stays at a readable 760px. */
.lp .wrap, .lp-foot .wrap { max-width: 1280px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
em { font-style: normal; }

/* Nav ─────────────────────────────────────────────────────────────────────── */
/* Scoped to the direct child of <body> ON PURPOSE. These pages carry a SECOND
   <nav> — the table of contents — and a bare `nav` selector handed it the site
   header's sticky/z-index/backdrop, so the TOC glued itself to the top of the
   viewport and fought the real header for the same z-layer. */
body > nav { position: sticky; top: 0; z-index: 50; background: rgba(244,241,232,0.82); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--hairline); }
body > nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; }
body > nav .nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) { font-size: 14px; color: var(--ink-soft); transition: color .15s; }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bone); border: none; border-radius: 999px; padding: 11px 20px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform .15s, background .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); background: #1a2016; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.btn.ghost:hover { background: rgba(15,20,16,0.04); }
.btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) { body > nav .nav-links a:not(.btn) { display: none; } }

/* Head ────────────────────────────────────────────────────────────────────── */
.lp { padding: 68px 0 0; }
.lp-head { max-width: 780px; }
.lp-head h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 5.4vw, 62px); line-height: 1.05; letter-spacing: -0.03em; margin: 16px 0 0; text-wrap: balance; }
.lp-head h1 em { font-style: italic; color: var(--sage-deep); }
.lp-head .lead { font-size: 18.5px; line-height: 1.56; color: var(--ink-soft); margin: 20px 0 0; max-width: 62ch; }
.updated { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--muted); margin: 18px 0 0; }
/* Autorenzeile: das JSON-LD nannte Timo schon, die Seite selbst nicht. Bei einem
   Produkt, dessen Versprechen "nichts verlaesst dein Geraet" lautet, ist die
   benennbare Person das staerkste Vertrauenssignal, das die Seite hat. */
.byline { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 20px 0 0; max-width: 62ch; }
.byline a { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 2px; }
.byline a:hover { color: var(--sage-deep); }

/* Layout: content column + sticky side nav ───────────────────────────────── */
/* The TOC stays FIRST in the DOM (it is a navigation aid, and on a phone it
   belongs above the article); the grid moves it into the right column on wide
   screens. Below 1100px it falls back to a plain block above the text. */
.lp-layout { display: block; }
@media (min-width: 1100px) {
  .lp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 56px; align-items: start; }
  .lp-layout > .toc { grid-column: 2; grid-row: 1; }
  .lp-layout > .prose { grid-column: 1; grid-row: 1; }
}

/* Table of contents ───────────────────────────────────────────────────────── */
.toc { max-width: 780px; margin: 34px 0 0; padding: 22px 26px; background: var(--bone-pale); border: 1px solid var(--hairline); border-radius: 16px; }
.toc h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 14px; }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; columns: 2; column-gap: 34px; }
.toc li { counter-increment: toc; margin: 0 0 9px; break-inside: avoid; }
.toc li a { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); display: flex; gap: 10px; align-items: baseline; }
.toc li a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 10.5px; color: var(--sage); flex: 0 0 auto; }
.toc li a:hover { color: var(--ink); }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* Seitenleisten-CTA ────────────────────────────────────────────────────────
   NUR in der mitlaufenden Spalte ab 1100px. Darunter ist die .toc-Box KEINE
   Seitenleiste, sondern ein Block VOR dem Artikel — ein CTA stuende dort vor
   dem ersten Satz, also ein Pitch, bevor der Text irgendetwas geliefert hat.
   Genau das soll er nicht. Unterhalb 1100px bleibt es beim Schluss-CTA.
   Bewusst als stiller Textlink gebaut, nicht als gefuellter Button: Der Wert
   dieser Seiten ist ihre Glaubwuerdigkeit, und die haelt keine Werbeflaeche
   neben dem Fliesstext aus. */
.side-cta { display: none; }
@media (min-width: 1100px) {
  .side-cta { display: block; margin: 22px 0 0; padding: 16px 0 0 18px;
              border-left: 1px solid var(--hairline); margin-left: 0; }
  .sc-lead { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 10px; }
  .sc-link { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--sage-deep);
             text-decoration: none; transition: color .15s; }
  .sc-link span { display: inline-block; transition: transform .15s; }
  .sc-link:hover { color: var(--ink); }
  .sc-link:hover span { transform: translateX(2px); }
  .sc-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
             color: var(--muted); margin: 7px 0 0; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .sc-link span { transition: none; } }

/* Side-nav form: one column, sticks below the 66px header, scrolls internally
   if a long list ever outgrows the viewport. */
@media (min-width: 1100px) {
  .toc { position: sticky; top: 90px; margin: 44px 0 0; max-width: none; padding: 20px 20px 20px 18px;
         background: transparent; border: none; border-left: 1px solid var(--hairline);
         border-radius: 0; max-height: calc(100vh - 130px); overflow-y: auto; }
  /* Below the header's z-layer — the TOC scrolls with the page, it never covers it. */
  .toc { z-index: 1; }
  .toc ol { columns: 1; }
  .toc li { margin: 0; }
  .toc li a { padding: 6px 0 6px 12px; margin-left: -13px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; transition: color .15s, border-color .15s; }
  .toc li a::before { display: none; }
  /* Scrollspy — set by assets/ratgeber.js; without JS nothing is marked and the
     list still works as plain anchor links. */
  .toc li a.is-active { color: var(--sage-deep); font-weight: 600; border-left-color: var(--sage); }
}

/* Prose ───────────────────────────────────────────────────────────────────── */
.prose { max-width: 760px; margin-top: 8px; }
/* Inside the two-column layout the article fills its grid cell; the text
   itself is held at a readable measure by .prose > * below. */
@media (min-width: 1100px) { .lp-layout > .prose { max-width: none; } .lp-layout > .prose > *:not(.wide):not(.split):not(.cta) { max-width: 760px; } }
.prose > p, .prose > ul, .prose > ol { font-size: 16.5px; line-height: 1.72; color: var(--ink); margin: 18px 0 0; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -0.025em; line-height: 1.2; margin: 58px 0 0; scroll-margin-top: 86px; text-wrap: balance; }
.prose h2:first-child { margin-top: 44px; }
.prose h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; margin: 34px 0 0; scroll-margin-top: 86px; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: 12px; }
.prose a { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--sage-deep); }
/* Buttons stehen INNERHALB von <article class="prose"> (der Abschluss-CTA). Ohne diese
   Ausnahme gewinnt `.prose a` (0,1,1) gegen `.btn` (0,1,0), und der Primär-CTA rendert
   als grün unterstrichener Text auf dunklem Pill — sieht deaktiviert aus. */
.prose a.btn { color: var(--bone); text-decoration: none; }
.prose a.btn:hover { color: var(--bone); }
.prose a.btn.ghost, .prose a.btn.ghost:hover { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 8px 0 0; }
.prose li::marker { color: var(--sage); }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--bone-warm); border: 1px solid var(--hairline); border-radius: 5px; padding: 1.5px 5px; word-break: break-word; }
.prose hr { border: none; border-top: 1px solid var(--hairline); margin: 48px 0 0; }

/* Wide blocks break out of the 760px prose column on large screens ────────── */
/* max-width alone does NOT widen a child of a narrower parent — the explicit
   width is what makes the block overflow .prose. Both .prose and .wrap are
   left-aligned, so no re-centering is needed; the value matches .wrap's own
   content box (1180px max-width minus 2 × 28px padding). */
/* Single-column fallback: break out of the 760px measure as before. */
.wide { max-width: none; width: min(1124px, calc(100vw - 56px)); }
/* Two-column layout: the grid cell already IS the wide area, so the block
   simply fills it — no breakout, or it would slide under the side nav. */
@media (min-width: 1100px) { .lp-layout .wide { width: 100%; } }

/* Comparison tables ───────────────────────────────────────────────────────── */
.tbl-scroll { margin: 24px 0 0; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 16px; background: var(--bone-pale); -webkit-overflow-scrolling: touch; }
/* 520px keeps a two-column table readable on a phone without overflowing the
   758px prose column on desktop; wide tables raise it below. */
table.cmp { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
table.cmp caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 18px 22px 0; }
table.cmp th, table.cmp td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--hairline); line-height: 1.5; }
.wide table.cmp { min-width: 900px; font-size: 13.5px; }
.wide table.cmp th, .wide table.cmp td { padding: 12px 13px; }
.wide table.cmp small { font-size: 11.5px; }
table.cmp thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap; background: var(--bone-warm); }
table.cmp tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp tbody tr:hover { background: rgba(129,159,128,0.06); }
table.cmp tr.is-us { background: var(--sage-mist); }
table.cmp tr.is-us:hover { background: var(--sage-mist); }
table.cmp tr.is-us th { color: var(--sage-deep); }
/* Applies to th as well as td — a row label may carry a qualifier, and without
   the block/normal pair it runs straight into the label text. */
table.cmp small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 3px; white-space: normal; }
.tbl-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 9px 0 0; }
@media (min-width: 900px) { .tbl-hint { display: none; } }

/* Fixierte Zeilenspalte auf schmalen Viewports ─────────────────────────────
   Die Vergleichstabellen sind bis zu 900px breit und scrollen bei 390px
   seitwaerts. Ohne fixierte erste Spalte ist eine weggescrollte Zelle
   bedeutungslos: Man sieht einen Wert und weiss nicht mehr, zu welchem System
   er gehoert. Die erste Spalte ist bereits ein <th>, also kostet das kein
   Markup. */
@media (max-width: 899px) {
  table.cmp tbody th,
  table.cmp thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--bone-pale);
    box-shadow: 1px 0 0 var(--hairline), 7px 0 9px -7px rgba(15,20,16,0.22);
  }
  table.cmp thead th:first-child { background: var(--bone-warm); z-index: 3; }
  /* Eine Zeile mit eigener Flaeche muss sie auch in der fixierten Spalte
     tragen — sonst scheint der durchlaufende Inhalt darunter hindurch. */
  table.cmp tr.is-us th { background: var(--sage-mist); }
  /* Rechte Kante: zeigt an, dass rechts noch etwas steht. `local` blendet den
     Schatten aus, sobald das Ende erreicht ist — ohne JavaScript. */
  .tbl-scroll {
    background-image:
      linear-gradient(to left, var(--bone-pale), rgba(244,241,232,0) 24px),
      linear-gradient(to left, rgba(15,20,16,0.13), rgba(15,20,16,0) 12px);
    background-position: 100% 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%, 12px 100%;
    background-attachment: local, scroll;
  }
}

/* Disclaimer ──────────────────────────────────────────────────────────────── */
.disclaimer { margin: 18px 0 0; padding: 18px 22px; border: 1px dashed var(--hairline-strong); border-radius: 14px; background: transparent; }
.disclaimer p { font-size: 13.5px; line-height: 1.62; color: var(--muted); margin: 0; }
.disclaimer p + p { margin-top: 9px; }
.disclaimer strong { color: var(--ink-soft); font-weight: 600; }

/* Pro / contra cards ──────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 0; }
.card { padding: 24px 26px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--bone-pale); }
.card h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; }
.card h3 .ic { width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; line-height: 1; font-weight: 700; }
.card.pro h3 .ic { background: var(--sage-mist); color: var(--sage-deep); }
.card.con h3 .ic { background: var(--accent-pale); color: var(--accent); }
.card ul { list-style: none; padding: 0; margin: 14px 0 0; }
.card li { font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); margin: 0 0 11px; padding-left: 18px; position: relative; }
.card li:last-child { margin-bottom: 0; }
.card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; }
.card.pro li::before { background: var(--sage); }
.card.con li::before { background: var(--accent); }
.card li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }

/* Callout ─────────────────────────────────────────────────────────────────── */
.callout { margin: 30px 0 0; padding: 22px 26px; background: var(--bone-pale); border: 1px solid var(--hairline); border-radius: 16px; border-left: 3px solid var(--sage); }
.callout.warn { border-left-color: var(--accent); }
.callout .co-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.callout p { margin: 9px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.callout p strong { color: var(--ink); font-weight: 600; }
.callout a { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Code ────────────────────────────────────────────────────────────────────── */
.codeblock { margin: 22px 0 0; border: 1px solid var(--hairline-strong); border-radius: 14px; overflow: hidden; background: #14180F; }
.codeblock .cb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(244,241,232,0.12); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,241,232,0.6); }
.codeblock pre { margin: 0; padding: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.codeblock code { font-family: var(--mono); font-size: 13px; line-height: 1.65; color: #E4E9DC; background: none; border: none; padding: 0; white-space: pre; }
.codeblock .c { color: #7E8C77; }
.codeblock .k { color: #B9CDB6; }

/* Numbered steps ──────────────────────────────────────────────────────────── */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 26px 0 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 0 52px; margin: 0 0 30px; }
.steps > li:last-child { margin-bottom: 0; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; background: var(--sage-mist); color: var(--sage-deep); font-family: var(--mono); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.steps > li > h3, .steps > li > h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 4px 0 0; font-size: 17px; }
.steps > li > p { font-size: 16px; line-height: 1.68; margin: 8px 0 0; color: var(--ink); }
.steps > li > ul { margin: 10px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); padding-left: 20px; }
@media (max-width: 560px) { .steps > li { padding-left: 0; } .steps > li::before { position: static; margin-bottom: 10px; } }

/* FAQ ─────────────────────────────────────────────────────────────────────── */
.faq { margin: 24px 0 0; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 27px; width: 9px; height: 9px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--sage-deep); }
.faq .fa { padding: 0 34px 22px 0; }
.faq .fa p { font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); margin: 0; }
.faq .fa p + p { margin-top: 12px; }
.faq .fa a { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 2px; }
.faq .fa strong { color: var(--ink); font-weight: 600; }

/* Screenshots ─────────────────────────────────────────────────────────────── */
/* Same centering contract as the blog's figure.post-fig (binding since 2026-07-22):
   the width variants only change max-width, never the centering. Ship screenshots
   at 2x their display width. */
figure.lp-fig { margin: 26px 0 0; }
figure.lp-fig img { display: block; width: 100%; max-width: 520px; height: auto; margin-left: auto; margin-right: auto; border: 1px solid var(--hairline); border-radius: 14px; }
figure.lp-fig.narrow img { max-width: 300px; }
figure.lp-fig.half img { max-width: 360px; }
figure.lp-fig.medium img { max-width: 400px; }
figure.lp-fig.wide-shot img { max-width: 720px; }
figure.lp-fig figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 10px auto 0; max-width: 52ch; text-align: center; }

/* Placeholder standing in for a screenshot that is not shot yet. Replacing one is
   swapping the .ph div for an <img> — the figure and figcaption stay as they are. */
figure.lp-fig .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin: 0 auto; padding: 22px; text-align: center; background: repeating-linear-gradient(135deg, var(--bone-pale) 0 12px, var(--bone-warm) 12px 24px); border: 1px dashed var(--hairline-strong); border-radius: 14px; }
figure.lp-fig.narrow .ph { max-width: 300px; aspect-ratio: 9 / 16; }
figure.lp-fig.half .ph { max-width: 360px; aspect-ratio: 9 / 16; }
figure.lp-fig.medium .ph { max-width: 400px; }
figure.lp-fig.wide-shot .ph { max-width: 720px; }
figure.lp-fig .ph svg { width: 26px; height: 26px; fill: none; stroke: var(--sage); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
figure.lp-fig .ph .ph-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
figure.lp-fig .ph .ph-what { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }

/* CTA ─────────────────────────────────────────────────────────────────────── */
.cta { max-width: 760px; margin: 56px 0 0; padding: 32px 34px; background: var(--sage-mist); border: 1px solid var(--sage-pale); border-radius: 18px; }
.cta .eyebrow { color: var(--sage-deep); }
.cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -0.025em; margin: 10px 0 8px; }
.cta p { font-size: 16px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 20px; max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); margin: 14px 0 0; }

/* Cross-links ─────────────────────────────────────────────────────────────── */
.crosslinks { max-width: 1124px; margin: 56px 0 0; }
.crosslinks > .eyebrow { display: block; margin-bottom: 16px; }
.xl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.xl-card { display: block; padding: 24px 26px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--bone-pale); transition: transform .15s, border-color .15s; }
.xl-card:hover { transform: translateY(-2px); border-color: var(--sage-pale); }
.xl-card .xl-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.xl-card h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -0.02em; line-height: 1.22; margin: 10px 0 0; }
.xl-card p { font-size: 14.5px; line-height: 1.58; color: var(--muted); margin: 9px 0 0; }
.xl-card .xl-go { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--sage-dark); }

/* Footer ──────────────────────────────────────────────────────────────────── */
footer { background: var(--ink); color: rgba(244,241,232,0.65); padding: 64px 0 36px; margin-top: 72px; }
.foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(244,241,232,0.1); }
.foot-brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 19px; color: var(--bone); }
.foot-brand img { width: 28px; height: 28px; }
.foot-blurb { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(244,241,232,0.55); max-width: 30ch; }
footer h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,241,232,0.58); margin: 4px 0 16px; font-weight: 500; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
footer ul a { font-size: 14px; color: rgba(244,241,232,0.7); transition: color .15s; }
footer ul a:hover { color: var(--bone); }
.foot-bottom { padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: rgba(244,241,232,0.58); }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }
.trust-badges{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0;}
.tbadge{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;font-family:var(--mono);font-size:12px;letter-spacing:0.03em;background:rgba(244,241,232,0.05);color:rgba(244,241,232,0.86);border:1px solid rgba(244,241,232,0.18);}
.tbadge .tb-ic{width:15px;height:15px;fill:none;stroke:rgba(244,241,232,0.86);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.tb-flag{width:15px;height:11px;border-radius:2px;flex:0 0 auto;background:linear-gradient(#1a1a1a 0 33.34%,#D7000F 33.34% 66.67%,#FFCC00 66.67% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.14);}
