/* ───────────────────────────────────────────
   OctoZip — quiet light
   One typeface (Archivo). Weights: 500 body, 700 headings, buttons and labels, 800 the page title only.
   Letter-spacing 0, except the page title (-0.018em). One size per heading level. Spacing on a 4/8 base.
   No cards: rows are split by 1px hairlines and groups by whitespace. Filled boxes only for fields (sunken,
   radius 12) and callouts (tinted, radius 12). No shadows, gradients, dashed borders or stripes. One accent:
   links, the selected item and progress. Buttons are 52px pills. Light and dark follow the device setting.
   Blog pages only (/blog/ and /es/, /pt-BR/, /id/, /hi/ blog: posts, indexes, tools, comparison pages), linked in
   place of /octozip.css by seo/blog_styles.py. Every other page keeps /octozip.css (the original design).
   ─────────────────────────────────────────── */
/* Archivo, served from this site (latin subset, variable): no Google Fonts round trip before first paint */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('/assets/fonts/archivo-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 {
  color-scheme: light;
  --ground: #E0F2F6;
  --sunken: #D2E8EE;
  --line: rgba(22, 49, 74, 0.14);
  --ink: #16314A;
  --muted: #4C6072;
  --accent: #087489;
  --accent-line: rgba(8, 116, 137, 0.4);
  --accent-tint: rgba(8, 116, 137, 0.08);
  --primary: #16314A;
  --primary-hover: #1F4466;
  --primary-ink: #FFFFFF;
  --disabled: #C3D2D9;
  --disabled-ink: #5D6E7D;
  --warn: #FAEBC8;
  --warn-ink: #4A3300;
  --bad: #F8DDD8;
  --bad-ink: #7A1B16;
  --pill-bg: rgba(255, 255, 255, 0.92);
  --band: #0B1420;
  --band-ink: #8DA2B8;
  --band-line: rgba(255, 255, 255, 0.1);
  --band-sunken: #15233A;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316314A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the text column: 68 characters of 17px Archivo */
  --measure: 41.4559rem;
  --font: 'Archivo', 'Helvetica Neue', sans-serif;

  /* older names, still used by the tool styles and a few page styles */
  --navy: var(--ink);
  --sub: var(--muted);
  --link: var(--accent);
  --link-line: var(--accent-line);
  --teal: var(--accent);
  --teal-bright: var(--accent);
  --teal-poster: var(--accent);
  --bg-cyan: var(--ground);
  --surface: var(--ground);
  --surface-2: var(--ground);
  --field: var(--sunken);
  --line-strong: var(--line);
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--primary-hover);
  --btn-ink: var(--primary-ink);
  --over-ink: var(--bad-ink);
  --font-display: var(--font);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0B1420;
    --sunken: #15233A;
    --line: rgba(228, 236, 244, 0.13);
    --ink: #E4ECF4;
    --muted: #9DB1C4;
    --accent: #45D0E4;
    --accent-line: rgba(69, 208, 228, 0.45);
    --accent-tint: rgba(69, 208, 228, 0.1);
    --primary: #E4ECF4;
    --primary-hover: #FFFFFF;
    --primary-ink: #0B1420;
    --disabled: #25354A;
    --disabled-ink: #8396AA;
    --warn: #33290F;
    --warn-ink: #F3D9A4;
    --bad: #3B1C1F;
    --bad-ink: #FFB9B0;
    --pill-bg: rgba(17, 30, 48, 0.88);
    --band: #070D16;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E4ECF4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; }
a { color: inherit; }
strong, b { font-weight: 700; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }

/* links in running text: the accent, underlined, at the weight around them */
:where(.prose-card, .inner-body, .inner-hero, .rail-card) a:not([class]) {
  color: var(--accent); font-weight: inherit; text-decoration: underline;
  text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:where(.prose-card, .inner-body, .inner-hero, .rail-card) a:not([class]):hover { text-decoration-color: currentColor; }

/* ── NAV: a floating pill with a hairline ── */
.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 26px;
  background: var(--pill-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 12px 9px 16px;
}
.nav-logo {
  display: flex; align-items: center;
  font-weight: 700; font-size: 17px;
  text-decoration: none; color: var(--ink);
}
.nav-logo img { width: 30px; height: 30px; border-radius: 50%; margin-right: 9px; }
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  text-decoration: none; font-weight: 700; font-size: 14px; color: var(--muted);
  transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta {
  white-space: nowrap;
  background: var(--primary); color: var(--primary-ink) !important;
  border-radius: 999px; padding: 9px 18px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color 0.15s;
}
.nav-cta:hover { background: var(--primary-hover); }
@media (max-width: 560px) {
  .nav { top: 10px; padding: 0 10px; }
  .nav-pill { gap: 10px; padding: 7px 8px 7px 12px; width: 100%; max-width: 420px; justify-content: space-between; }
  .nav-logo { font-size: 15px; }
  .nav-logo img { width: 26px; height: 26px; }
  .nav-links { gap: 12px; }
  .nav-links a:not(.nav-cta) { font-size: 13px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 400px) {
  .nav-links .nav-home { display: none; }
}

/* ── BUTTONS: 52px pills. Primary solid ink (inverted on dark); secondary the sunken fill with a hairline ── */
.btn-store, .rail-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; margin: 0; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center;
  background: var(--primary); color: var(--primary-ink); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s;
}
.btn-store:hover, .rail-btn:hover { background: var(--primary-hover); color: var(--primary-ink); text-decoration: none; }
.btn-store.secondary { background: var(--sunken); color: var(--ink); border-color: var(--line); }
.btn-store.secondary:hover { background: var(--sunken); color: var(--ink); border-color: var(--ink); }
:is(.btn-store, .rail-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-store svg { flex-shrink: 0; }
/* the store label ("GET IT ON Google Play" in the markup) reads as one line: "Get it on Google Play" */
.btn-store small { display: inline-block; margin-right: 0.25em; font: inherit; text-transform: lowercase; }
.btn-store small::first-letter { text-transform: uppercase; }
.btn-store strong { font-weight: inherit; }

/* ── FOOTER ──
   One link-rich footer on every page (site_footer.py, spec in seo/footer.json): the brand and store button, then
   columns of the main guides, tools and pages, then the language list. A dark band in both themes. */
footer {
  background: var(--band); color: var(--band-ink);
  padding: 64px 24px 36px;
}
.footer-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(190px, 0.85fr) minmax(0, 3.6fr); gap: 40px 48px;
}
.footer-logo { display: flex; align-items: center; font-weight: 700; font-size: 17px; color: #fff; text-decoration: none; }
.footer-logo img { width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; }
.footer-logo span { color: #45D0E4; }
.footer-by { font-size: 13px; margin-top: 4px; }
.footer-tagline { margin: 16px 0 20px; max-width: 28ch; font-size: 14px; line-height: 1.55; }
.footer-cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px;
  border: 1px solid var(--band-line); border-radius: 999px; background: var(--band-sunken);
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1.25; text-decoration: none; transition: border-color 0.15s;
}
.footer-cta:hover { border-color: #E4ECF4; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.footer-h { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }
.footer-h-note { display: block; margin-top: 4px; color: var(--band-ink); font-size: 13px; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a, .footer-langs a { font-size: 14px; line-height: 1.35; text-decoration: none; transition: color 0.15s; }
.footer-col a:hover, .footer-langs a:hover, .footer-col a[aria-current], .footer-langs a[aria-current] { color: #fff; }
.footer-bottom {
  max-width: 1100px; margin: 52px auto 0; padding-top: 22px; border-top: 1px solid var(--band-line);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; font-size: 13px;
}
.footer-langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-langs a { font-size: 13px; }
.footer-note { max-width: 1100px; margin: 26px auto 0; font-size: 13px; line-height: 1.5; color: #6F849A; }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-tagline { max-width: 46ch; }
}
@media (max-width: 760px) {
  footer { padding: 52px 20px 32px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .footer-col a { font-size: 14.5px; }
  .footer-col ul { gap: 12px; }
}

/* ── PAGE TITLE (inner pages, posts, blog indexes): left-aligned over the text column ── */
.inner-hero { padding: 128px 24px 0; }
.inner-hero .poster-inner { max-width: var(--measure); margin: 0 auto; }
.inner-hero h1, .prose-card h1 {
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.25; letter-spacing: -0.018em;
  color: var(--ink); text-wrap: balance;
}
.lede { margin: 16px 0 0; max-width: 60ch; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.inner-meta { margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.crumbs { margin: 0 0 12px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.crumbs a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.crumbs a:hover { text-decoration-color: currentColor; }
@media (max-width: 600px) {
  .inner-hero { padding-top: 104px; }
}

/* ── INNER PAGES (about / privacy / terms / support / 404): one column of hairline-split sections ── */
.inner-body { max-width: calc(var(--measure) + 48px); margin: 0 auto; padding: 48px 24px 96px; }
.inner-intro { margin: 0 0 32px; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.inner-label { margin: 48px 0 12px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.num-card { padding: 24px 0; border-top: 1px solid var(--line); }
.num-card .num { display: none; }
.num-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.num-card p { font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--ink); }
.num-card p + p { margin-top: 8px; }

/* FAQ (support): question rows split by hairlines */
.faq-item { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; cursor: pointer; border: 0; background: none; text-align: left;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink);
}
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-q .faq-icon {
  flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 24px; font-weight: 500; line-height: 1; color: var(--muted); transition: transform 0.25s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a p { padding: 0 0 16px; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--ink); }

/* ── POSTS AND TOOL PAGES ──
   No card: the article is a text column (68 characters) in the middle of the page; tables may use the whole
   column. page_nav.py adds an "On this page" list before the article and a rail after it: below 1100px both are
   hidden; from 1100px the list sits on the left; from 1440px the rail joins on the right. */
.blog-body { max-width: 1320px; padding: 48px 24px 96px; }
article > .blog-body:first-child { padding-top: 128px; }
.post-grid > .toc, .post-grid > .rail { display: none; }
.prose-card { font-size: 17px; }
.prose-card > :not(.prose):not(.table-wrap),
.prose-card .prose > :not(.table-wrap) { max-width: var(--measure); margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
  .blog-body { padding: 32px 24px 72px; }
  article > .blog-body:first-child { padding-top: 104px; }
}
@media (min-width: 1100px) {
  .post-grid.has-toc { display: grid; grid-template: "toc main ." / 200px minmax(0, 1fr) 200px; column-gap: 32px; align-items: start; }
  .post-grid > .toc { display: block; grid-area: toc; position: sticky; top: 112px; max-height: calc(100vh - 136px); overflow-y: auto; }
  .post-grid > .prose-card { grid-area: main; }
  /* the post title sits over the same column as the text */
  article:has(> .post-grid.has-toc) > .inner-hero {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; column-gap: 32px; max-width: 1320px; margin: 0 auto;
  }
  article:has(> .post-grid.has-toc) > .inner-hero .poster-inner { grid-column: 2; width: 100%; }
}
@media (min-width: 1440px) {
  .post-grid { max-width: 1600px; display: grid; grid-template: "main rail" / minmax(0, 1fr) 260px; column-gap: 32px; align-items: start; }
  .post-grid.has-toc { grid-template: "toc main rail" / 220px minmax(0, 1fr) 260px; }
  .post-grid > .rail { display: grid; grid-area: rail; position: sticky; top: 112px; }
  article:has(> .post-grid.has-toc) > .inner-hero { grid-template-columns: 220px minmax(0, 1fr) 260px; max-width: 1600px; }
}

/* the poster at the top of a post (posters/install.py) */
.post-hero { margin: 0 0 32px; }
.post-hero img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* the answer first, then the disclosure: plain paragraphs, no boxes */
.prose-card .answer { margin: 0 0 16px; font-size: 19px; font-weight: 500; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.prose-card .disclosure { margin: 0 0 8px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--muted); }

/* headings and body copy: one size per level */
.prose { color: var(--ink); }
.prose p, .prose li { font-size: 17px; font-weight: 500; line-height: 1.55; }
.prose p { margin: 0 0 16px; text-wrap: pretty; }
.prose-card h2 { margin: 48px 0 12px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.prose-card h3 { margin: 32px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.prose-card h2[id] { scroll-margin-top: 96px; }
.prose ol, .prose ul { padding-left: 1.4em; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose .picks { list-style: none; padding: 0; }
.prose .picks li { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.prose .picks li:last-child { border-bottom: 1px solid var(--line); }
.prose .notes { padding-left: 1.1em; margin-top: 4px; }
.prose .notes li { font-size: 15px; line-height: 1.55; color: var(--muted); margin-bottom: 4px; }
.prose figure { margin: 32px auto; }
.prose figure img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.prose figcaption { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.prose figure[data-todo] { min-height: 180px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; padding: 24px; text-align: center; }
.prose .cta { margin-top: 24px; }
@media (prefers-color-scheme: dark) {
  .prose figure img { border-color: transparent; }
}

/* tables: rows split by hairlines, no frame; one too wide for the screen scrolls sideways */
.table-wrap { margin: 16px 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; outline: none; }
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.compare, .data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; line-height: 1.55; }
.compare th, .compare td, .data th, .data td {
  text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: break-word;
}
.compare thead th, .data thead th { padding-top: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.compare thead th span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.compare tbody th, .data tbody th, .data tbody td:first-child { font-weight: 700; color: var(--ink); }
.compare td, .data td { font-weight: 500; color: var(--ink); }
.compare tbody th { position: sticky; left: 0; z-index: 1; min-width: 120px; background: var(--ground); }
.compare thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--ground); }
.compare a, .data a { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.compare a:hover, .compare a:focus-visible, .data a:hover, .data a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
/* OctoZip's own column or row (class "ours", set by page_nav.py) is tinted with the accent */
.compare .ours-col, .compare tr.ours > * { padding-left: 12px; }
.compare td.ours-col, .compare tr.ours > td { background: var(--accent-tint); }
.compare thead th.ours-col { background: var(--accent-tint); color: var(--ink); }
.compare tr.ours > th { background: color-mix(in srgb, var(--accent) 8%, var(--ground)); }
/* best-of tables (six or more columns): equal columns in a compact type size; narrower than 680px they scroll */
.compare:has(thead th:nth-child(6)) { table-layout: fixed; min-width: 680px; font-size: 13px; }
.compare:has(thead th:nth-child(6)) th, .compare:has(thead th:nth-child(6)) td { padding-right: 8px; }
.compare:has(thead th:nth-child(6)) :is(.ours-col, tr.ours > *) { padding-left: 8px; }
.compare:has(thead th:nth-child(6)) tbody th { min-width: 0; }
.compare:has(thead th:nth-child(6)) tbody th, .compare:has(thead th:nth-child(6)) thead th:first-child { width: 12.5%; }
@media (max-width: 600px) {
  .compare th, .compare td, .data th, .data td { overflow-wrap: anywhere; padding-right: 12px; }
  /* tables of four or more columns keep readable columns and scroll; only two- and three-column ones squeeze */
  .compare:has(thead th:nth-child(4)), .data:has(thead th:nth-child(4)) { min-width: 560px; }
  :is(.compare, .data):has(thead th:nth-child(4)) :is(th, td) { overflow-wrap: break-word; }
  .compare tbody th { min-width: 104px; }
  .compare:has(thead th:nth-child(6)) { table-layout: auto; }
  .compare:has(thead th:nth-child(6)) tbody th { min-width: 104px; }
}

/* previous / guide / next at the foot of each post (link_series.py): hairline rows */
.series { display: grid; margin-top: 48px; border-bottom: 1px solid var(--line); }
.series a {
  display: block; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none;
  color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.4;
}
.series a:hover, .series a:focus-visible { color: var(--accent); }
.series a span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.prose-card .related { margin-top: 48px; margin-bottom: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose-card .related h2 { margin: 0 0 12px; }
.related ul { list-style: disc; padding: 0 0 0 1.25em; display: grid; gap: 8px; }
.related li { padding-left: 2px; }
.related li::marker { color: var(--accent); font-size: 1.1em; }

/* ── CONTENTS LIST (left) AND RAIL (right): no badges, no cards ── */
.toc { font-size: 14px; }
.toc-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.toc ol { list-style: none; display: grid; border-left: 1px solid var(--line); }
.toc a {
  display: block; margin-left: -1px; padding: 8px 12px; border-left: 2px solid transparent; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--muted); transition: color 0.15s;
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--accent); }
.rail { gap: 24px; }
.rail-card { padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.rail-card:last-child { border-bottom: 0; }
.rail-app img { width: 44px; height: 44px; border-radius: 50%; }
.rail-name { margin: 12px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.rail-text { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.rail-btn { margin-top: 16px; }
.rail .rail-btn { display: flex; }
.rail-meta { margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.rail-head { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.rail-card ul { list-style: none; display: grid; gap: 8px; }
.rail-card ul + .rail-head { margin-top: 24px; }
.rail-card li a { font-size: 15px; font-weight: 500; }

/* ── BLOG INDEX ──
   One page, no pagination: every post stays one click away. The topic list at the top (index_nav.py), then each
   topic's posts as hairline rows, in two columns on wide screens. */
.blog-index .inner-hero .poster-inner,
.blog-index .blog-body > *,
.topics { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.topics { margin-bottom: 48px; }
.topics ol { list-style: none; display: grid; column-gap: 32px; }
.topics a { display: block; height: 100%; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.topics a:hover .topic-name, .topics a:focus-visible .topic-name { color: var(--accent); }
.topic-icon, .cluster-icon { display: none; }
.topic-name { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.topic-count { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.blog-index .blog-body section { margin-bottom: 48px; scroll-margin-top: 96px; }
h2.cluster { margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.posts { list-style: none; display: grid; column-gap: 32px; }
.post-card { padding: 16px 0; border-top: 1px solid var(--line); }
.post-card h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.25; }
.post-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.blog-index .featured-tool .posts { grid-template-columns: minmax(0, 1fr); }
.post-card :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.post-card :is(h2, h3) a:hover { color: var(--accent); }
.post-card p { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--muted); }
.post-card time { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--muted); }
@media (min-width: 700px) {
  .topics ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .blog-index .inner-hero .poster-inner, .blog-index .blog-body > *, .topics { max-width: 1120px; }
  .blog-index .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── HINDI: Devanagari needs taller lines, and no tracking ── */
:lang(hi) :is(h1, h2, h3, .inner-label, .toc-title, .rail-name, .rail-head, .topic-name, .series a, .faq-q) { line-height: 1.45; }
:lang(hi) :is(p, li, td, th, .toc a, .lede, .crumbs, .inner-meta, .topic-count) { line-height: 1.75; }
:lang(hi) h1 { letter-spacing: 0; }