/* Shared blog styling — index + all post pages.
 * Full palette lives here (light default + explicit dark). Tokens no longer
 * depend on app.min.css being present, so blog pages render correctly whether
 * or not the app bundle has loaded and defined its own tokens.
 *
 * Vertical rhythm: all block spacing is derived from a 1.5rem baseline
 * (calibrated to the 1.72 body line-height so consecutive elements stack
 * on a shared cadence instead of drifting from ad-hoc values).
 *
 * Theme: driven by document.documentElement[data-theme]. The inline theme
 * script in each post page resolves the app's stored setting to 'dark' or
 * 'light' before first paint. Default (no attr) = light editorial.
 */

:root {
  --blog-rhythm: 1.5rem;
  --blog-rhythm-half: 0.75rem;
  --blog-rhythm-2x: 3rem;
  --blog-rhythm-3x: 4.5rem;
  /* Unified reading column. Anchor + reading were 720/820 — split created a
   * subtle ledge at every blockquote/pre/cta. One width reads as one page. */
  --blog-column-reading: 760px;
  --blog-column-anchor: 760px;
  --blog-column-wide: 1080px;

  /* Light palette — warm editorial paper. */
  --color-background: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f4ef;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #57534e;
  --color-text-tertiary: #78716c;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-border: #dbeafe;
  --color-border: #e7e5e0;
  --color-border-strong: #d6d3cc;
  --color-code-bg: #0f172a;
  --color-code-text: #e2e8f0;
  --color-code-border: #1e293b;
  --color-quote-bg: #eff6ff;
  --color-quote-text: #0f172a;
  --color-shadow-card: rgba(15, 23, 42, 0.06);
  --color-shadow-cta: rgba(37, 99, 235, 0.25);
  --color-cta-btn-bg: #0a0a0a;
  --color-cta-btn-color: #ffffff;
  --color-cta-btn-hover-bg: #2563eb;
}

/* Dark palette — deep slate, high-contrast prose. */
[data-theme='dark'] {
  --color-background: #0b1120;
  --color-surface: #111a2e;
  --color-surface-alt: #0f172a;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-soft: rgba(96, 165, 250, 0.08);
  --color-primary-border: rgba(96, 165, 250, 0.3);
  --color-border: #1e293b;
  --color-border-strong: #334155;
  --color-code-bg: #020617;
  --color-code-text: #e2e8f0;
  --color-code-border: #1e293b;
  --color-quote-bg: rgba(96, 165, 250, 0.08);
  --color-quote-text: #f1f5f9;
  --color-shadow-card: rgba(0, 0, 0, 0.4);
  --color-shadow-cta: rgba(96, 165, 250, 0.35);
  --color-cta-btn-bg: #60a5fa;
  --color-cta-btn-color: #0b1120;
  --color-cta-btn-hover-bg: #93c5fd;
}

/* System-preference fallback when no explicit theme is set. Keeps light as
 * the deliberate default; only auto-switch to dark if the user hasn't picked. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --color-background: #0b1120;
    --color-surface: #111a2e;
    --color-surface-alt: #0f172a;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-tertiary: #64748b;
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-soft: rgba(96, 165, 250, 0.08);
    --color-primary-border: rgba(96, 165, 250, 0.3);
    --color-border: #1e293b;
    --color-border-strong: #334155;
    --color-code-bg: #020617;
    --color-code-text: #e2e8f0;
    --color-code-border: #1e293b;
    --color-quote-bg: rgba(96, 165, 250, 0.08);
    --color-quote-text: #f1f5f9;
    --color-shadow-card: rgba(0, 0, 0, 0.4);
    --color-shadow-cta: rgba(96, 165, 250, 0.35);
    --color-cta-btn-bg: #60a5fa;
    --color-cta-btn-color: #0b1120;
    --color-cta-btn-hover-bg: #93c5fd;
  }
}

html {
  background: var(--color-background);
}

body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------------ */
/* Layout                                                                    */
/*                                                                           */
/* Two-column model: body prose stays in the reading column (720px) for      */
/* comfortable ~72 CPL; pull-quotes, code blocks, CTA, and the H1 escape     */
/* to the anchor column (820px) for architectural weight. Blog index uses    */
/* the wide column (1080px) so cards get real breathing room at 3-up.        */
/* ------------------------------------------------------------------------ */

.post-wrap {
  max-width: var(--blog-column-anchor);
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}

.blog-wrap {
  max-width: var(--blog-column-wide);
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}

/* Every direct child of <article> lives in the reading column by default.
 * Anchor-width elements (h1, blockquote, pre, .cta, .post-footer) override
 * below. Everything gets the same auto-centering so vertical margins can
 * still collapse cleanly. */
article > * {
  max-width: var(--blog-column-reading);
  margin-inline: auto;
}

/* ------------------------------------------------------------------------ */
/* Top navigation                                                            */
/*                                                                           */
/* Sits above the wrap padding so the sticky bar spans the full viewport     */
/* while its content still aligns to the reading column. The wrap has no     */
/* top padding — the nav owns that space.                                    */
/* ------------------------------------------------------------------------ */

.post-nav,
.blog-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: var(--blog-rhythm-3x);
  font-size: 0.9rem;
  background: color-mix(in oklab, var(--color-background) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

/* The nav's flex children re-center to the reading column so its "Home /
 * Blog / Pricing" links line up with the body text below, even though the
 * nav bar itself is full-width. */
.post-nav > *,
.blog-nav > * {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color 0.15s ease;
}

.post-nav > *:first-child,
.blog-nav > *:first-child {
  margin-inline-start: max(0px, calc((100% - var(--blog-column-reading)) / 2));
}

.post-nav a:hover,
.blog-nav a:hover {
  color: var(--color-primary);
}

/* Theme + language toggles — paired control group at the trailing edge of
 * the sticky nav (post-nav for posts, blog-nav for index). Default: theme
 * carries the flex push. When a lang toggle is present, it takes the push
 * instead so the pair travels together. */
.post-nav .theme-toggle,
.blog-nav .theme-toggle {
  margin-inline-start: auto;
  margin-inline-end: max(0px, calc((100% - var(--blog-column-reading)) / 2));
}
.post-nav .lang-toggle ~ .theme-toggle,
.blog-nav .lang-toggle ~ .theme-toggle {
  margin-inline-start: 0;
}
.post-nav .lang-toggle,
.blog-nav .lang-toggle {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.theme-toggle:hover {
  color: var(--color-primary);
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.theme-toggle .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-auto {
  display: none;
}
[data-theme='light'] .theme-toggle .icon-sun,
[data-theme='dark'] .theme-toggle .icon-moon {
  display: inline-block;
}
:root:not([data-theme='light']):not([data-theme='dark']) .theme-toggle .icon-auto {
  display: inline-block;
}
.theme-toggle .label {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .theme-toggle .label {
    display: none;
  }
  .theme-toggle {
    padding: 0.35rem;
  }
}

/* Language switcher — sits next to the theme toggle in the sticky nav.
 * Anchors to the translated URL of the counterpart post (set per page). */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.lang-toggle:hover {
  color: var(--color-primary);
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
}
.lang-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.lang-toggle .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* RTL — Hebrew. Flip only where the flip actually matters: blockquote
 * accent stripe and inline-code isolation. Reading column already centers. */
html[dir='rtl'] article blockquote {
  border-left: none;
  border-right: 3px solid var(--color-primary);
  border-radius: 12px 0 0 12px;
}
html[dir='rtl'] .callout {
  border-left: none;
  border-right: 3px solid var(--color-border-strong);
  border-radius: 10px 0 0 10px;
}
html[dir='rtl'] .tldr {
  border-left: 1px solid var(--color-primary-border);
  border-right: 3px solid var(--color-primary);
}
/* RTL: keep same grid; browser flips column visual order, so the number
 * naturally lands on the right without touching `order`. */
/* Inline code + preformatted blocks stay LTR inside Hebrew prose:
 * commands, URLs, identifiers must not mirror. */
html[dir='rtl'] article code,
html[dir='rtl'] article pre {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
/* Hebrew typography — research-based defaults.
 *
 * Body:    Rubik (Meir Sadan Hebrew rework — used by Wix, Monday, and most
 *          Israeli tech companies. Open apertures, low contrast, tuned
 *          specifically for on-screen reading at editorial sizes).
 * Fallback: Heebo (Oded Ezer; documented as "best free Hebrew sans on the
 *          web" — geometric, high x-height, extends Roboto to Hebrew).
 * Display:  Assistant at 700+ (its display weights are sharp; its body
 *          weights are what made prose read thin — that's why it moves
 *          to display-only here).
 *
 * Sizing:  1.125rem body (~18px) matches what Israeli editorial sites
 *          use — Hebrew glyphs are visually smaller than Latin at the
 *          same px value because there are no ascenders/descenders.
 *          1.7 line-height leaves room for the low descenders that
 *          matter for niqqud and letter separation. */
html[dir='rtl'] article {
  font-family: 'Rubik', 'Heebo', 'Assistant', 'Arial', system-ui, sans-serif;
}
html[dir='rtl'] article p,
html[dir='rtl'] article li {
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
html[dir='rtl'] article strong {
  font-weight: 600;
}
html[dir='rtl'] article h1,
html[dir='rtl'] article h2,
html[dir='rtl'] article h3,
html[dir='rtl'] article h4 {
  font-family: 'Assistant', 'Rubik', 'Heebo', system-ui, sans-serif;
  letter-spacing: -0.005em;
  font-weight: 700;
}
html[dir='rtl'] article h1 {
  line-height: 1.2;
  font-weight: 800;
}
html[dir='rtl'] article h2 {
  line-height: 1.3;
  font-weight: 700;
}
html[dir='rtl'] article h3 {
  line-height: 1.35;
  font-weight: 600;
}
html[dir='rtl'] .subhead {
  font-family: 'Rubik', 'Heebo', 'Assistant', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
html[dir='rtl'] .tldr p {
  font-size: 1.1rem;
  line-height: 1.65;
  font-weight: 400;
}
html[dir='rtl'] blockquote {
  font-family: 'Rubik', 'Heebo', 'Assistant', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.55;
}

/* ------------------------------------------------------------------------ */
/* Post header                                                               */
/*                                                                           */
/* Header block is one vertical unit — H1, subhead, meta stack tight so the  */
/* reader sees them as a single opening gesture, then a full rhythm-2x       */
/* before the first body paragraph.                                          */
/* ------------------------------------------------------------------------ */

article h1 {
  max-width: var(--blog-column-anchor);
  font-family: var(--font-display, var(--font-primary));
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto var(--blog-rhythm-half);
  font-weight: 700;
}

article .subhead {
  font-family: var(--font-display, var(--font-primary));
  font-size: clamp(1.2rem, 2.1vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 auto var(--blog-rhythm);
  font-weight: 400;
}

article .post-meta {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: 0.85rem;
  margin: 0 auto var(--blog-rhythm-2x);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.75;
}

article .post-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ------------------------------------------------------------------------ */
/* Body                                                                      */
/*                                                                           */
/* Asymmetric H2/H3 margins — more space above than below. Readers scan by   */
/* looking for the "gap before" a new section, not the tightness of the      */
/* headline against the paragraph beneath it. The bottom margin is calibrated */
/* to sit exactly one baseline unit above the next paragraph.                */
/* ------------------------------------------------------------------------ */

article h2 {
  font-family: var(--font-display, var(--font-primary));
  font-size: clamp(1.5rem, 2.7vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: var(--blog-rhythm-3x) auto var(--blog-rhythm);
  font-weight: 700;
}

article h2:first-of-type {
  margin-top: 0;
}

article h3 {
  font-size: 1.2rem;
  line-height: 1.35;
  margin: var(--blog-rhythm-2x) auto var(--blog-rhythm-half);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Consecutive H3s inside the same section (e.g. sub-topics) get a slightly
 * tighter cadence — the reader has already crossed the H2 divider, so a
 * full 3rem between H3s reads as "new section" rather than "next facet". */
article h3 + p + h3,
article h3 + ul + h3,
article h3 + ol + h3,
article h3 + pre + h3 {
  margin-top: var(--blog-rhythm-2x);
}

article p,
article ul,
article ol {
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 auto var(--blog-rhythm);
  color: var(--color-text-primary);
}

/* Lists inherit the reading column and get proper indentation for the
 * marker instead of the browser default which drifts left. */
article ul,
article ol {
  padding-inline-start: 1.4em;
}

article li {
  margin-bottom: 0.5rem;
}

article li:last-child {
  margin-bottom: 0;
}

article a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

article a:hover {
  text-decoration-color: currentColor;
}

article strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ------------------------------------------------------------------------ */
/* Blockquote — pull-quote style                                             */
/*                                                                           */
/* No italic; italic pull-quotes read like machine text. Larger font and     */
/* the anchor-column width give the quote real presence — it should feel     */
/* like the article stops to make a point.                                   */
/* ------------------------------------------------------------------------ */

article blockquote {
  max-width: var(--blog-column-anchor);
  margin: var(--blog-rhythm-2x) auto;
  padding: 1.75rem 2rem;
  border: none;
  border-left: 3px solid var(--color-primary);
  background: var(--color-quote-bg);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-display, var(--font-primary));
  font-style: normal;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-quote-text);
  font-weight: 500;
  letter-spacing: -0.005em;
}

article blockquote p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------------ */
/* Code                                                                      */
/*                                                                           */
/* Wider than prose so a `claude mcp add ...` command stays on one line at   */
/* laptop widths. Softer background so it doesn't punch through the dark     */
/* palette; the code text itself carries the visual weight.                  */
/* ------------------------------------------------------------------------ */

article pre {
  max-width: var(--blog-column-anchor);
  margin: var(--blog-rhythm) auto var(--blog-rhythm-2x);
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: 10px;
  padding: 1.15rem 1.35rem;
  overflow-x: auto;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.94rem;
  line-height: 1.6;
}

article code {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  padding: 0.12em 0.42em;
  border-radius: 4px;
  white-space: nowrap;
}

article pre code {
  background: transparent;
  color: var(--color-code-text);
  padding: 0;
  white-space: pre;
}

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

.cta {
  max-width: var(--blog-column-anchor);
  margin: var(--blog-rhythm-3x) auto 0;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  text-align: center;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(135deg, var(--color-primary), #7c3aed) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 32px -12px var(--color-shadow-cta);
}

.cta p {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 auto 1.15rem;
  max-width: none;
  color: var(--color-text-primary);
}

.cta a.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--color-cta-btn-bg);
  color: var(--color-cta-btn-color);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.cta a.btn:hover {
  transform: translateY(-1px);
  background: var(--color-cta-btn-hover-bg);
  box-shadow: 0 6px 20px var(--color-shadow-cta);
}

/* ------------------------------------------------------------------------ */
/* Post footer inside <article> (Back to blog link)                          */
/* ------------------------------------------------------------------------ */

article + footer,
.post-footer {
  max-width: var(--blog-column-anchor);
  margin: var(--blog-rhythm-3x) auto 0;
  padding-top: var(--blog-rhythm);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------------ */
/* Blog index                                                                */
/* ------------------------------------------------------------------------ */

.blog-header {
  margin: 0 auto var(--blog-rhythm-3x);
  text-align: center;
  max-width: 640px;
}

.blog-header h1 {
  font-family: var(--font-display, var(--font-primary));
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--blog-rhythm-half);
  font-weight: 700;
}

.blog-header p {
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  margin: 0;
}

.post-list {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .post-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .post-list {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px var(--color-shadow-card);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 10px 30px var(--color-shadow-card);
}

.post-card h2 {
  font-family: var(--font-display, var(--font-primary));
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  color: var(--color-text-primary);
  font-weight: 700;
}

.post-card p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1;
}

.post-card .post-meta {
  font-size: 0.8rem;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  opacity: 0.75;
  margin: 0;
}

.blog-footer {
  max-width: var(--blog-column-reading);
  margin: var(--blog-rhythm-3x) auto 0;
  padding-top: var(--blog-rhythm);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.blog-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.blog-footer a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------------ */
/* Legacy elements used by older posts                                       */
/* ------------------------------------------------------------------------ */

.screens {
  max-width: var(--blog-column-reading);
  display: grid;
  gap: 0.75rem;
  margin: var(--blog-rhythm) auto;
}

.screen-placeholder {
  padding: 1.1rem 1.35rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.screen-placeholder strong {
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 0.35rem;
}

table.compare {
  max-width: var(--blog-column-anchor);
  width: 100%;
  border-collapse: collapse;
  margin: var(--blog-rhythm) auto var(--blog-rhythm-2x);
  font-size: 0.95rem;
  overflow-x: auto;
  display: block;
}

@media (min-width: 640px) {
  table.compare {
    display: table;
  }
}

table.compare th,
table.compare td {
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

table.compare th {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.compare tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------------------ */
/* Small viewports — reduce the rhythm at ≤640px so headings don't create   */
/* huge scroll gaps on phones.                                               */
/* ------------------------------------------------------------------------ */

@media (max-width: 640px) {
  :root {
    --blog-rhythm: 1.15rem;
    --blog-rhythm-half: 0.6rem;
    --blog-rhythm-2x: 2.25rem;
    --blog-rhythm-3x: 3rem;
  }

  .post-nav,
  .blog-nav {
    gap: 1rem;
  }

  article blockquote {
    padding: 1.35rem 1.5rem;
    border-radius: 0 10px 10px 0;
  }

  .cta {
    padding: 2rem 1.5rem;
  }
}