/* Article reading layout; loaded after shared typography. */
/* The FINTRAC guide groups its dated downloads and official source together. */
body.blog-article p:has(> a[href^="/assets/downloads/fintrac/"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body.blog-article p:has(> a[href^="/assets/downloads/fintrac/"]) > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #a9272e;
  border-radius: 6px;
  background: #a9272e;
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
body.blog-article p:has(> a[href^="/assets/downloads/fintrac/"]) > a:last-child {
  background: #fff;
  color: #a9272e;
}
body.blog-article p:has(> a[href^="/assets/downloads/fintrac/"]) > a:focus-visible {
  outline: 3px solid #1c4f80;
  outline-offset: 3px;
}
body.blog-article { background: #fff; --reading-header-offset: 108px; --reading-anchor-offset: 132px; }
body.blog-article main { background: #fff; }
body.blog-article .article-hero {
  display: block;
  min-height: 0;
  max-width: 1344px;
  margin: 0 auto;
  padding: 72px 48px 52px;
  background: #fff;
  color: #111315;
  border-bottom: 1px solid #e5e5e5;
}
body.blog-article .article-hero__meta { color: #777; gap: 20px; }
body.blog-article[data-site-section] main#main .article-hero .blog-label { color: #ad292e; letter-spacing: .06em; }
body.blog-article[data-site-section] main#main .article-hero h1 {
  max-width: 1140px;
  margin: 32px 0 0;
  font-size: clamp(34px,3.6vw,54px) !important;
  line-height: 1.5 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
body.blog-article .article-title-detail { display: block; margin-top: 14px; font-size: .62em; font-weight: 500; letter-spacing: -.015em; line-height: 1.6; }
body.blog-article .article-hero > p {
  max-width: 900px;
  margin: 32px 0 0;
  padding-top: 26px;
  border-top: 1px solid #e5e5e5;
  color: #636567;
  font-size: 17px;
  line-height: 1.95;
}
body.blog-article .article-hero__verification { margin-top: 22px; color: #777; font-size: 12px; }
body.blog-article .article-hero > a { margin-top: 24px; padding-bottom: 8px; color: #aa2429; border-bottom: 1px solid #dcbabc; font-weight: 500; }
body.blog-article .article-layout {
  max-width: 1344px;
  padding: 56px 48px 100px;
  grid-template-areas: "article-toc article-body";
  grid-template-columns: 244px minmax(0,1fr);
  gap: clamp(36px,5vw,72px);
  align-items: start;
  scroll-margin-top: var(--reading-anchor-offset);
}
body.blog-article .article-toc {
  top: var(--reading-header-offset);
  padding: 0 20px 0 0;
  border-left: 0;
  border-right: 1px solid #e7e7e7;
  background: #fff;
}
body.blog-article .article-toc > p { color: #8a8a8a; font-size: 10px; letter-spacing: .12em; }
body.blog-article[data-site-section] main#main .article-toc h2 { margin: 8px 0 20px; font-size: 20px; color: #111315; }
body.blog-article .article-toc ol {
  display: block;
  margin: 0;
  max-height: calc(100dvh - var(--reading-header-offset) - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d7d7d7 transparent;
  padding-right: 6px;
}
body.blog-article .article-toc__link {
  margin: 0;
  padding: 11px 9px;
  gap: 8px;
  grid-template-columns: 22px minmax(0,1fr);
  border: 0;
  border-left: 2px solid transparent;
  transition: background-color 150ms ease,color 150ms ease;
}
body.blog-article .article-toc__link span { font-size: 11px; color: #969696; font-weight: 400; }
body.blog-article .article-toc__link strong { font-size: 13px; line-height: 1.65; color: #666; font-weight: 400; }
body.blog-article .article-toc__link:is(:hover,:focus-visible,[aria-current="location"]) {
  background: #faf1f1;
  border-left-color: #c82d32;
  box-shadow: none;
  transform: none;
}
body.blog-article .article-toc__link:is(:hover,:focus-visible,[aria-current="location"]) :is(strong,span) { color: #ad292e; }
body.blog-article .article-toc__link[aria-current="location"] strong { font-weight: 600; }
body.blog-article .article-toc__link:focus-visible { outline: 2px solid #c82d32; outline-offset: -2px; }
.article-toc-toggle { display: none; }
body.blog-article .article-body [id] { scroll-margin-top: var(--reading-anchor-offset); }
body.blog-article .article-summary { padding-bottom: 32px; font-size: 18px; line-height: 1.9; color: #333; }
body.blog-article :is(.article-takeaways,.article-sources) { margin: 32px 0; padding: 26px 28px; background: #f7f7f5; border: 0; border-radius: 0; }
body.blog-article :is(.article-takeaways,.article-sources) > p { color: #aa2429; }
body.blog-article[data-site-section] main#main .article-markdown > :is(h1,h2) {
  padding: 24px 0 0;
  margin: 56px 0 24px;
  border-top: 1px solid #dedede;
  background: none;
  box-shadow: none;
  color: #111315;
  font-size: clamp(24px,2vw,30px) !important;
  line-height: 1.5 !important;
}
body.blog-article .article-markdown > :is(h1,h2)::before { content: ""; display: block; width: 28px; height: 2px; margin: -25px 0 22px; background: #c82d32; }
body.blog-article .article-markdown > p { margin: 22px 0; color: #3e4143; }
body.blog-article .article-markdown a { color: #a4272c; background: none; text-underline-offset: 4px; }
body.blog-article .article-markdown strong { color: #222; box-shadow: none; }
body.blog-article .article-markdown > .article-image--full { margin-inline: 0; }
body.blog-article .article-markdown li { background: #f7f7f5; border-left: 2px solid #d8c2c2; }
body.blog-article .article-markdown blockquote { background: #f7f7f5; border-color: #c82d32; border-radius: 0; box-shadow: none; }
body.blog-article .article-markdown table { font-size: 14px; }
body.blog-article[data-site-section] main#main .article-markdown td { font-size: 14px; line-height: 1.85; }
body.blog-article .article-markdown :is(thead,thead tr) { background: #252829 !important; }
body.blog-article .related-articles { background: #f7f7f5; }
@media(max-width:980px) {
  body.blog-article .article-hero { padding: 48px 28px 36px; }
  body.blog-article .article-layout { grid-template-areas: "article-toc" "article-body"; grid-template-columns: minmax(0,1fr); padding: 0 28px 64px; gap: 32px; }
  body.blog-article .article-toc { position: sticky; z-index: 20; padding: 12px 0; border-right: 0; border-bottom: 1px solid #dedede; }
  body.blog-article .article-toc ol { max-height: 36dvh; }
  body.blog-article .article-toc[data-enhanced] > :is(p,h2) { display: none; }
  .article-toc[data-enhanced] .article-toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; padding: 10px 0; background: #fff; color: #111315; font: 500 15px/1.5 var(--font-sans); cursor: pointer; }
  .article-toc-toggle span { color: #ad292e; font-size: 12px; }
  .article-toc-toggle:focus-visible { outline: 2px solid #c82d32; outline-offset: 2px; }
  body.blog-article .article-toc-toggle[aria-expanded="false"] + ol { display: none; }
  body.blog-article .article-toc-toggle[aria-expanded="true"] + ol { margin-top: 10px; }
}
@media(max-width:600px) {
  body.blog-article .article-hero { padding: 36px 22px 30px; }
  body.blog-article[data-site-section] main#main .article-hero h1 { margin-top: 24px; font-size: 30px !important; line-height: 1.55 !important; }
  body.blog-article .article-hero__meta { gap: 10px 18px; }
  body.blog-article .article-hero > p { margin-top: 24px; padding-top: 22px; font-size: 16px; }
  body.blog-article .article-layout { padding-right: 22px; padding-left: 22px; }
  body.blog-article .article-summary { font-size: 17px; }
  body.blog-article .article-markdown > .article-image { margin-inline: 0; }
  body.blog-article :is(.article-takeaways,.article-sources) { padding: 22px 18px; }
  body.blog-article[data-site-section] main#main .article-markdown :is(p,li) { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) { body.blog-article .article-toc__link { transition: none; } }

/* Wrap long identifiers and formulas without widening the reading column. */
body.blog-article :is(.article-body, .article-markdown) { min-width: 0; }
body.blog-article :is(.article-markdown, .article-sources) { overflow-wrap: anywhere; }
body.blog-article .article-markdown > :is(ul, ol) {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
body.blog-article .article-markdown :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory { margin: 40px 0; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__poster { display: block; margin: 0 0 34px; overflow: hidden; background: #101d2b; box-shadow: 0 18px 44px rgb(15 28 41 / 20%); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease,filter .25s ease; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__poster:is(:hover,:focus-visible) img { filter: saturate(1.06) contrast(1.03); transform: scale(1.012); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__poster:focus-visible { outline: 4px solid #ffca0a; outline-offset: 4px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta { position: relative; margin: 48px 0 40px; padding: 30px 32px 32px; overflow: hidden; border-top: 4px solid #ffca0a; background: linear-gradient(135deg,#172331 0%,#25384b 100%); box-shadow: 0 16px 36px rgb(15 28 41 / 18%); color: #fff; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta::after { position: absolute; right: -46px; bottom: -74px; width: 190px; height: 190px; border: 30px solid rgb(255 202 10 / 14%); border-radius: 50%; content: ""; pointer-events: none; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__eyebrow { margin: 0 0 8px; color: #ffca0a; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta #us-company-registration-cta { position: relative; z-index: 1; margin: 0; color: #fff; font-size: clamp(25px,3vw,36px); line-height: 1.35; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__copy { position: relative; z-index: 1; max-width: 700px; margin: 14px 0 22px; color: #dce4eb; font-size: 15px; line-height: 1.8; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid transparent; font-size: 14px; font-weight: 800; text-decoration: none; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__primary { background: #c82d32; color: #fff; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__secondary { border-color: rgb(255 255 255 / 55%) !important; color: #fff; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__actions a:is(:hover,:focus-visible) { outline: 3px solid #ffca0a; outline-offset: 2px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory > h2 { margin: 0 0 20px; font-size: clamp(24px,3vw,34px); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__controls { display: grid; grid-template-columns: minmax(240px,2fr) repeat(3,minmax(140px,1fr)); gap: 12px; padding: 18px; background: #f7f7f5; border-top: 3px solid #c82d32; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__controls label { display: grid; gap: 7px; color: #555; font-size: 12px; font-weight: 600; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__controls :is(input,select) { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #17191a; font: inherit; font-size: 14px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__controls :is(input,select):focus-visible { outline: 3px solid #d9a4a6; outline-offset: 1px; border-color: #a9272e; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__status { margin: 18px 0 12px; color: #666; font-size: 14px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #ddd; border-top: 3px solid #c82d32; background: #fff; box-shadow: 0 10px 28px rgb(20 20 20 / 7%); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card[hidden] { display: none; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > h3 { height: 78px; min-height: 78px; margin: 0 0 14px; overflow: hidden; font-size: 20px; line-height: 1.5; scroll-margin-top: var(--reading-anchor-offset); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > figure { margin: 0 0 16px; overflow: hidden; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__image-trigger { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #eef1f3; cursor: zoom-in; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__image-trigger img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: center; transition: transform .2s ease; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__image-trigger:is(:hover,:focus-visible) img { transform: scale(1.018); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__image-trigger:focus-visible { outline: 4px solid #ffca0a; outline-offset: -4px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > figure figcaption { min-height: 90px; padding-top: 9px; background: #fff; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > ul { display: grid; flex: 1; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 0; margin: 0; padding: 0; background: #f7f7f5; list-style: none; font-size: 14px; line-height: 1.65; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > ul > li { min-width: 0; padding: 9px 10px; border-bottom: 1px solid #e8e8e5; overflow-wrap: anywhere; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > ul > li:nth-child(n+3) { grid-column: 1 / -1; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 18px 10px 2px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__share-label { margin-right: 2px; color: #555; font-size: 13px; font-weight: 700; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions :is(a,button) { position: relative; display: inline-grid; width: 36px; height: 36px; min-height: 0; place-items: center; padding: 0; border: 1px solid #d2d2ce; border-radius: 50%; background: #fff; color: #c82d32; text-decoration: none; cursor: pointer; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions :is(a,button)::after { position: absolute; z-index: 4; bottom: calc(100% + 9px); left: 50%; width: max-content; max-width: 180px; padding: 6px 8px; border-radius: 3px; background: #202223; color: #fff; content: attr(data-tooltip); font-size: 12px; font-weight: 600; line-height: 1.25; opacity: 0; pointer-events: none; transform: translate(-50%,4px); transition: opacity .15s ease,transform .15s ease; white-space: nowrap; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions :is(a,button):is(:hover,:focus-visible)::after { opacity: 1; transform: translate(-50%,0); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions svg { width: 19px; height: 19px; fill: currentColor; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions .office-card__copy-link svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__actions :is(a,button):is(:hover,:focus-visible) { border-color: #a9272e; outline: 2px solid #e1b8ba; outline-offset: 1px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox { width: min(1120px,calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; overflow: hidden auto; border: 0; background: #111820; box-shadow: 0 24px 80px rgb(0 0 0 / 45%); color: #fff; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox[open] { display: grid; grid-template-rows: minmax(0,1fr) auto; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox::backdrop { background: rgb(8 13 18 / 86%); backdrop-filter: blur(5px); }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__image { display: block; width: 100%; height: min(72dvh,820px); object-fit: contain; background: #0b1016; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__copy { padding: 18px 72px 20px 24px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__copy h2 { margin: 0 0 5px; color: #fff; font-size: clamp(18px,2vw,24px); line-height: 1.4; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__copy p { margin: 0; color: #bfc8d1; font-size: 13px; line-height: 1.6; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__close { position: fixed; z-index: 2; top: max(34px,calc((100dvh - min(100dvh - 48px,900px))/2 + 12px)); right: max(34px,calc((100vw - min(100vw - 48px,1120px))/2 + 12px)); display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; background: rgb(10 15 21 / 78%); color: #fff; cursor: pointer; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__close i { font-size: 24px; }
body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__close:is(:hover,:focus-visible) { border-color: #ffca0a; outline: 3px solid rgb(255 202 10 / 35%); outline-offset: 2px; }
@media(max-width:980px) { body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__controls { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) {
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__poster { margin-bottom: 26px; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__controls,
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-directory__list { grid-template-columns: minmax(0,1fr); }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card { padding: 16px; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > h3 { height: auto; min-height: 0; overflow: visible; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card > figure figcaption { min-height: 0; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-card__image-trigger img { height: 300px; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta { padding: 24px 20px 26px; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-registration-cta__actions a { width: 100%; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox { width: 100vw; height: 100dvh; max-height: none; margin: 0; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__image { height: calc(100dvh - 116px); }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__copy { padding: 15px 62px 17px 18px; }
  body.blog-article[data-blog-slug="california-class-a-office-towers"] .office-lightbox__close { top: 14px; right: 14px; }
}
@media(prefers-reduced-motion:reduce) { body.blog-article[data-blog-slug="california-class-a-office-towers"] :is(.office-card__image-trigger img,.office-directory__poster img) { transition: none; } }

body.blog-article .article-code-copy {
  margin: 1.5rem 0;
  padding-top: 48px;
  position: relative;
  background: #1b2a3a;
}
body.blog-article .article-code-copy pre { margin: 0; }
body.blog-article .article-code-copy pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
body.blog-article .article-code-copy__button {
  position: absolute;
  top: 6px;
  right: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid #738395;
  border-radius: 5px;
  background: #263b50;
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.blog-article .article-code-copy__button:hover { background: #39516b; }
body.blog-article .article-code-copy__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.blog-article .article-code-copy__status {
  display: block;
  color: #fff;
  padding: 0 20px;
  font-size: 13px;
}
body.blog-article .article-code-copy__status:empty { display: none; }

body.blog-article .agent-client-demo { margin:24px 0; border:1px solid #dfe3e6; border-radius:14px; overflow:hidden; background:#fafafa; }
body.blog-article .agent-client-demo__toolbar { display:flex; justify-content:space-between; gap:12px; padding:18px 20px 8px; }
body.blog-article .agent-client-demo__toolbar span { font-size:12px; color:#777; }
body.blog-article .agent-client-demo__tabs { display:flex; gap:8px; flex-wrap:wrap; padding:8px 20px 18px; }
body.blog-article .agent-client-demo button { font:inherit; font-size:13px; border:1px solid #d8dcdf; border-radius:7px; background:#fff; color:#333; padding:8px 12px; cursor:pointer; min-height:38px; }
body.blog-article .agent-client-demo button[aria-pressed="true"] { background:#232629; color:white; }
body.blog-article .agent-client-demo button:focus-visible { outline:2px solid #1178a2; outline-offset:2px; }
body.blog-article .agent-client-demo__app { display:grid; grid-template-columns:150px minmax(0,1fr); border-block:1px solid #ddd; background:#fff; min-height:460px; }
body.blog-article .agent-client-demo__app aside { display:flex; flex-direction:column; gap:18px; padding:22px 14px; background:#f3f3f3; font-size:12px; color:#555; border-right:1px solid #e3e3e3; }
body.blog-article .agent-client-demo__app aside b { font-size:19px; color:#222; }
body.blog-article .agent-client-demo__app aside small { margin-top:15px; color:#888; }
body.blog-article .agent-client-demo__main { min-width:0; display:flex; flex-direction:column; padding:16px; }
body.blog-article .agent-client-demo__bar { display:flex; justify-content:space-between; font-size:12px; color:#777; }
body.blog-article .agent-client-demo__conversation { flex:1; padding:26px 0 16px; }
body.blog-article .agent-client-demo__conversation h4 { text-align:center; padding:22px 0; font-size:23px; font-weight:500; }
body.blog-article .agent-client-demo__bubble { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.6; background:#f0f1f2; border-radius:14px 14px 4px 14px; padding:14px; margin-left:20px; }
body.blog-article .agent-client-demo__reply { font-size:12px; color:#727272; padding-top:18px; }
body.blog-article .agent-client-demo__composer { position:relative; border:1px solid #d6d8da; border-radius:16px; box-shadow:0 3px 10px #00000008; background:white; }
body.blog-article .agent-client-demo textarea { display:block; width:100%; box-sizing:border-box; height:150px; padding:14px; background:transparent; border:0; border-radius:16px; resize:none; font:12px/1.65 ui-monospace,monospace; color:#262626; }
body.blog-article .agent-client-demo__actions { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; font-size:11px; color:#777; }
body.blog-article .agent-client-demo button[data-send] { border-radius:50%; background:#242629; color:white; width:36px; height:36px; padding:0; font-size:22px; }
body.blog-article .agent-client-demo__cursor { position:absolute; right:70px; bottom:65px; font-size:26px; color:#1c1c1c; filter:drop-shadow(1px 1px 0 white); opacity:0; pointer-events:none; }
body.blog-article .agent-client-demo[data-phase="pointing"] .agent-client-demo__cursor { opacity:1; transform:translate(43px,45px); transition:transform .6s,opacity .2s; }
body.blog-article .agent-client-demo[data-phase="clicking"] .agent-client-demo__cursor { opacity:1; transform:translate(43px,45px) scale(.85); }
body.blog-article .agent-client-demo[data-phase="clicking"] button[data-send] { box-shadow:0 0 0 7px #77b4ad55; transform:scale(.92); }
body.blog-article .agent-client-demo[data-product="Claude"] .agent-client-demo__app { background:#faf9f5; }
body.blog-article .agent-client-demo[data-product="Claude"] aside { background:#efeee7; }
body.blog-article .agent-client-demo[data-product="Claude"] .agent-client-demo__conversation h4 { font-family:Georgia,serif; color:#504139; }
body.blog-article .agent-client-demo[data-product="Claude"] button[data-send] { background:#c56e4e; }
body.blog-article .agent-client-demo__caption { padding:14px 20px; margin:0; font-size:13px; color:#68717a; }
@media(max-width:600px) { body.blog-article .agent-client-demo__app { grid-template-columns:minmax(0,1fr); } body.blog-article .agent-client-demo__app aside { display:none; } body.blog-article .agent-client-demo__main { padding:12px; } }
@media(prefers-reduced-motion:reduce) { body.blog-article .agent-client-demo__cursor { transition:none!important; } }
body.blog-article .agent-client-demo__brand { display:flex; align-items:center; gap:9px; }
body.blog-article .agent-client-demo__brand img { width:32px; height:32px; object-fit:contain; flex-shrink:0; border-radius:7px; }
body.blog-article .agent-client-demo__tabs button[data-product] { display:inline-flex; align-items:center; gap:7px; }
body.blog-article .agent-client-demo__tabs img { width:22px; height:22px; object-fit:contain; border-radius:5px; }
body.blog-article .agent-client-demo__reply { white-space:pre-wrap; line-height:1.7; }
body.blog-article .agent-client-demo[data-phase="complete"] .agent-client-demo__reply { padding:16px; margin-top:14px; border-left:3px solid #398770; background:#eff7f2; color:#305548; }
body.blog-article .agent-client-demo__desktop { height:150px; position:relative; background:linear-gradient(120deg,#d9e9fa,#e7def0); margin:0 16px 16px; border-radius:10px; padding:12px; font-size:12px; overflow:visible; z-index:2; }
body.blog-article .agent-client-demo__download { margin:18px auto; width:max-content; padding:10px 16px; background:white; border-radius:6px; color:#285278; }
body.blog-article .agent-client-demo__file { position:absolute; left:30px; top:50px; text-align:center; font-size:38px; opacity:0; color:#2b527b; }
body.blog-article .agent-client-demo__file small { display:block; font:11px sans-serif; padding:5px; background:#ffffffcc; border-radius:4px; }
body.blog-article .agent-client-demo[data-phase="desktop"] .agent-client-demo__file { opacity:1; }
body.blog-article .agent-client-demo[data-phase="desktop"] .agent-client-demo__download, body.blog-article .agent-client-demo[data-phase="dragging"] .agent-client-demo__download { opacity:0; }
body.blog-article .agent-client-demo[data-phase="dragging"] .agent-client-demo__file { opacity:1; animation:agent-zip-drag 1.2s ease-in-out forwards; }
@keyframes agent-zip-drag { to { transform:translate(180px,380px) scale(.75); opacity:.3; } }
body.blog-article .agent-client-demo__attachment { margin:12px 12px 0; padding:8px 12px; border-radius:7px; background:#ecf0f5; font-size:12px; color:#334b63; }
@media(max-width:600px) { @keyframes agent-zip-drag { to { transform:translate(60px,360px) scale(.65); opacity:.3; } } }
@media(prefers-reduced-motion:reduce) { body.blog-article .agent-client-demo__file { animation:none!important; } }
body.blog-article .agent-client-demo[data-flow="zip"]:not([data-phase="ready"]):not([data-phase="downloading"]):not([data-phase="desktop"]):not([data-phase="dragging"]) .agent-client-demo__download { visibility:hidden; }

body.blog-article .agent-client-demo.is-pinned {
  position:fixed; top:var(--pin-top); left:var(--pin-left); width:var(--pin-width);
  height:calc(100dvh - var(--pin-top) - 18px); max-height:850px;
  box-sizing:border-box; z-index:95; margin:0; display:flex; flex-direction:column;
  box-shadow:0 12px 40px #17283b24;
}
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__app { min-height:0; flex:1; overflow:hidden; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__main { min-height:0; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__conversation { min-height:0; overflow:auto; padding-top:12px; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__composer { flex-shrink:0; }
body.blog-article .agent-client-demo.is-pinned textarea { height:100px; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__desktop { height:95px; flex-shrink:0; margin-bottom:8px; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__file { top:26px; font-size:26px; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__download { margin:9px auto; }
body.blog-article .agent-client-demo.is-pinned .agent-client-demo__caption { flex-shrink:0; padding-block:8px; }
@media(max-height:740px) {
  body.blog-article .agent-client-demo.is-pinned .agent-client-demo__toolbar { padding:10px 12px 4px; }
  body.blog-article .agent-client-demo.is-pinned .agent-client-demo__tabs { padding:4px 12px 8px; }
  body.blog-article .agent-client-demo.is-pinned textarea { height:75px; }
}