@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght.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;
}

/* Tokens copied from style.css @theme / .dark and public.css html.public-v2. */
html.public-v2 {
  --color-surface-0: #ffffff;
  --color-surface-1: #fafafa;
  --color-surface-2: #f4f4f5;
  --color-surface-3: #ececee;
  --color-ink-1: #18181b;
  --color-ink-2: #52525b;
  --color-ink-3: #73737e;
  --color-edge: #e6e6e9;
  --color-edge-strong: #d4d4d8;
  --color-accent-50: #eef2ff;
  --color-accent-100: #e0e7ff;
  --color-accent-200: #c7d2fe;
  --color-accent-500: #6366f1;
  --color-accent-600: #4f46e5;
  --color-accent-700: #4338ca;
  --color-danger-500: #ef4444;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-info-500: #0ea5e9;
  --shadow-card: 0 1px 2px rgb(24 24 27 / 0.04);
  --shadow-card-hover: 0 1px 3px rgb(24 24 27 / 0.07), 0 4px 12px rgb(24 24 27 / 0.05);
  --shadow-pop: 0 4px 16px rgb(24 24 27 / 0.1), 0 1px 3px rgb(24 24 27 / 0.06);
  --pub-radius-sm: 0.5rem;
  --pub-radius: 0.75rem;
  --pub-radius-lg: 1rem;
  --pub-highlight: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --pub-header-h: 64px;
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

html.public-v2.dark {
  --color-surface-0: #17171a;
  --color-surface-1: #101012;
  --color-surface-2: #202024;
  --color-surface-3: #28282d;
  --color-ink-1: #f0f0f2;
  --color-ink-2: #b0b0ba;
  --color-ink-3: #9a9aa5;
  --color-edge: #27272c;
  --color-edge-strong: #37373e;
  --color-accent-50: #1b1b2e;
  --color-accent-100: #242345;
  --color-accent-200: #a5b4fc;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-card-hover: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
  --pub-highlight: inset 0 1px 0 rgb(255 255 255 / 0.04);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-surface-1);
  color: var(--color-ink-1);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04";
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; }
button, summary { font: inherit; }
/* Unlayered, and this file loads after blog-app.css, so a bare `a` or
   `button` color beats header/footer utilities (`text-white`, `text-ink-2`).
   Article text still inherits; the chrome keeps its own colors. */
main a,
main button,
main summary { color: inherit; }
.icon { display: block; flex: none; }

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent-500);
}

main {
  width: min(72rem, calc(100% - 2.5rem));
  margin: 0 auto;
  min-width: 0;
  /* Article, CTA, related posts, then room before the site footer. */
  padding-bottom: 5.5rem;
}

/* Marketing chrome is the extracted header/footer (blog-app.css utilities).
   These rules only cover what the static page has to do without Vue:
   theme icons, the open burger (fixed opaque bar + viewport panel), and
   scroll pinning. `overflow: hidden` alone unsticks a sticky header.
   The closed surface is repeated here because the minified sheet drops the
   unprefixed `backdrop-filter`, so a scrolled header stays see-through. */
header.blog-chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--pub-header-h);
}
header.blog-chrome .pub-header-surface {
  background: color-mix(
    in oklab,
    var(--color-surface-1) calc(var(--hs, 0) * 82% + var(--hd, 0) * 12%),
    transparent
  );
  border-bottom: 1px solid color-mix(in oklab, var(--color-edge) calc(var(--hs, 0) * 100%), transparent);
  backdrop-filter: blur(calc(var(--hs, 0) * 12px));
  -webkit-backdrop-filter: blur(calc(var(--hs, 0) * 12px));
}
[data-theme-toggle] .icon-sun { display: none; }
html.public-v2.dark [data-theme-toggle] .icon-moon { display: none; }
html.public-v2.dark [data-theme-toggle] .icon-sun { display: block; }
[data-menu-toggle] .icon-x { display: none; }
header.blog-chrome.is-open [data-menu-toggle] .icon-menu { display: none; }
header.blog-chrome.is-open [data-menu-toggle] .icon-x { display: block; }
header.blog-chrome.is-open {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--blog-scrollbar, 0px);
  z-index: 50;
  background: var(--color-surface-1);
}
header.blog-chrome.is-open .pub-header-surface,
.pub-header-surface[data-open="true"] {
  transform: none;
  background: var(--color-surface-1);
  border-bottom-color: var(--color-edge);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header.blog-chrome.is-open .pub-header-row { transform: none; }
.blog-header-spacer { height: var(--pub-header-h); }
body.blog-scroll-pinned {
  position: fixed;
  top: calc(-1 * var(--blog-scroll-pin, 0px));
  left: 0;
  right: var(--blog-scrollbar, 0px);
  width: auto;
}
/* Lightbox only. The menu pin above zeros window.scrollY, and
   `html.public-v2 { scroll-behavior: smooth }` then animates the restore
   from the top of the page. overflow:hidden keeps the offset. Body padding
   replaces the classic scrollbar so the article does not shift sideways.
   scroll-behavior: auto wins over the smooth rule while the lock is on. */
html.public-v2.blog-lightbox-lock {
  overflow: hidden;
  overscroll-behavior: none;
  scroll-behavior: auto;
}
body.blog-lightbox-lock {
  overflow: hidden;
  overscroll-behavior: none;
  padding-right: var(--blog-scrollbar, 0px);
}
#public-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface-1);
  padding: calc(var(--pub-header-h) + 1rem) 1.25rem 2rem;
}
#public-mobile-nav[hidden] { display: none !important; }
.copy:focus-visible,
.cta a:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-accent-500) 50%, transparent);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  #public-mobile-nav { display: none !important; }
}

.page-head, .hero { padding: 1.75rem 0 0.5rem; }
.kicker {
  display: inline-flex;
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
html.public-v2.dark .kicker { color: var(--color-accent-200); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-edge);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  background: var(--color-surface-0);
  color: var(--color-ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
.chip:hover { color: var(--color-ink-1); border-color: var(--color-edge-strong); }
h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 650;
  text-wrap: balance;
}
.lead {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-ink-2);
}
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: var(--color-ink-3);
  font-size: 14px;
}
.copy {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-edge-strong);
  border-radius: var(--pub-radius-sm);
  background: var(--color-surface-3);
  color: var(--color-ink-1);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.copy:hover { background: var(--color-surface-2); }
.hero-media {
  margin: 1.5rem 0 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius-lg);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-card-hover), var(--pub-highlight);
}
.hero-media img { display: block; width: 100%; height: auto; }

.layout { padding-bottom: 0; min-width: 0; }
.article-col { min-width: 0; max-width: 100%; }
.toc-col { display: none; }

/* Desktop TOC — LegalDocPage sticky sidebar (lg). */
.toc-sticky {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-bottom: 1.5rem;
}
.toc-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.toc ol {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color-edge);
}
.toc ol ol {
  margin: 0.125rem 0 0.25rem;
  border-left: 0;
}
.toc li + li { margin-top: 0.125rem; }
.toc a {
  display: block;
  margin-left: -1px;
  border-left: 2px solid transparent;
  padding: 0.375rem 0 0.375rem 0.75rem;
  color: var(--color-ink-3);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.375;
}
.toc a:hover {
  border-left-color: var(--color-edge-strong);
  color: var(--color-ink-1);
}
.toc a.is-active,
.toc a[aria-current="location"] {
  border-left-color: var(--color-accent-500);
  color: var(--color-ink-1);
}
.toc .toc-h3 a { padding-left: 1.5rem; }

/* Mobile TOC — LegalDocPage details. */
.toc-mobile {
  margin: 0 0 2rem;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius);
  background: var(--color-surface-0);
}
.toc-mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  color: var(--color-ink-1);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile .toc-chevron { color: var(--color-ink-3); }
.toc-mobile[open] .toc-chevron { transform: rotate(180deg); }
.toc-mobile a {
  color: var(--color-ink-2);
  font-size: 14px;
  font-weight: 400;
}
.toc-mobile a:hover,
.toc-mobile a.is-active,
.toc-mobile a[aria-current="location"] {
  color: var(--color-ink-1);
}
.toc-mobile a.is-active,
.toc-mobile a[aria-current="location"] { color: var(--color-ink-1); }
/* Numbering and h3 indent live after the prose list rules. Those rules are
   more specific than a bare `.toc-mobile ol` and were drawing decimal markers
   outside this card. */

.prose {
  max-width: none;
  min-width: 0;
  color: var(--color-ink-2);
  font-size: 15.5px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
/* 42.5rem is 68ch of the 15.5px body, so headings share the paragraph
   measure. `68ch` on an h2 would use the heading's own wider zero. */
.prose > p,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > .callout,
.prose > .takeaways,
.prose > pre {
  max-width: 42.5rem;
}
.prose h2,
.prose h3,
.prose h4 { scroll-margin-top: 6rem; }
.prose h2 {
  margin: 2.5rem 0 0.875rem;
  color: var(--color-ink-1);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.prose h3 {
  margin: 1.75rem 0 0.75rem;
  color: var(--color-ink-1);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.prose h4 {
  margin: 1.5rem 0 0.5rem;
  color: var(--color-ink-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.prose p { margin: 0 0 0.875rem; }
/* blog-app.css preflight sets list-style: none. Restore the docs list.
   `.toc-list` is the article contents: it must not pick up these markers. */
.prose ul:not(.grid):not(.toc-list) { list-style: disc; }
.prose ol:not(.steps):not(.toc-list) { list-style: decimal; }
.prose :is(ul, ol):not(.grid):not(.steps):not(.toc-list) {
  margin: 0.875rem 0 1.1rem;
  padding-left: 1.25rem;
}
.prose :is(ul, ol):not(.grid):not(.steps):not(.toc-list) li { line-height: 1.7; }
.prose :is(ul, ol):not(.grid):not(.steps):not(.toc-list) li + li { margin-top: 0.5rem; }
.prose :is(ul, ol):not(.grid):not(.steps):not(.toc-list) li::marker { color: var(--color-ink-3); }
.prose ol.steps { list-style: none; margin: 1.2em 0 1.6em; padding: 0; }
/* Mobile contents: h2 numbers sit in the card (a fixed column, not a marker
   outside the padding edge). h3s are unnumbered and indented, same idea as
   the legal-doc sidebar. */
.toc-mobile ol.toc-list {
  margin: 0;
  padding: 0.65rem 0.85rem 0.8rem;
  list-style: none;
  border-top: 1px solid var(--color-edge);
  counter-reset: toc;
}
.toc-mobile ol.toc-list ol {
  margin: 0.1rem 0 0.35rem;
  padding: 0;
  list-style: none;
  border: 0;
}
.toc-mobile ol.toc-list li,
.toc-mobile ol.toc-list li + li {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
.toc-mobile ol.toc-list li::marker { content: none; }
.toc-mobile ol.toc-list > li.toc-h2 { counter-increment: toc; }
.toc-mobile ol.toc-list > li.toc-h2 > a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.4rem;
  align-items: baseline;
  padding: 0.3rem 0;
  overflow-wrap: break-word;
}
.toc-mobile ol.toc-list > li.toc-h2 > a::before {
  content: counter(toc) ".";
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.toc-mobile ol.toc-list .toc-h3 > a {
  display: block;
  margin: 0 0 0 2.4rem;
  padding: 0.22rem 0 0.22rem 0.7rem;
  border-left: 1px solid var(--color-edge);
  overflow-wrap: break-word;
}
.prose strong { color: var(--color-ink-1); font-weight: 600; }
.prose a {
  color: var(--color-accent-600);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration: underline; }
html.public-v2.dark .prose a { color: var(--color-accent-200); }
.prose blockquote {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--color-accent-500);
  color: var(--color-ink-2);
  font-size: 15.5px;
  line-height: 1.7;
}
.prose blockquote.pullquote {
  margin: 1.75rem 0;
  padding: 0;
  border: 0;
  color: var(--color-ink-1);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.prose pre {
  overflow: auto;
  max-width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius);
  background: var(--color-surface-2);
  color: var(--color-ink-1);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.prose :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 0.375rem;
  background: var(--color-surface-2);
  color: var(--color-ink-1);
  overflow-wrap: anywhere;
}
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--color-edge); }
.prose figure { margin: 1.5rem 0; max-width: 100%; }
.prose picture, .hero-media picture, a.zoom-hit, a.zoom-hit picture { display: block; }
a.zoom-hit {
  color: inherit;
  cursor: zoom-in;
  text-decoration: none;
}
.prose a.zoom-hit,
html.public-v2.dark .prose a.zoom-hit,
.prose a.zoom-hit:hover,
html.public-v2.dark .prose a.zoom-hit:hover {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.prose figcaption {
  margin-top: 0.5rem;
  color: var(--color-ink-3);
  font-size: 13px;
  line-height: 1.45;
}
.prose img, .prose picture { max-width: 100%; }
.prose .figure-full,
.prose .figure-wide { margin-left: 0; margin-right: 0; width: auto; transform: none; }
.prose .figure-full img, .prose .figure-wide img, .prose .figure-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-frame {
  padding: 0.75rem 0.75rem 0.25rem;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius-lg);
  background: var(--color-surface-0);
  box-shadow: var(--shadow-pop);
}
.figure-frame::before {
  content: "";
  display: block;
  width: 52px;
  height: 12px;
  margin: 0 0 10px;
  background:
    radial-gradient(circle at 6px 6px, var(--color-danger-500) 4px, transparent 4.5px),
    radial-gradient(circle at 22px 6px, var(--color-warning-500) 4px, transparent 4.5px),
    radial-gradient(circle at 38px 6px, var(--color-success-500) 4px, transparent 4.5px);
}
.figure-frame img { border-radius: var(--pub-radius-sm); }
.figure-phone {
  max-width: 280px;
  margin-inline: auto;
  padding: 10px;
  border-radius: 1.75rem;
  background: var(--color-ink-1);
}
html.public-v2.dark .figure-phone { background: var(--color-surface-1); }
.figure-phone img { display: block; width: 100%; border-radius: 1.125rem; }
.gallery { display: grid; gap: 0.75rem; margin: 1.6em 0; }
.gallery figure { margin: 0; }

.callout, .takeaways, .pros, .cons {
  margin: 1.4em 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius);
  background: var(--color-surface-0);
  color: var(--color-ink-2);
}
.callout-tip {
  background: var(--color-accent-50);
  border-color: color-mix(in oklab, var(--color-accent-500) 28%, var(--color-edge));
}
.callout-important { background: var(--color-surface-2); }
.callout-warning {
  background: color-mix(in oklab, var(--color-warning-500) 14%, var(--color-surface-0));
  border-color: color-mix(in oklab, var(--color-warning-500) 35%, var(--color-edge));
}
.takeaways > p:first-child { margin-bottom: 0.4em; }
.pros-cons { display: grid; gap: 0.75rem; margin: 1.4em 0; }
.pros-cons .pros, .pros-cons .cons { margin: 0; background: var(--color-surface-0); }
.faq details { border-bottom: 1px solid var(--color-edge); padding: 0.25rem 0 0.65rem; }
.faq summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink-1);
  font-weight: 600;
  cursor: pointer;
}

.cta {
  margin: 2.5rem 0;
  padding: 3.5rem 1.5rem;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius);
  background: var(--color-surface-0);
  color: var(--color-ink-1);
  text-align: center;
  box-shadow: var(--shadow-card-hover), var(--pub-highlight);
}
.cta h2,
.prose .cta h2 {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--color-ink-1);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.cta p {
  margin: 1rem auto 0;
  max-width: 36rem;
  color: var(--color-ink-2);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.6;
}
.cta p:last-child:has(a) { margin-top: 2.25rem; }
.cta a,
.prose .cta a,
html.public-v2.dark .prose .cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 3rem;
  padding: 0 1.25rem;
  border-radius: var(--pub-radius);
  background: var(--color-accent-600);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.cta a:hover,
.prose .cta a:hover {
  background: var(--color-accent-700);
  color: #fff;
  text-decoration: none;
  filter: brightness(1.06);
}
.cta .cta-arrow { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) {
  .cta a:hover .cta-arrow { transform: translateX(3px); }
}

ol.steps { margin: 1.2em 0 1.6em; padding: 0; list-style: none; counter-reset: step; }
ol.steps > li {
  position: relative;
  padding: 2px 0 16px 48px;
  counter-increment: step;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-600);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.compare-wrap {
  margin: 1.5em 0 1.8em;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius);
  background: var(--color-surface-0);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}
table.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface-0);
  font-size: 15px;
  line-height: 1.45;
}
table.compare th, table.compare td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-edge);
  text-align: left;
  vertical-align: top;
}
table.compare th:first-child, table.compare td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 9.5rem;
  background: var(--color-surface-0);
  box-shadow: 8px 0 8px -8px color-mix(in oklab, var(--color-ink-1) 18%, transparent);
}
table.compare thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: 13px;
  font-weight: 600;
}
table.compare thead th:first-child { z-index: 3; background: var(--color-surface-2); }
table.compare .col-tydy { background: var(--color-accent-50); }
table.compare thead th.col-tydy { color: var(--color-ink-1); }
table.compare td.yes { color: var(--color-success-600); font-weight: 600; }
table.compare td.no { color: var(--color-ink-3); }
/* Phones: one card per row. A 640px sticky table makes the page scroll sideways. */
@media (max-width: 719px) {
  .compare-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  table.compare { display: block; min-width: 0; width: 100%; }
  table.compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  table.compare tbody, table.compare tr { display: block; }
  table.compare tr {
    margin: 0 0 0.75rem;
    border: 1px solid var(--color-edge);
    border-radius: var(--pub-radius);
    background: var(--color-surface-0);
    overflow: hidden;
  }
  table.compare th, table.compare td {
    display: block;
    position: static;
    min-width: 0;
    box-shadow: none;
  }
  table.compare tr > :last-child { border-bottom: 0; }
  table.compare tbody th {
    background: var(--color-surface-2);
    color: var(--color-ink-1);
    font-weight: 600;
  }
  table.compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
}

.related { margin-top: 2.25rem; }
main .grid, main .list { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.card, .feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-edge);
  border-radius: var(--pub-radius);
  background: var(--color-surface-0);
  box-shadow: var(--shadow-card);
}
.card-media { display: block; color: inherit; }
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding-top: 0.875rem;
}
.card .chips, .feature .chips { padding: 0 1rem; }
.card h2 a, .feature h2 a, .card-copy, .card .kicker a, .feature .kicker a {
  display: block;
  color: inherit;
}
.card h2 a, .feature h2 a, .card .kicker a, .feature .kicker a { padding: 0 1rem; }
.card-copy { flex: 1; padding: 0 1rem 1rem; }
.card a:hover, .feature a:hover { text-decoration: none; }
.card a:focus-visible, .feature a:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-accent-500) 50%, transparent);
  outline-offset: 2px;
}
.prose .card h2 a, .prose .feature h2 a,
.prose .card-copy, .prose .card .kicker a, .prose .feature .kicker a,
html.public-v2.dark .prose .card h2 a,
html.public-v2.dark .prose .feature h2 a,
html.public-v2.dark .prose .card-copy,
html.public-v2.dark .prose .card .kicker a,
html.public-v2.dark .prose .feature .kicker a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .card:hover, .feature:hover {
    border-color: var(--color-edge-strong);
    box-shadow: var(--shadow-card-hover), var(--pub-highlight);
  }
}
.card img, .feature img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-surface-2);
}
.card h2, .feature h2,
.prose .card h2, .prose .feature h2 {
  margin: 0.5rem 0;
  color: var(--color-ink-1);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.prose .related > h2 {
  margin: 0 0 0.75rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.card p, .feature p { margin: 0 0 0.5rem; color: var(--color-ink-2); font-size: 15px; }
.meta { color: var(--color-ink-3); font-size: 13px; }
.empty { color: var(--color-ink-2); }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 1rem 0 0;
  color: var(--color-ink-3);
  font-size: 14px;
}
.crumbs a { color: var(--color-ink-2); }
.crumbs a:hover, .crumbs a[aria-current="page"] { color: var(--color-ink-1); }
.crumbs span[aria-hidden] { color: var(--color-edge-strong); }
.more { color: var(--color-accent-600); font-weight: 500; }
html.public-v2.dark .more { color: var(--color-accent-200); }
.more:hover { text-decoration: underline; }

@media (min-width: 640px) {
  main { width: min(72rem, calc(100% - 4rem)); padding-bottom: 7rem; }
  .cta { padding: 4rem 3rem; }
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery:has(figure:nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; }
  .pros-cons { grid-template-columns: 1fr 1fr; }
  main .grid { grid-template-columns: 1fr 1fr; }
  .feature:has(.card-media) { display: grid; grid-template-columns: 1.15fr 0.85fr; }
  .feature img { height: 100%; aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4rem;
    /* Stretch the TOC column to the article. `start` shrinks it to the link
       list, so sticky has no range and the column is empty mid-article. */
    align-items: stretch;
  }
  .toc-col { display: block; align-self: stretch; }
  /* The sticky box sticks inside this nav. The nav must fill the stretched
     column; otherwise it is only as tall as the links and the bar scrolls away. */
  .toc { height: 100%; }
  .prose, .article-col { min-width: 0; }
  .toc-mobile { display: none; }
}

.blog-toast {
  position: fixed;
  z-index: 80;
  left: 0.75rem;
  right: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  width: auto;
  max-width: 24rem;
  margin-inline: auto;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--color-edge);
  border-radius: 0.75rem;
  background: var(--color-surface-0);
  padding: 0.625rem 0.875rem;
  color: var(--color-ink-1);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: var(--shadow-pop);
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.blog-toast.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.blog-toast-icon {
  display: grid;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  color: var(--color-ink-3);
  font-weight: 700;
}
.blog-toast[data-variant="success"] .blog-toast-icon { color: var(--color-success-500); }
.blog-toast[data-variant="error"] {
  border-color: color-mix(in oklab, var(--color-danger-500) 30%, var(--color-edge));
}
.blog-toast[data-variant="error"] .blog-toast-icon { color: var(--color-danger-500); }

/* Article viewer. Same stage as feed/ImageLightbox.vue: dark backdrop in both
   themes, image fitted with object-fit: contain, white controls that do not
   inherit the page's ink color. The node is created when a photo opens, so
   the article does not reserve space for it. */
.lb {
  --lb-fast: 140ms;
  --lb-normal: 220ms;
  --lb-ease: cubic-bezier(0.2, 0, 0, 1);
  --lb-emph: cubic-bezier(0.16, 1, 0.3, 1);
  --lb-btn: 3rem;
  --lb-nav: 3.5rem;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  color: #fff;
  color-scheme: dark;
  background: transparent;
  outline: none;
  overscroll-behavior: contain;
}
@media (max-width: 639px) {
  .lb { --lb-btn: 2.75rem; --lb-nav: 2.75rem; }
}
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(9 9 11 / 0.88);
  animation: lb-fade var(--lb-normal) var(--lb-ease) both;
}
.lb.is-closing .lb-backdrop { animation: lb-fade-out var(--lb-fast) var(--lb-ease) both; }
.lb-top, .lb-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
  animation: lb-fade var(--lb-normal) var(--lb-ease) both;
}
.lb.is-closing :is(.lb-top, .lb-bottom) { animation: lb-fade-out var(--lb-fast) var(--lb-ease) both; }
.lb-top { padding-top: max(0.75rem, env(safe-area-inset-top)); }
.lb-bottom {
  padding-top: 0.5rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  justify-content: space-between;
}
.lb-counter {
  border-radius: 9999px;
  padding: 0.4375rem 0.875rem;
  background: rgb(255 255 255 / 0.08);
  font-size: 14px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.86);
}
.lb-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin: 0.5rem clamp(0.5rem, 5vw, 4.5rem);
  touch-action: none;
}
.lb-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 0.375rem;
  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.6);
  opacity: 0;
  transition: opacity var(--lb-normal) var(--lb-ease), transform 160ms var(--lb-ease);
  cursor: zoom-in;
  will-change: transform;
}
.lb-img.is-loaded { opacity: 1; }
.lb.is-zoomed .lb-img { cursor: grab; border-radius: 0; }
.lb.is-dragging .lb-img { cursor: grabbing; transition: opacity var(--lb-normal) var(--lb-ease); }
.lb.is-pinching .lb-img { transition: opacity var(--lb-normal) var(--lb-ease); }
.lb-state {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  pointer-events: none;
  font-size: 13.5px;
  color: rgb(255 255 255 / 0.78);
}
.lb-error { pointer-events: auto; }
.lb-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 2px solid rgb(255 255 255 / 0.18);
  border-top-color: rgb(255 255 255 / 0.85);
  animation: lb-spin 0.8s linear infinite;
}
.lb-link {
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  background: rgb(255 255 255 / 0.1);
  font-size: 12.5px;
  font-weight: 550;
  color: #fff;
  text-decoration: none;
}
.lb-link:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
.lb-btn, .lb-zoom {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  height: var(--lb-btn);
  border: 0;
  border-radius: 9999px;
  color: rgb(255 255 255 / 0.92);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--lb-fast) var(--lb-ease), transform var(--lb-fast) var(--lb-ease), opacity var(--lb-fast) var(--lb-ease);
}
.lb-btn {
  width: var(--lb-btn);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.lb-zoom {
  min-width: 3.75rem;
  padding-inline: 0.5rem;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lb-btn:not(:disabled):hover, .lb-zoom:not(:disabled):hover {
  background: rgb(255 255 255 / 0.16);
  transform: scale(1.03);
}
.lb-btn:not(:disabled):active, .lb-zoom:not(:disabled):active {
  background: rgb(255 255 255 / 0.2);
  transform: scale(0.97);
}
.lb-btn:focus-visible, .lb-zoom:focus-visible, .lb-link:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 2px;
}
.lb-btn:disabled, .lb-zoom:disabled { opacity: 0.36; cursor: default; }
.lb-zoom:disabled { opacity: 0.6; }
.lb-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: var(--lb-nav);
  height: var(--lb-nav);
  margin-top: calc(var(--lb-nav) / -2);
  background: rgb(24 24 27 / 0.6);
}
.lb-nav-prev { left: clamp(-4rem, -4.5vw, 0.25rem); }
.lb-nav-next { right: clamp(-4rem, -4.5vw, 0.25rem); }
@media (max-width: 639px) {
  .lb-nav-prev { left: 0.25rem; }
  .lb-nav-next { right: 0.25rem; }
  .lb-bottom { flex-direction: column; align-items: stretch; }
  .lb-bar { align-self: center; }
}
.lb-meta { min-width: 0; flex: 1; }
.lb-name, .lb-sub {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-name { font-size: 14px; font-weight: 600; }
.lb-sub { font-size: 13px; color: rgb(255 255 255 / 0.62); }
.lb-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.25rem;
  background: rgb(24 24 27 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px -8px rgb(0 0 0 / 0.5);
}
.lb-bar .lb-btn { background: transparent; box-shadow: none; text-decoration: none; }
.lb-sep {
  width: 1px;
  height: 1.5rem;
  margin-inline: 0.125rem;
  background: rgb(255 255 255 / 0.14);
}
.lb .icon { display: block; }
.lb .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-fade-out { to { opacity: 0; } }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lb-backdrop, .lb-top, .lb-bottom, .lb-img, .lb-btn, .lb-zoom { animation: none; transition: none; }
  .lb-btn:not(:disabled):hover, .lb-btn:not(:disabled):active,
  .lb-zoom:not(:disabled):hover, .lb-zoom:not(:disabled):active { transform: none; }
  .lb-spinner { animation-duration: 1.6s; }
}
@media (min-width: 640px) {
  .blog-toast {
    left: auto;
    right: 1rem;
    bottom: 1rem;
    margin-inline: 0;
  }
}