/* Deepthena Blog: blog pages and post blocks. Marketing-only; never targets the chat widget. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope.woff2") format("woff2"); }

:root { --blog-accent: #4f46e5; --blog-accent-ink: #fff; --blog-ink: #101c2e; --blog-paper: #ffffff; --blog-soft: #f4f2ec; --blog-radius: 20px; --blog-heading: "Fraunces", Georgia, serif; --blog-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --blog-muted: #424c5e; }
.blog-main, .b-prose, .blog-post { font-family: var(--blog-body); color: var(--blog-ink); }
.blog-main { background: var(--blog-paper); }
.blog-main .container, .container--narrow { width: min(1180px, calc(100% - 56px)); margin-inline: auto; }
.blog-main .container.container--narrow, .container--narrow { width: min(760px, calc(100% - 40px)); }

/* ---------------------------------------------------------------- listing */
.blog-hero { position: relative; isolation: isolate; padding: 88px 0 72px; color: #fff; background: #0b1426; }
.blog-hero--photo { background: linear-gradient(90deg, rgba(11,20,38,.94), rgba(11,20,38,.7)), url("/images/v3/banner-services-1600.webp") center / cover, #0b1426; }
.blog-hero--plain { background: var(--blog-soft); color: var(--blog-ink); }
.blog-hero__eyebrow { margin: 0 0 14px; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffd27a; }
.blog-hero--plain .blog-hero__eyebrow { color: var(--blog-accent); }
.blog-hero__title { margin: 0; font-family: var(--blog-heading); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 540; line-height: 1.05; letter-spacing: -.02em; color: inherit; }
.blog-hero__lead { max-width: 620px; margin: 18px 0 0; font-size: 1.12rem; line-height: 1.6; font-weight: 500; opacity: .92; }
.blog-section { padding: 56px 0 80px; }
.blog-section--soft { background: var(--blog-soft); }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 10px; padding: 0; }
.blog-tag { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; background: var(--blog-soft); color: var(--blog-ink); font-size: .78rem; font-weight: 750; text-decoration: none; transition: background-color .15s, color .15s; }
.blog-tag:hover, .blog-tag.is-active { background: var(--blog-accent); color: var(--blog-accent-ink); }
.blog-section--soft .blog-tag { background: #fff; }
.blog-grid { display: grid; gap: 24px; }
.blog-grid--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-grid--list { grid-template-columns: 1fr; }
.blog-grid--magazine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-grid--magazine .blog-card--featured { grid-column: 1 / -1; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--blog-radius); background: var(--blog-soft); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.blog-section--soft .blog-card { background: #fff; }
.blog-card:hover { transform: translateY(-4px); }
.blog-card--outlined { background: #fff; box-shadow: 0 0 0 1.5px #e3dfd3 inset; }
.blog-card--shadow { background: #fff; box-shadow: 0 10px 30px rgba(16,28,46,.1); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--blog-soft), #e3dfd3); overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__media--empty { background: linear-gradient(135deg, var(--blog-accent), #101c2e); opacity: .9; }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.blog-card__title { margin: 0; font-family: var(--blog-heading); font-size: 1.35rem; font-weight: 560; line-height: 1.2; }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--blog-accent); }
.blog-card__excerpt { margin: 0; color: var(--blog-muted); font-size: .97rem; line-height: 1.6; font-weight: 500; }
.blog-grid--list .blog-card { flex-direction: row; }
.blog-grid--list .blog-card__media { flex: 0 0 34%; aspect-ratio: auto; min-height: 190px; }
.blog-card--featured { flex-direction: row; }
.blog-card--featured .blog-card__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 340px; }
.blog-card--featured .blog-card__title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.blog-card--featured .blog-card__body { justify-content: center; padding: 36px; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--blog-muted); font-size: .84rem; font-weight: 650; }
.blog-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.blog-pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; }
.blog-pager__link { display: inline-flex; padding: 12px 22px; border-radius: 999px; background: var(--blog-ink); color: #fff; font-weight: 750; font-size: .9rem; text-decoration: none; }
.blog-pager__state { color: var(--blog-muted); font-weight: 650; font-size: .9rem; }
.blog-empty { display: grid; justify-items: center; gap: 14px; padding: 72px 0; text-align: center; }
.blog-empty h1, .blog-empty h2 { margin: 0; font-family: var(--blog-heading); font-weight: 560; }
.blog-empty p { margin: 0; color: var(--blog-muted); }

/* ---------------------------------------------------------------- post */
.blog-post__head { padding: 56px 0 28px; }
.blog-crumbs { display: flex; gap: 8px; margin: 0 0 20px; font-size: .84rem; font-weight: 700; color: var(--blog-muted); }
.blog-crumbs a { color: inherit; text-decoration: none; }
.blog-crumbs a:hover { color: var(--blog-accent); }
.blog-post__title { margin: 0; font-family: var(--blog-heading); font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 540; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--blog-ink); }
.blog-post__lead { margin: 18px 0 0; font-size: 1.2rem; line-height: 1.6; color: var(--blog-muted); font-weight: 500; }
.blog-post__cover { margin: 16px 0 40px; border-radius: var(--blog-radius); overflow: hidden; }
.blog-post__cover img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.blog-post__foot { padding: 40px 0 72px; }
.blog-related__title { margin: 0 0 24px; font-family: var(--blog-heading); font-size: 1.8rem; font-weight: 560; }

/* ---------------------------------------------------------------- prose and blocks */
.b-prose { font-size: 1.08rem; line-height: 1.75; color: var(--blog-ink); overflow-wrap: anywhere; }
.b-prose > :not(.b-section) { width: min(760px, calc(100% - 40px)); margin-inline: auto; }
.b-prose > .b-gallery, .b-prose > .b-imgrow, .b-prose > .b-cols, .b-prose > .b-cardgrid, .b-prose > .b-video, .b-prose > .b-img { width: min(1000px, calc(100% - 40px)); }
.b-text > *:first-child { margin-top: 0; }
.b-text h1, .b-text h2, .b-text h3, .b-text h4, .b-heading { font-family: var(--blog-heading); line-height: 1.2; letter-spacing: -.01em; margin: 2em 0 .6em; font-weight: 560; scroll-margin-top: 96px; }
.b-text h1, .b-text h2, h2.b-heading { font-size: 1.9rem; } .b-text h3, h3.b-heading { font-size: 1.45rem; } .b-text h4, h4.b-heading { font-size: 1.2rem; }
.b-text p, .b-text ul, .b-text ol, .b-text blockquote, .b-text pre { margin: 0 0 1.2em; }
.b-text ul, .b-text ol { padding-left: 1.4em; } .b-text li { margin: .3em 0; }
.b-text a { color: var(--blog-accent); text-decoration: underline; text-underline-offset: 3px; }
.b-text blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--blog-accent); color: var(--blog-muted); font-style: italic; }
.b-text pre { padding: 16px 18px; border-radius: 12px; background: #0e1524; color: #e9edf4; overflow-x: auto; font-size: .92rem; line-height: 1.6; }
.b-text code { padding: .1em .35em; border-radius: 6px; background: var(--blog-soft); font-size: .92em; } .b-text pre code { padding: 0; background: none; }
.b-text hr { border: 0; border-top: 1px solid #e3dfd3; margin: 2em 0; }
.b-align-left { text-align: left; } .b-align-center { text-align: center; } .b-align-right { text-align: right; }
.b-img { margin: 1.6em auto; } .b-img.b-align-center { margin-inline: auto; } .b-img.b-align-left { margin-left: 0; margin-right: auto; } .b-img.b-align-right { margin-left: auto; margin-right: 0; }
.b-prose > .b-img.b-align-left { margin-left: max(20px, calc((100% - min(1000px, 100% - 40px)) / 2)); }
.b-prose > .b-img.b-align-right { margin-right: max(20px, calc((100% - min(1000px, 100% - 40px)) / 2)); }
.b-img__el, .b-gallery__img, .b-card__img { display: block; width: 100%; height: auto; max-width: 100%; }
.b-img figcaption, .b-gallery figcaption, .b-video figcaption { margin-top: 8px; color: var(--blog-muted); font-size: .9rem; text-align: center; }
.b-gap-none { gap: 0; } .b-gap-s { gap: 10px; } .b-gap-m { gap: 20px; } .b-gap-l { gap: 36px; }
.b-gallery { display: grid; margin: 1.6em auto; } .b-gallery--2 { grid-template-columns: repeat(2, 1fr); } .b-gallery--3 { grid-template-columns: repeat(3, 1fr); } .b-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.b-gallery__item { margin: 0; }
.b-imgrow { display: flex; margin: 1.6em auto; } .b-imgrow--row { flex-direction: row; flex-wrap: wrap; } .b-imgrow--column { flex-direction: column; }
.b-imgrow > .b-img { margin: 0; } .b-imgrow--row > .b-img { flex: 0 0 auto; }
.b-ialign-start { align-items: flex-start; } .b-ialign-center { align-items: center; } .b-ialign-end { align-items: flex-end; }
.b-video { margin: 1.6em auto; } .b-video__frame { position: relative; width: 100%; background: #0b1426; border-radius: var(--blog-radius); overflow: hidden; }
.b-video__frame iframe, .b-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--blog-radius); background: var(--blog-soft); }
.b-card--outlined { background: #fff; box-shadow: 0 0 0 1.5px #e3dfd3 inset; } .b-card--shadow { background: #fff; box-shadow: 0 10px 30px rgba(16,28,46,.1); }
.b-card__body { padding: 20px 22px 24px; } .b-card__title { margin: 0 0 8px; font-family: var(--blog-heading); font-size: 1.3rem; font-weight: 560; } .b-card__cta { margin: 14px 0 0; }
.b-card .b-text { font-size: .97rem; line-height: 1.6; }
.b-cardgrid { display: grid; margin: 1.6em auto; } .b-cardgrid--1 { grid-template-columns: 1fr; } .b-cardgrid--2 { grid-template-columns: repeat(2, 1fr); } .b-cardgrid--3 { grid-template-columns: repeat(3, 1fr); } .b-cardgrid--4 { grid-template-columns: repeat(4, 1fr); }
.b-callout { margin: 1.6em auto; padding: 18px 22px; border-radius: 14px; border-left: 5px solid var(--blog-accent); background: #eef0ff; }
.b-callout--success { border-color: #1f8a5b; background: #e8f6ee; } .b-callout--warning { border-color: #c77712; background: #fff3d6; } .b-callout--note { border-color: #6b7280; background: var(--blog-soft); }
.b-callout__title { display: block; margin-bottom: 6px; } .b-callout .b-text > *:last-child { margin-bottom: 0; }
.b-quote { margin: 2em auto; padding: 0 0 0 22px; border-left: 4px solid var(--blog-accent); } .b-quote p { margin: 0; font-family: var(--blog-heading); font-size: 1.5rem; line-height: 1.4; font-style: italic; } .b-quote cite { display: block; margin-top: 10px; font-size: .9rem; font-style: normal; color: var(--blog-muted); font-weight: 700; }
.b-btnwrap { margin: 1.4em auto; }
.b-btn { display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 999px; font-weight: 750; font-size: .95rem; text-decoration: none; }
.b-btn--primary { background: var(--blog-accent); color: var(--blog-accent-ink); } .b-btn--secondary { background: var(--blog-ink); color: #fff; } .b-btn--ghost { background: transparent; color: var(--blog-ink); box-shadow: 0 0 0 2px var(--blog-ink) inset; }
.b-divider { border: 0; margin: 2.4em auto; border-top: 1px solid #e3dfd3; } .b-divider--thick { border-top-width: 4px; border-color: var(--blog-ink); width: 80px !important; margin-left: auto; } .b-divider--dots { border: 0; height: 10px; background: radial-gradient(circle, #9aa3b2 2px, transparent 2.5px) center / 18px 10px repeat-x; }
.b-spacer--xs { height: 12px; } .b-spacer--s { height: 24px; } .b-spacer--m { height: 48px; } .b-spacer--l { height: 80px; } .b-spacer--xl { height: 128px; }
.b-toc { margin: 1.6em auto; padding: 18px 22px; border-radius: 14px; background: var(--blog-soft); } .b-toc ol { margin: 8px 0 0; padding-left: 1.2em; } .b-toc a { color: var(--blog-ink); font-weight: 650; text-decoration: none; } .b-toc a:hover { color: var(--blog-accent); } .b-toc__l3 { margin-left: 1em; list-style: circle; } .b-toc__l4 { margin-left: 2em; list-style: square; }
.b-section { padding-block: 24px; } .b-section--soft { background: var(--blog-soft); } .b-section--dark { background: #101c2e; color: #fff; } .b-section--dark .b-text, .b-section--dark .b-heading { color: #fff; } .b-section--dark .b-text a { color: #aebeff; } .b-section--accent { background: var(--blog-accent); color: var(--blog-accent-ink); } .b-section--accent .b-text, .b-section--accent .b-heading { color: inherit; }
.b-py-none { padding-block: 0; } .b-py-s { padding-block: 16px; } .b-py-m { padding-block: 40px; } .b-py-l { padding-block: 80px; }
.b-section__in { margin-inline: auto; } .b-w-narrow .b-section__in { width: min(760px, calc(100% - 40px)); } .b-w-normal .b-section__in { width: min(1000px, calc(100% - 40px)); } .b-w-wide .b-section__in { width: min(1240px, calc(100% - 40px)); } .b-w-full .b-section__in { width: 100%; }
.b-section .b-text, .b-section .b-heading { margin-inline: 0; }
.b-cols { display: grid; margin: 1em auto; } .b-cols--2.b-cols--1-1 { grid-template-columns: 1fr 1fr; } .b-cols--2.b-cols--1-2 { grid-template-columns: 1fr 2fr; } .b-cols--2.b-cols--2-1 { grid-template-columns: 2fr 1fr; } .b-cols--3 { grid-template-columns: repeat(3, 1fr); }
.b-valign-top { align-items: start; } .b-valign-center { align-items: center; } .b-valign-bottom { align-items: end; }
.b-col { min-width: 0; } .b-col > :first-child { margin-top: 0; }
.b-section .b-img, .b-section .b-video, .b-col .b-img, .b-col .b-video, .b-section .b-gallery, .b-section .b-imgrow, .b-section .b-cols, .b-section .b-cardgrid, .b-section .b-callout, .b-section .b-quote, .b-section .b-toc, .b-section .b-btnwrap { width: auto; max-width: 100%; }
.b-section .b-text, .b-section .b-heading, .b-col .b-text, .b-col .b-heading { width: auto; max-width: none; }
.b-section .b-img { margin-block: 1em; } .b-section .b-img.b-align-center { margin-inline: auto; }
.b-placeholder { margin: 8px 0; padding: 18px; border: 2px dashed #c9c4b4; border-radius: 12px; color: #6b7280; font-size: .9rem; text-align: center; background: rgba(255,255,255,.6); }
@media (max-width: 860px) {
  .blog-grid--grid, .blog-grid--magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card--featured, .blog-grid--list .blog-card { flex-direction: column; } .blog-card--featured .blog-card__media, .blog-grid--list .blog-card__media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .b-cardgrid--3, .b-cardgrid--4 { grid-template-columns: repeat(2, 1fr); } .b-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid--grid, .blog-grid--magazine { grid-template-columns: 1fr; } .blog-hero { padding: 64px 0 48px; }
  .b-cols, .b-cols--2.b-cols--1-1, .b-cols--2.b-cols--1-2, .b-cols--2.b-cols--2-1, .b-cols--3, .b-cardgrid--2, .b-cardgrid--3, .b-cardgrid--4 { grid-template-columns: 1fr; }
  .b-gallery--3, .b-gallery--2 { grid-template-columns: repeat(2, 1fr); }
  .b-imgrow--row { flex-direction: column; } .b-imgrow--row > .b-img { width: 100% !important; }
  .b-py-l { padding-block: 48px; }
}
@media (prefers-reduced-motion: reduce) { .blog-card, .blog-card__media img { transition: none; } }

.blog-search { display: flex; gap: 8px; margin-top: 22px; max-width: 460px; } .blog-search input { flex: 1; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; color: #101c2e; background: #fff; }
.blog-search button { padding: 0 22px; border: 0; border-radius: 999px; background: var(--blog-accent); color: var(--blog-accent-ink); font: inherit; font-weight: 750; cursor: pointer; }
.blog-pin { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #ffe7b0; color: #6b4300; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.adm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Hero text must stay readable on the dark banner (site-wide paragraph colour would otherwise win). */
.blog-main .blog-hero .blog-hero__title { color: #fff; }
.blog-main .blog-hero .blog-hero__lead { color: rgba(255,255,255,.94); opacity: 1; text-shadow: 0 1px 12px rgba(5,10,20,.55); }
.blog-main .blog-hero .blog-hero__eyebrow { color: #ffd27a; }
.blog-main .blog-hero--plain .blog-hero__title { color: var(--blog-ink); }
.blog-main .blog-hero--plain .blog-hero__lead { color: var(--blog-muted); text-shadow: none; }
.blog-main .blog-hero--plain .blog-hero__eyebrow { color: var(--blog-accent); }
.blog-hero .blog-search input { color: var(--blog-ink); background: #fff; }

/* Key takeaways, FAQ and table blocks */
.b-takeaways { margin: 1.6em auto; padding: 20px 24px; border-radius: 14px; background: var(--blog-soft); border: 1.5px solid #e3dfd3; }
.b-takeaways__title { display: block; margin-bottom: 8px; font-family: var(--blog-heading); font-size: 1.15rem; }
.b-takeaways ul { margin: 0; padding-left: 1.2em; } .b-takeaways li { margin: .35em 0; line-height: 1.55; }
.b-faq { margin: 2em auto; } .b-faq__title { margin: 0 0 14px; }
.b-faq__item { border-bottom: 1.5px solid #e3dfd3; } .b-faq__item summary { cursor: pointer; padding: 16px 28px 16px 0; font-weight: 700; list-style: none; position: relative; }
.b-faq__item summary::-webkit-details-marker { display: none; }
.b-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--blog-accent); }
.b-faq__item[open] summary::after { content: "\2212"; }
.b-faq__a { padding: 0 0 16px; color: var(--blog-muted); } .b-faq__a p { margin: 0 0 .8em; }
.b-table { margin: 1.8em auto; } .b-table__scroll { overflow-x: auto; border-radius: 12px; box-shadow: 0 0 0 1.5px #e3dfd3 inset; }
.b-table table { width: 100%; border-collapse: collapse; font-size: .96rem; } .b-table caption { caption-side: bottom; padding: 10px 4px 0; color: var(--blog-muted); font-size: .84rem; text-align: left; }
.b-table th, .b-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #ece8dc; vertical-align: top; }
.b-table thead th { background: var(--blog-ink); color: #fff; font-weight: 700; } .b-table tbody th { font-weight: 700; } .b-table tbody tr:last-child > * { border-bottom: 0; }
.blog-meta__edit { margin-left: 8px; }
.blog-editbar { position: fixed; right: 18px; top: 88px; z-index: 40; display: none; gap: 8px; }
.blog-editbar.is-on { display: flex; }
.blog-editbar a { display: inline-flex; padding: 12px 20px; border-radius: 999px; background: #101c2e; color: #fff; font-weight: 750; font-size: .9rem; text-decoration: none; box-shadow: 0 8px 24px rgba(16,28,46,.35); }
.blog-editbar a:hover { background: var(--blog-accent); }

/* Pagination numbers, share links, previous/next, code blocks, right-to-left posts */
.blog-pager { flex-wrap: wrap; }
.blog-pager__nums { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.blog-pager__num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; background: var(--blog-soft); color: var(--blog-ink); font-weight: 750; font-size: .9rem; text-decoration: none; }
a.blog-pager__num:hover { background: var(--blog-accent); color: var(--blog-accent-ink); }
.blog-pager__num.is-current { background: var(--blog-ink); color: #fff; }
.blog-pager__gap { display: inline-flex; align-items: center; height: 40px; color: var(--blog-muted); }
.blog-pager a:focus-visible, .blog-share a:focus-visible, .blog-adjacent a:focus-visible, .blog-tag:focus-visible, .blog-card a:focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 3px; }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 28px; padding: 18px 0; border-top: 1.5px solid #e3dfd3; border-bottom: 1.5px solid #e3dfd3; }
.blog-share__title { font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blog-muted); }
.blog-share ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.blog-share__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--blog-soft); color: var(--blog-ink); font-weight: 750; font-size: .88rem; text-decoration: none; }
.blog-share__link:hover { background: var(--blog-accent); color: var(--blog-accent-ink); }
.blog-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 28px; }
.blog-adjacent a { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--blog-radius); background: var(--blog-soft); color: var(--blog-ink); text-decoration: none; }
.blog-adjacent a span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blog-muted); font-weight: 750; }
.blog-adjacent a strong { font-family: var(--blog-heading); font-weight: 560; line-height: 1.25; }
.blog-adjacent__next { text-align: right; }
.blog-adjacent a:hover strong { color: var(--blog-accent); }
.b-code { position: relative; margin: 1.8em auto; }
.b-code pre { margin: 0; padding: 18px 20px; overflow-x: auto; border-radius: 12px; background: #0f1b2d; color: #e8edf7; font: 500 .88rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; -webkit-overflow-scrolling: touch; }
.b-code pre:focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 2px; }
.b-code code { font: inherit; white-space: pre; }
.b-code__lang { position: absolute; top: 8px; right: 12px; z-index: 1; font: 750 .7rem/1 var(--blog-body); letter-spacing: .12em; text-transform: uppercase; color: #9fb0cc; }
.b-code figcaption { margin-top: 8px; color: var(--blog-muted); font-size: .86rem; }
.blog-post[dir="rtl"] .b-quote { padding: 0 22px 0 0; border-left: 0; border-right: 4px solid var(--blog-accent); }
.blog-post[dir="rtl"] .b-callout { border-left: 0; border-right: 5px solid var(--blog-accent); }
.blog-post[dir="rtl"] .b-callout--success { border-right-color: #1f8a5b; } .blog-post[dir="rtl"] .b-callout--warning { border-right-color: #c77712; } .blog-post[dir="rtl"] .b-callout--note { border-right-color: #6b7280; }
.blog-post[dir="rtl"] .b-table th, .blog-post[dir="rtl"] .b-table td { text-align: right; }
.blog-post[dir="rtl"] .b-faq__item summary { padding: 16px 0 16px 28px; } .blog-post[dir="rtl"] .b-faq__item summary::after { right: auto; left: 4px; }
.blog-post[dir="rtl"] .b-code pre, .blog-post[dir="rtl"] .b-code code { direction: ltr; text-align: left; }
.blog-card[dir="rtl"] .blog-card__body { text-align: right; }
@media (max-width: 640px) { .blog-adjacent { grid-template-columns: 1fr; } .blog-adjacent__next { text-align: left; } .blog-pager__state { order: 5; width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .blog-card, .blog-card__media img { transition: none; } .blog-card:hover { transform: none; } .blog-card:hover .blog-card__media img { transform: none; } }

/* Anchors clear the sticky header; keyboard focus is always visible; print is clean. */
.b-prose :is(h2, h3, h4)[id] { scroll-margin-top: 96px; }
.blog-main :is(a, button, summary, input, [tabindex]):focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 3px; border-radius: 6px; }
.b-faq__item summary:focus-visible { outline-offset: -3px; }
@media print {
  .blog-editbar, .blog-share, .blog-adjacent, .blog-pager, .blog-search, .blog-filter, .v3-cta, .blog-section--soft { display: none !important; }
  .blog-hero { background: none !important; color: #000 !important; padding: 0 0 12px; }
  .blog-main .blog-hero .blog-hero__title, .blog-main .blog-hero .blog-hero__lead { color: #000 !important; text-shadow: none; }
  .b-faq__item:not([open]) .b-faq__a { display: block; }
  .b-code pre { white-space: pre-wrap; background: #fff; color: #000; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* ---- Layout polish (audit 2): widths, lists, sections, cards, tables ---- */
/* Image width is a percentage of the content width (--w), so a 100% image fits its column instead of overflowing it. */
.b-img { width: calc(100% * var(--w, 100) / 100); }
.b-prose > .b-img { width: calc(min(1000px, 100% - 40px) * var(--w, 100) / 100); }
.b-section .b-img, .b-col .b-img { width: calc(100% * var(--w, 100) / 100); max-width: 100%; }
.b-imgrow--row > .b-img { flex: var(--w, 100) 1 0; width: auto; min-width: 0; }
.b-imgrow--column > .b-img { flex: 0 0 auto; }
@media (max-width: 640px) { .b-imgrow--row > .b-img { flex: 0 0 auto; width: calc(100% * var(--w, 100) / 100) !important; } }
/* Lists keep their markers (the site reset removes them). */
.b-text ul { list-style: disc; } .b-text ol { list-style: decimal; } .b-text ul ul { list-style: circle; }
.blog-post[dir="rtl"] .b-text ul, .blog-post[dir="rtl"] .b-text ol { padding-left: 0; padding-right: 1.4em; }
.b-takeaways ul { list-style: none; padding-left: 0; }
.b-takeaways li { position: relative; padding-left: 1.7em; }
.b-takeaways li::before { content: ""; position: absolute; left: 0; top: .55em; width: .9em; height: .5em; border-left: 2.5px solid var(--blog-accent); border-bottom: 2.5px solid var(--blog-accent); transform: rotate(-45deg) scale(.9); }
.blog-post[dir="rtl"] .b-takeaways li { padding-left: 0; padding-right: 1.7em; } .blog-post[dir="rtl"] .b-takeaways li::before { left: auto; right: 0; }
.b-toc ol { list-style: none; padding-left: 0; } .b-toc li { margin: .35em 0; } .b-toc__l3 { margin-left: 1.1em; } .b-toc__l4 { margin-left: 2.2em; }
/* Text on dark and accent sections stays readable. */
main .b-section--dark .b-text, main .b-section--dark .b-text p, main .b-section--dark .b-text li, main .b-section--dark .b-text blockquote, main .b-section--dark .b-quote p, main .b-section--dark .b-quote cite, main .b-section--dark .b-heading { color: #f1f4fa; }
main .b-section--accent .b-text, main .b-section--accent .b-text p, main .b-section--accent .b-text li, main .b-section--accent .b-text blockquote, main .b-section--accent .b-quote p, main .b-section--accent .b-quote cite, main .b-section--accent .b-heading { color: var(--blog-accent-ink); }
.b-section--dark .b-quote, .b-section--accent .b-quote { border-color: currentColor; }
.b-section--accent .b-text a { color: inherit; text-decoration: underline; }
/* Full-width sections: text keeps a margin, images and video run edge to edge. */
.b-w-full .b-section__in > .b-heading, .b-w-full .b-section__in > .b-text, .b-w-full .b-section__in > .b-btnwrap, .b-w-full .b-section__in > .b-quote, .b-w-full .b-section__in > .b-callout, .b-w-full .b-section__in > .b-takeaways { padding-inline: clamp(16px, 4vw, 48px); }
/* Cards: one image shape, equal heights, buttons on one line. */
.b-cardgrid { align-items: stretch; }
.b-card { height: 100%; }
.b-card__img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.b-card__body { display: flex; flex: 1; flex-direction: column; }
.b-card__cta { margin-top: auto; padding-top: 14px; }
/* Table captions sit above the table as a title. */
.b-table caption { caption-side: top; padding: 12px 14px 10px; color: var(--blog-ink); font-size: .95rem; font-weight: 700; text-align: start; }
/* Related posts heading, and mixed-language meta lines. */
.blog-section .blog-related__title { margin: 0 0 28px; line-height: 1.25; }
.blog-meta > * { unicode-bidi: isolate; }
.b-toc li { list-style: none; }
.b-heading { margin-bottom: .5em; } h2.b-heading { margin-top: 1.8em; } h3.b-heading { margin-top: 1.5em; } h4.b-heading { margin-top: 1.3em; } .b-heading:first-child { margin-top: 0; }

/* ---- Swipeable gallery (carousel) ---- */
.b-gallery--carousel { display: block; position: relative; }
.b-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--blog-radius); }
.b-carousel__track::-webkit-scrollbar { display: none; }
.b-carousel__track:focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 4px; }
.b-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.b-pv-2 .b-carousel__slide { flex-basis: calc((100% - 20px) / 2); } .b-pv-3 .b-carousel__slide { flex-basis: calc((100% - 40px) / 3); }
.b-pv-2 .b-gap-none .b-carousel__slide, .b-pv-3 .b-gap-none .b-carousel__slide { flex-basis: calc(100% / 2); }
.b-pv-3 .b-gap-none .b-carousel__slide { flex-basis: calc(100% / 3); }
.b-pv-2 .b-gap-s .b-carousel__slide { flex-basis: calc((100% - 10px) / 2); } .b-pv-3 .b-gap-s .b-carousel__slide { flex-basis: calc((100% - 20px) / 3); }
.b-pv-2 .b-gap-l .b-carousel__slide { flex-basis: calc((100% - 36px) / 2); } .b-pv-3 .b-gap-l .b-carousel__slide { flex-basis: calc((100% - 72px) / 3); }
.b-carousel__btn { position: absolute; top: calc(50% - 22px); z-index: 2; width: 44px; height: 44px; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgba(16, 28, 46, .78); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: opacity .15s, background-color .15s; }
.b-carousel__btn--prev { left: 12px; } .b-carousel__btn--next { right: 12px; }
.b-carousel__btn:hover:not(:disabled) { background: var(--blog-ink); } .b-carousel__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--blog-accent); }
.b-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.b-carousel__btn[hidden] { display: none; }
.b-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 10px; }
.b-carousel__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.b-carousel__dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--blog-ink); opacity: .28; transition: opacity .15s, transform .15s; }
.b-carousel__dot[aria-current="true"]::before { opacity: 1; background: var(--blog-accent); transform: scale(1.3); }
.b-carousel__dot:focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 0; border-radius: 50%; }
.blog-post[dir="rtl"] .b-carousel__btn--prev { left: auto; right: 12px; } .blog-post[dir="rtl"] .b-carousel__btn--next { right: auto; left: 12px; }
video.b-gallery__img { display: block; width: 100%; background: #101c2e; }
@media (max-width: 640px) { .b-pv-2 .b-carousel__slide, .b-pv-3 .b-carousel__slide, .b-pv-2 .b-gap-s .b-carousel__slide, .b-pv-3 .b-gap-s .b-carousel__slide, .b-pv-2 .b-gap-l .b-carousel__slide, .b-pv-3 .b-gap-l .b-carousel__slide { flex-basis: 88%; } .b-carousel__btn { width: 38px; height: 38px; font-size: 26px; } }
/* Tag chips: visible on every background, readable when selected; more room under the related-posts heading. */
.blog-section--soft .blog-card .blog-tag { background: var(--blog-soft); }
.blog-section--soft .blog-card .blog-tag:hover, .blog-section--soft .blog-card .blog-tag.is-active { background: var(--blog-accent); }
.blog-tag::selection, .blog-tag *::selection { background: #101c2e; color: #fff; }
.blog-section .blog-related__title { margin-bottom: 40px; }
.blog-section--soft { padding-top: 64px; }
@media (max-width: 640px) { .blog-section .blog-related__title { margin-bottom: 28px; } }
.b-section--dark .b-carousel__dot::before, .b-section--accent .b-carousel__dot::before { background: #fff; opacity: .4; }
.b-section--dark .b-carousel__dot[aria-current="true"]::before, .b-section--accent .b-carousel__dot[aria-current="true"]::before { opacity: 1; background: #fff; }
.b-section--dark .b-carousel__btn, .b-section--accent .b-carousel__btn { background: rgba(255, 255, 255, .92); color: #101c2e; }
/* Grid and flex children may shrink below their content, so a wide gallery or table can never stretch a column. */
.b-cols > *, .b-col, .b-cardgrid > *, .b-gallery, .b-gallery--carousel, .b-carousel__track { min-width: 0; }
.b-gallery--carousel, .b-carousel__track { max-width: 100%; }