:root {
  --bg: #f7f8fa;
  --bg-elevated: #ffffff;
  --text: #14171f;
  --text-muted: #565b66;
  --border: #e4e6ea;
  --blue-1: #4a8cff;
  --blue-2: #1550c9;
  --card-shadow: 0 1px 2px rgba(20, 23, 31, 0.04), 0 8px 24px rgba(20, 23, 31, 0.06);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --code-bg: #eef1f6;
}

:root[data-theme="dark"] {
  --bg: #0d0f14;
  --bg-elevated: #171a21;
  --text: #eef0f4;
  --text-muted: #9aa0ac;
  --border: #262a33;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
  --code-bg: #1e222b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f14;
    --bg-elevated: #171a21;
    --text: #eef0f4;
    --text-muted: #9aa0ac;
    --border: #262a33;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
    --code-bg: #1e222b;
  }
}

* { box-sizing: border-box; }

/* Long compounds in Russian and German ("конфиденциальности",
   "Datenschutzrichtlinie") are wider than a phone at heading sizes and pushed
   the whole page into horizontal scroll. Break them rather than the layout;
   hyphens: auto works because every page carries a real lang attribute. */
h1, h2, h3, h4, p, li, dt, dd, td, th, figcaption { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  text-decoration: none;
}

.brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Wrapping is the safety net: translated section labels are much longer than
     the English ones (Russian's nav is ~200px wider), and without this the nav
     pushed the whole page into horizontal scroll at tablet widths. */
  flex-wrap: wrap;
  gap: 28px;
  row-gap: 10px;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a:hover { color: var(--text); }

.nav-cta {
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600 !important;
}

/* Language picker.

   Deliberately a bare <details> with no JavaScript: if this stylesheet is
   served stale from the 4-hour edge cache, the menu degrades to the browser's
   own disclosure widget instead of disappearing — visibility never depends on
   CSS that might not have arrived. */
.langpick { position: relative; order: 1; }
.nav-cta { order: 2; }

.langpick summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}
.langpick summary::-webkit-details-marker { display: none; }
.langpick summary:hover { color: var(--text); }
.langpick .globe { font-size: 13px; }

.langpick-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}
.nav-links .langpick-menu a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: 14px;
}
.nav-links .langpick-menu a:hover { background: var(--code-bg); color: var(--text); }
.nav-links .langpick-menu a[aria-current="true"] { color: var(--text); font-weight: 600; }

/* Language-suggestion banner, injected by assets/lang.js. It only ever exists
   when that script ran, so a stale stylesheet degrades it to a plain line of
   text rather than hiding something the user was meant to see. */
.langbar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.langbar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.langbar a {
  color: var(--blue-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.langbar a:hover { text-decoration: underline; }
.langbar-close {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.langbar-close:hover { color: var(--text); background: var(--code-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .langbar a { color: #9dc0ff; }
}

/* Hero */
.hero {
  padding: 96px 0 64px;
  text-align: center;
  position: relative;
  /* The ::before glow below is a fixed 900px wide, so on any viewport narrower
     than that it made the whole page scroll sideways — clip the decoration
     rather than let it define the page width. `clip` and not `hidden`: hidden
     would turn the hero into a scroll container. */
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 480px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-1) 22%, transparent), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero img.icon {
  width: 108px;
  height: 108px;
  border-radius: 26px;
  box-shadow: var(--card-shadow);
  margin-bottom: 28px;
}

.hero h1 {
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 750;
}

.hero p.lead {
  font-size: 20px;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 36px;
}

.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.btn-primary {
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--blue-2) 45%, transparent);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}

/* Official Apple badge artwork — do not recreate or restyle the badge itself.
   The black/white swap is done in markup by <picture> + a prefers-color-scheme
   <source>, deliberately NOT here: this stylesheet is edge-cached for 4 hours,
   and a stale copy of a CSS-based swap would show both badges at once. */
.appstore-badge {
  display: inline-block;
  line-height: 0;
  transition: transform 0.15s ease;
}

.appstore-badge:hover { transform: translateY(-1px); }

.appstore-badge img {
  display: block;
  height: 48px;
  width: auto;
}

.fine {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.fine a { color: var(--text-muted); }

/* Privacy banner */
.privacy-banner {
  padding: 20px 0;
  background: color-mix(in srgb, var(--blue-1) 8%, var(--bg-elevated));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.privacy-banner p {
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  font-size: 15px;
  font-weight: 550;
  color: var(--text);
}

.privacy-banner .lock { margin-right: 4px; }

/* Sections */
section { padding: 64px 0; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }

.section-head h2 {
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  font-weight: 700;
}

.section-head p { color: var(--text-muted); font-size: 17px; margin: 0; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-2);
  background: color-mix(in srgb, var(--blue-1) 14%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

:root[data-theme="dark"] .eyebrow,
@media (prefers-color-scheme: dark) { .eyebrow { color: #9dc0ff; } }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--card-shadow);
}

.card .glyph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--blue-1) 20%, transparent), color-mix(in srgb, var(--blue-2) 20%, transparent));
  margin-bottom: 16px;
}

.card h3 {
  font-size: 17px;
  margin: 0 0 8px;
  font-weight: 650;
}

.card p {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0;
}

/* Showcase screenshots */
.showcase-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.shot {
  margin: 0;
  text-align: center;
}

.shot img {
  display: block;
  height: 420px;
  width: auto;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.shot figcaption {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .shot img { height: 340px; }
}

@media (max-width: 640px) {
  .shot img { height: auto; width: 100%; }
}

/* Vendor strip */
.vendor-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip {
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}

.stat b {
  display: block;
  font-size: 30px;
  font-weight: 750;
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat span {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* Download panel */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 48px;
  text-align: center;
}

.panel h2 { margin: 0 0 10px; font-size: 30px; font-weight: 750; }
.panel p.lead { margin: 0 0 28px; }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

footer .flinks {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
}

footer a:hover { color: var(--text); }

footer .copy { color: var(--text-muted); font-size: 13.5px; }

/* Simple content pages (privacy / support) */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.doc h1 { font-size: 36px; margin-bottom: 4px; }
.doc .updated { color: var(--text-muted); font-size: 14px; margin-bottom: 40px; }
.doc h2 { font-size: 21px; margin-top: 40px; margin-bottom: 12px; }
.doc p, .doc li { color: var(--text); font-size: 15.5px; }
.doc p.muted { color: var(--text-muted); }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.doc th, .doc td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.doc th { color: var(--text-muted); font-weight: 600; font-size: 13px; }

.doc code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
}

.doc h3 { font-size: 17px; margin-top: 28px; margin-bottom: 8px; }

.doc pre {
  background: var(--code-bg);
  padding: 12px 16px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 16px 0;
}

.doc pre code {
  background: none;
  padding: 0;
  font-size: 13.5px;
}

.doc a { color: var(--blue-2); }

@media (prefers-color-scheme: dark) {
  .doc a { color: #9dc0ff; }
}

.faq dt {
  font-weight: 650;
  margin-top: 24px;
  font-size: 16px;
}

.faq dd {
  margin: 8px 0 0;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 38px; }
  .nav-links { gap: 16px; }
}

@media (max-width: 900px) {
  /* Globe only — the language name is the widest item in several locales. */
  .langpick .langname { display: none; }
}

/* Viewport width each language needs to keep the nav on one line. Re-measured
   2026-09-18, after the "Other clouds" link was added to the four sub-pages
   (support, troubleshooting, privacy, eula), which now carry the widest bar —
   the home page does not link the rclone guide from the nav for exactly this
   reason, it links it from the vendor list instead. Widths at which the bar
   starts to wrap: zh-Hans 570, zh-Hant 570, ko 745, en 920, es 973, de 975,
   fr 980, pt 995, ja 1025, ru 1050; each threshold sits just above its own.
   Below its own threshold a language drops the section links instead of
   wrapping the bar onto two rows; the ones that fit below 900 are covered by
   the 640px floor further down, since the picker label and the nav gap both
   shrink before then. Re-measure these if you edit a nav label in
   i18n/<locale>.json or add an item: sweep viewport widths in an iframe and
   flag any width where .nav-links is taller than one row. */
@media (max-width: 1055px) { html[lang="ru"] .nav-links a:not(.nav-cta) { display: none; } html[lang="ru"] { --burger: block; } }
@media (max-width: 1030px) { html[lang="ja"] .nav-links a:not(.nav-cta) { display: none; } html[lang="ja"] { --burger: block; } }
@media (max-width: 1000px) { html[lang="es"] .nav-links a:not(.nav-cta) { display: none; } html[lang="es"] { --burger: block; } }
@media (max-width: 1000px) { html[lang="pt"] .nav-links a:not(.nav-cta) { display: none; } html[lang="pt"] { --burger: block; } }
@media (max-width: 985px)  { html[lang="fr"] .nav-links a:not(.nav-cta) { display: none; } html[lang="fr"] { --burger: block; } }
@media (max-width: 980px)  { html[lang="de"] .nav-links a:not(.nav-cta) { display: none; } html[lang="de"] { --burger: block; } }
/* English still holds out longest because the picker label (900px) and the nav
   gap (860px, then 720px) shrink first — but the extra link moved its own
   threshold up out of that band. */
@media (max-width: 925px)  { html[lang="en"] .nav-links a:not(.nav-cta) { display: none; } html[lang="en"] { --burger: block; } }

/* Never collapsed with them: this outranks every rule above on specificity,
   so the picker stays usable at any width without repeating it per language. */
.nav-links details.langpick .langpick-menu a { display: block; }

/* Hamburger: the same section links again, for the widths where the row above
   is hidden. A bare <details> like the picker and for the same reason — no
   JavaScript, and a stylesheet served stale from the edge cache degrades it to
   the browser's own disclosure widget rather than hiding the links outright.
   The icon is inline SVG so it survives that degradation too.

   One custom property drives the whole thing, and it is set in the very same
   media queries that hide the inline row, so the two cannot disagree about the
   width at which a language collapses. Default none: no query, no hamburger. */
.navmenu { display: var(--burger, none); position: relative; order: 0; }
.navmenu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary:hover { color: var(--text); }

.navmenu-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}
/* Same shape as the picker's own override, and the same job: outrank every
   per-language rule that hides .nav-links a, including the 640px floor. */
.nav-links details.navmenu .navmenu-menu a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: 14px;
}
.nav-links details.navmenu .navmenu-menu a:hover { background: var(--code-bg); color: var(--text); }

@media (max-width: 720px) {
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 13px; }
  .nav-cta { padding: 7px 13px; }
}

@media (max-width: 640px) {
  /* Floor: a language with no rule of its own above still collapses here. */
  .nav-links a:not(.nav-cta) { display: none; }
  :root { --burger: block; }
}

@media (max-width: 560px) {
  /* A three-column table has a min-content width wider than a phone, so it
     pushed the whole page into horizontal scroll. Let the table scroll inside
     itself instead; the page body never does. */
  .doc table { display: block; overflow-x: auto; }
  .grid { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 32px; }
  .panel { padding: 32px 20px; }
  footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* --- comparison page (compare.html) --- */
.doc.doc-wide { max-width: 960px; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0 16px;
  border-radius: var(--radius-lg);
}

.doc .compare {
  width: 100%;
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  font-size: 14.5px;
}

.doc .compare th,
.doc .compare td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 450;
  font-size: 14.5px;
}

.doc .compare thead th {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 650;
  white-space: nowrap;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.doc .compare tbody th[scope="row"] {
  color: var(--text);
  font-weight: 650;
  font-size: 15px;
  min-width: 220px;
}

.doc .compare .rowsub {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 450;
  color: var(--text-muted);
  line-height: 1.45;
}

.doc .compare tbody tr:last-child th,
.doc .compare tbody tr:last-child td { border-bottom: 0; }

.doc .compare .is-us { background: color-mix(in srgb, var(--blue-1) 8%, transparent); }
.doc .compare thead .is-us { color: var(--blue-2); font-weight: 750; }
.doc .compare .yes { color: var(--text); font-weight: 650; }
.doc .compare .no { color: var(--text-muted); }

/* Footnote markers in prose (the .compare table has its own badge style below). */
.doc a.fn {
  font-size: 11px;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  text-decoration: none;
  color: var(--blue-2);
}
.doc a.fn:hover { text-decoration: underline; }

.doc .compare a.fn {
  display: inline-block;
  min-width: 15px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  text-decoration: none;
  vertical-align: super;
}
.doc .compare a.fn:hover { color: var(--blue-2); }

.doc .compare-note {
  margin: 8px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-size: 14px;
  color: var(--text-muted);
}

.doc ol.sources { padding-left: 20px; }
.doc ol.sources li {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.doc ol.sources li:target { scroll-margin-top: 90px; }

/* A screenshot inside a doc page. The showcase's .shot pins a height so the
   two home-page images line up in a grid; here the image is simply the width
   of the column, and the caption under it carries the instruction. PNG rather
   than WebP for these: the whole point of the picture is reading checkbox
   labels, and lossy compression is exactly wrong for small UI text. */
.doc figure.shot-doc { margin: 20px 0 26px; }
.doc figure.shot-doc img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.doc figure.shot-doc figcaption {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.doc .legal-note {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Callouts inside a doc page. Added for the OpenList guide, where two settings
   fail silently when they are wrong and must not read as ordinary prose. */
.doc .callout {
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-2);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.doc .callout p { margin: 0; font-size: 15px; }
.doc .callout p + p { margin-top: 10px; }
.doc .callout.warn { border-left-color: #d9822b; }

.doc .doc-cta {
  margin-top: 48px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--card-shadow);
}
.doc .doc-cta p.lead { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; }

@media (max-width: 640px) {
  .doc .compare th, .doc .compare td { padding: 13px 14px; }
}

/* --- "no kernel extension" section (index.html) --- */
.how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
}
.how .how-item {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--card-shadow);
}
.how .how-item h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.how .how-item p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
.how-footnote { text-align: center; margin: 28px auto 0; max-width: 640px; font-size: 14px; color: var(--text-muted); }
.how-footnote + .how-footnote { margin-top: 8px; }

.doc pre .c { color: var(--text-muted); }