/* Static editorial surface. Brand tokens/fonts come from site.css; no runtime or WebGL dependency. */
.blog-page { --paper: oklch(0.955 0.004 85); --paper-ink: oklch(0.2 0.01 75); --paper-soft: oklch(0.43 0.012 75); }
.blog-page a { text-underline-offset: .22em; }
.blog-page h2, .blog-page h3 { margin: 0; letter-spacing: -.035em; line-height: 1.18; text-wrap: pretty; }
.blog-page h2 { font-size: 2rem; }.blog-page h3 { font-size: 1.375rem; }
.blog-page p { text-wrap: pretty; }
.blog-skip { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .75rem 1rem; background: var(--accent); color: var(--on-accent); transform: translateY(-200%); }
.blog-skip:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.blog-bar { border-bottom: 1px solid var(--line); }
.blog-nav { display: flex; margin-inline-start: auto; gap: 2rem; color: var(--ink-soft); }
.blog-nav a { padding-block: .75rem; text-decoration: none; }
.blog-nav a[aria-current] { color: var(--ink); }
.blog-bar .login { white-space: nowrap; }
.blog-main { padding-block: 4rem 0; }
.blog-eyebrow { font-size: .875rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--ink-soft); }
.blog-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4rem; align-items: end; margin-bottom: 3.5rem; }
.blog-intro h1 { font-size: clamp(2.5rem, 4.1vw, 4.125rem); max-width: 48rem; margin-top: 1.125rem; line-height: 1.06; }
.blog-intro > p { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.7; max-width: 27rem; padding-bottom: .25rem; }
.blog-category-count { display: block; font-size: .875rem; font-weight: 700; margin-top: 1rem; }.blog-main > .blog-categories { margin-top: -1rem; }
.blog-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--paper); color: var(--paper-ink); border-radius: 1.5rem; overflow: hidden; }
.feature-copy { padding: 3.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.feature-copy h2 { font-size: clamp(2rem, 2.75vw, 3rem); }
.feature-copy h2 a { text-decoration: none; }.feature-copy > p:not(.blog-meta) { color: var(--paper-soft); font-size: 1.0625rem; line-height: 1.7; }
.feature-copy .blog-meta { color: var(--paper-soft); }
.feature-link { font-weight: 800; font-size: 1rem; text-decoration: none; margin-top: auto; padding-top: .5rem; display: flex; align-items: center; min-block-size: 2.75rem; gap: 1.5rem; }
.feature-link span { font-size: 1.4rem; line-height: 1; }
.feature-product { display: flex; align-items: center; padding: 2.625rem; background: radial-gradient(ellipse at 75% 20%, #4b3c24 0, #25221d 38%, #181818 90%); }
.product-demo { width: 100%; min-width: 0; margin: 0; color: #f3efe6; }
.product-demo-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .875rem; margin-bottom: 1rem; color: #bdb7ac; }
.example-label { border: 1px solid #70675a; border-radius: 999px; padding: .2rem .625rem; color: #ded7cb; }
.demo-window { background: #1e1e1e; border: 1px solid #6a5a3b; border-radius: .875rem; padding: 1.25rem; box-shadow: 0 1.25rem 3rem #0004; }
.demo-dots { display: flex; gap: .3125rem; margin-bottom: 1.25rem; }.demo-dots i { width: .375rem; height: .375rem; background: #888174; border-radius: 50%; }
.demo-title { display: flex; align-items: center; gap: .75rem; }.demo-title > div { min-width: 0; }.demo-title p { font-size: 1.125rem; line-height: 1.3; font-weight: 800; }
.demo-title small { display: block; margin-top: .375rem; color: #bbb5aa; font-size: .875rem; }.demo-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.5rem; background: #f0a500; color: #191919; border-radius: .625rem; }
.demo-state { flex-shrink: 0; margin-left: auto; font-size: .75rem; color: #f5c65a; border: 1px solid #806529; border-radius: 999px; padding: .3rem .5rem; }
.demo-chat { display: flex; gap: .625rem; padding-block: 1.5rem; border-bottom: 1px solid #ffffff1a; }
.demo-avatar { flex-shrink: 0; width: 1.875rem; height: 1.875rem; display: grid; place-items: center; background: #544b3c; border-radius: 50%; font-size: .875rem; }
.demo-chat > div { min-width: 0; flex: 1; }.demo-chat > div > span { font-size: .75rem; color: #bbb5aa; }.demo-chat p { background: #303030; border-radius: .125rem .75rem .75rem; padding: .75rem; margin-top: .375rem; font-size: .9375rem; line-height: 1.55; }
.demo-details { display: grid; gap: 1.125rem; padding-block: 1.25rem; }.demo-details small { font-size: .75rem; color: #bbb5aa; }.demo-details p { font-size: .9375rem; line-height: 1.5; margin-top: .375rem; }.demo-check { color: #f0a500; }
.demo-foot { display: flex; align-items: center; gap: .4375rem; font-size: .75rem; color: #bbb5aa; padding-top: 1rem; border-top: 1px solid #ffffff1a; }.demo-foot-dot { width: .375rem; height: .375rem; background: #f0a500; border-radius: 50%; }
.blog-library { margin-block: 5rem; }
.library-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }.library-heading > span { font-size: .875rem; color: var(--ink-soft); white-space: nowrap; }.library-heading > a { font-size: 1rem; white-space: nowrap; }
.blog-categories { display: flex; flex-wrap: wrap; gap: .625rem; margin-block: 1.75rem 2rem; }
.blog-categories a { display: inline-flex; align-items: center; min-block-size: 2.75rem; text-decoration: none; padding: .75rem 1rem; border-radius: 999px; border: 1px solid var(--line); font-size: .9375rem; color: var(--ink-soft); }
.blog-categories a[aria-current] { color: var(--paper-ink); background: var(--paper); border-color: var(--paper); font-weight: 700; }
.blog-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.blog-card { min-width: 0; background: var(--canvas-2); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.blog-card-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 12rem; padding: 1.5rem; overflow: hidden; text-decoration: none; background: #30281a; color: #efdba6; }
.card-art-word { font-size: 1.375rem; letter-spacing: -.04em; font-weight: 800; z-index: 1; }
.card-art-mark { position: absolute; right: 1.5rem; bottom: -.5rem; font-size: 9rem; line-height: 1.2; font-weight: 400; transform: rotate(-8deg); color: #f0a500; }
.card-art-line { width: 7rem; border-top: 1px solid currentColor; margin-bottom: .5rem; opacity: .5; }
.blog-card--1 .blog-card-art { background: #e8e2d6; color: #403b34; }.blog-card--1 .card-art-mark { color: #9a722e; transform: none; font-size: 8rem; bottom: 0; }
.blog-card--2 .blog-card-art { background: #232323; color: #ded8cd; }.blog-card--2 .card-art-mark { color: #bfb3a0; transform: none; font-size: 8rem; right: 1rem; }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.125rem; }.blog-card-body > p:not(.blog-meta) { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.blog-card h3 a { text-decoration: none; }.blog-read { display: flex; align-items: center; gap: 1rem; min-block-size: 2.75rem; text-decoration: none; font-weight: 700; font-size: .9375rem; padding-block: .375rem; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-soft); }
.blog-conversion { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 3rem; border-radius: 1.5rem; padding: 3rem; background: var(--paper); color: var(--paper-ink); margin-block: 4rem; }
.blog-conversion .blog-eyebrow { color: var(--paper-soft); }.blog-conversion h2 { font-size: 2.25rem; margin-block: .875rem 1rem; max-width: 30rem; }.blog-conversion p:not(.blog-eyebrow) { color: var(--paper-soft); font-size: 1rem; line-height: 1.75; max-width: 36rem; }
.conversion-actions { display: grid; justify-items: start; gap: 1.25rem; }.conversion-actions .cta { gap: 1.5rem; white-space: normal; text-align: center; }.conversion-demo { display: flex; align-items: center; min-block-size: 2.75rem; font-size: .9375rem; text-decoration: none; font-weight: 700; }
.blog-footer { padding-block: 2rem 3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }.blog-footer > p { font-size: .875rem; color: var(--ink-soft); }.blog-footer nav { display: flex; flex-wrap: wrap; margin-left: auto; gap: 1.25rem; font-size: .875rem; }.blog-footer nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; text-decoration: none; }
.article-main { padding-top: 2rem; }.article-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; color: var(--ink-soft); font-size: .875rem; }.article-breadcrumbs a { text-decoration: none; }
.article-header { max-width: 57rem; margin-block: 3rem; }.article-header h1 { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.09; margin-block: 1.25rem 1.5rem; }.article-summary { color: var(--ink-soft); font-size: 1.25rem; line-height: 1.7; max-width: 47rem; }
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; font-size: .8125rem; color: var(--ink-soft); margin-top: 2rem; }.byline-mark { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: #252525; border-radius: 50%; }.article-byline > span:nth-child(2) { color: var(--ink); font-weight: 700; }
.article-layout { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: 4rem; align-items: start; padding: 3.5rem; background: var(--paper); color: var(--paper-ink); border-radius: 1.5rem; }
.article-content { min-width: 0; font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere; }
.article-content > * + * { margin-top: 1.5rem; }.article-content > h2 { margin-top: 3rem; font-size: 2rem; scroll-margin-top: 2rem; }.article-content > h3 { margin-top: 2.25rem; font-size: 1.375rem; }.article-content > :first-child { margin-top: 0; }
.article-content ul, .article-content ol { padding-left: 1.5rem; }.article-content li + li { margin-top: .875rem; }.article-steps li { padding-left: .375rem; }.article-steps li::marker { font-weight: 800; }
.article-callout { border-left: .1875rem solid #bd7a00; padding: 1.25rem 1.5rem; background: #e9e2d4; border-radius: 0 .5rem .5rem 0; }.article-callout .callout-title { font-weight: 800; margin-bottom: .5rem; font-size: 1rem; }.article-callout p:not(.callout-title) { font-size: 1rem; line-height: 1.75; }
.article-content .product-demo { padding: 1.75rem; border-radius: 1rem; background: radial-gradient(ellipse at 90% 0, #4b3c24, #181818 70%); margin-block: 2.5rem 1.5rem; }.article-content .demo-window { max-width: 34rem; margin: auto; }.article-context { font-size: 1rem; color: var(--paper-soft); padding-bottom: 1rem; }.article-context a { color: var(--paper-ink); font-weight: 700; }
.article-aside { position: sticky; top: 2rem; font-size: .9375rem; line-height: 1.7; color: var(--paper-soft); }.article-toc p, .article-toc summary { font-weight: 800; color: var(--paper-ink); font-size: .9375rem; }.article-toc nav { display: grid; gap: .5rem; margin-top: 1.25rem; }.article-toc a { display: flex; align-items: center; min-block-size: 2.75rem; text-decoration: none; }.article-aside > p { font-size: 1.5rem; font-weight: 700; line-height: 1.35; letter-spacing: -.035em; color: var(--paper-ink); margin-top: 2.5rem; }.article-aside > a { display: inline-block; color: var(--paper-ink); margin-top: 1rem; font-weight: 700; }.mobile-toc { display: none; }.mobile-toc summary { padding-block: .625rem; min-block-size: 2.75rem; }
.article-related { margin-block: 4rem; }.article-related .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }.article-related .blog-card-art { min-height: 10rem; }
.article-sources { border-top: 1px solid #0002; padding-top: 2rem; }.article-sources h2 { font-size: 1.375rem; }.article-sources a { overflow-wrap: anywhere; }
.blog-empty { max-width: 48rem; padding-block: 4rem 7rem; }.blog-empty h1 { margin-block: 1rem 1.5rem; }.blog-empty > p:not(.blog-eyebrow) { margin-bottom: 2rem; font-size: 1.125rem; color: var(--ink-soft); }
.article-content :focus-visible { outline-color: #8a5b00; }
@media (hover: hover) { .blog-nav a:hover, .blog-read:hover { color: var(--accent); }.blog-card h3 a:hover, .feature-copy h2 a:hover { text-decoration: underline; }.blog-categories a:hover { border-color: #a8997c; }.feature-link:hover { text-decoration: underline; } }
@media (max-width: 1050px) {
  .blog-intro { gap: 2.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }.feature-copy { padding: 2rem; }.feature-product { padding: 1.75rem; }.demo-title { flex-wrap: wrap; }.demo-state { margin-left: 3.25rem; }
  .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.blog-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.25fr; }.blog-card:last-child:nth-child(odd) .blog-card-art { min-height: 100%; }
  .blog-conversion { gap: 2rem; padding: 2.5rem; }.article-layout { grid-template-columns: minmax(0, 1fr); padding: 2.5rem; }.article-aside { display: none; }.mobile-toc { display: block; border-block: 1px solid #0002; padding-block: 1rem; margin-bottom: 2rem; }.mobile-toc summary { cursor: pointer; }.mobile-toc summary span { margin-left: 1rem; }
}
@media (max-width: 700px) {
  .blog-page { --gutter: 1rem; }.blog-bar { gap: 1rem; }.blog-nav { gap: 1rem; font-size: .875rem; }.blog-bar .login { font-size: .875rem; }.blog-bar .login span { display: none; }.blog-bar .logo { block-size: 1.35rem; }
  .blog-main { padding-top: 2.5rem; }.blog-eyebrow { font-size: .75rem; }.blog-intro { grid-template-columns: 1fr; gap: 1.375rem; margin-bottom: 2rem; }.blog-intro h1 { font-size: 2.625rem; }.blog-intro > p { font-size: 1rem; line-height: 1.75; max-width: none; }
  .blog-feature { grid-template-columns: 1fr; border-radius: 1rem; }.feature-copy { padding: 1.5rem; gap: 1.25rem; }.feature-copy h2 { font-size: 2rem; }.feature-copy > p:not(.blog-meta) { font-size: 1rem; }.feature-product { padding: 1.5rem 1rem; }.demo-window { padding: 1rem; }.demo-title p { font-size: 1rem; }.demo-state { font-size: .75rem; }.product-demo-label { font-size: .75rem; }.demo-chat p, .demo-details p { font-size: .875rem; }
  .blog-library { margin-block: 3rem; }.library-heading { align-items: start; flex-wrap: wrap; gap: .75rem; }.library-heading h2 { font-size: 1.75rem; }.blog-categories { margin-block: 1.5rem; gap: .5rem; }.blog-categories a { font-size: .8125rem; padding: .625rem .875rem; }
  .blog-cards, .article-related .blog-cards { grid-template-columns: 1fr; gap: 1.25rem; }.blog-card:last-child:nth-child(odd) { display: block; }.blog-card:last-child:nth-child(odd) .blog-card-art { min-height: 10rem; }.blog-card-art { min-height: 10rem; }.blog-card-body { padding: 1.25rem; }.blog-card h3 { font-size: 1.5rem; }.blog-card-body > p:not(.blog-meta) { line-height: 1.75; }
  .blog-conversion { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.75rem; border-radius: 1rem; margin-block: 3rem; }.blog-conversion h2 { font-size: 2rem; }.conversion-actions { justify-items: stretch; gap: 1.25rem; }.conversion-demo { line-height: 1.6; text-align: center; font-size: .875rem; }.conversion-actions .cta { font-size: 1rem; gap: 1rem; }
  .blog-footer { display: grid; gap: 1rem; padding-bottom: 2rem; }.blog-footer nav { margin-left: 0; gap: 1rem; font-size: .8125rem; }
  .article-main { padding-top: 1.5rem; }.article-breadcrumbs { font-size: .8125rem; }.article-header { margin-block: 2rem; }.article-header h1 { font-size: 2.5rem; margin-block: 1rem 1.25rem; }.article-summary { font-size: 1.0625rem; line-height: 1.75; }.article-byline { font-size: .75rem; gap: .625rem .875rem; margin-top: 1.5rem; }
  .article-layout { padding: 1.5rem; border-radius: 1rem; }.article-content { font-size: 1rem; line-height: 1.8; }.article-content > h2 { font-size: 1.625rem; margin-top: 2.5rem; }.article-content > h3 { font-size: 1.25rem; }.article-content .product-demo { margin-inline: -.5rem; width: calc(100% + 1rem); padding: 1rem .75rem; }.article-callout { padding: 1rem; }.article-callout p:not(.callout-title) { font-size: 1rem; }.article-context { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .blog-page *, .blog-page *::before, .blog-page *::after { scroll-behavior: auto; transition: none; } }