/*
  Buffer v3 blog articles (/blog/<slug>): a reskin of the v1 article page,
  the article part of buffer-blog.css, in the v3 tokens and type. The
  handoff has no article frame, so the geometry is v1's and each
  component takes the v3 look of its nearest relative: white cards on Warm
  White (the blog index and the legal contents card), sage notices, and the
  navy CTA panel from the home page. Nav, footer, cards, badges and the menu
  come from v3-site.css and v3-blog.css.
*/

/* Proportional figures in the prose, as on the legal pages: Inter's
   tabular feature also widens the hyphen, which pulls words like
   "wellness-program" apart. Tables and read times stay tabular. */
.v3-article-main { font-variant-numeric: normal; }
.v3-article-table,
.v3-article-main .v3-post-time { font-variant-numeric: tabular-nums; }

.v3-article-page { padding: clamp(100px, 12vw, 140px) clamp(16px, 4vw, 48px) 0; }

/* Every list's markers in Trust Teal, as live colours them in its accent. */
.v3-article-page li::marker { color: var(--accent); }

.v3-article-main { max-width: 1044px; margin: 0 auto; }

.v3-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.v3-breadcrumb a { color: var(--text-2); text-decoration: none; }
.v3-breadcrumb .v3-i { color: var(--text-3); }
.v3-breadcrumb li { display: flex; }

.v3-article-header {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 820px;
}

.v3-article-header .v3-post-meta { gap: 12px; }
.v3-article-header .v3-aud-badge { height: 26px; padding: 0 11px; }

.v3-article-title {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}

.v3-article-dek {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.v3-article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  font-size: 14px;
  color: var(--text-2);
}

.v3-article-byline .v3-post-time { font-size: 14px; }
.v3-article-author { color: var(--ink); font-weight: 500; }
.v3-article-byline a { color: inherit; text-decoration: underline; text-decoration-color: rgb(var(--teal-rgb) / .5); text-underline-offset: 3px; }

.v3-article-cover {
  margin-top: 40px;
  aspect-ratio: 2 / 1;
  border-radius: clamp(20px, 2.4vw, 24px);
  box-shadow: var(--shadow-float);
}

@media (max-width: 767px) {
  .v3-article-cover { aspect-ratio: 4 / 3; }
}

.v3-article-grid {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.v3-article-content { min-width: 0; }

@media (max-width: 1023px) {
  .v3-article-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ contents */

/* A sticky card beside the article on desktop, like the legal contents
   card, and scrollable if it is taller than the window... */
.v3-toc {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 20px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.v3-toc-title { padding: 6px 12px 10px; }

.v3-toc-link {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.v3-toc-link[aria-current] { background: var(--zone); color: var(--ink); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .v3-toc-link:not([aria-current]):hover { background: var(--tray); }
}

@media (max-width: 1023px) {
  .v3-toc, .v3-toc-spacer { display: none; }
}

/* ...and a collapsible card above it on smaller screens. Its focus ring
   goes around the card, which clips its own contents. */
.v3-toc-mobile {
  display: none;
  flex-direction: column;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .v3-toc-mobile { display: flex; }
}

.v3-toc-mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.v3-toc-mobile summary:focus-visible { outline: none; }
.v3-toc-mobile:has(summary:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.v3-toc-mobile summary::-webkit-details-marker { display: none; }
.v3-toc-mobile summary span { display: inline-flex; align-items: center; gap: 10px; }
.v3-toc-mobile summary span .v3-i { color: var(--accent); }
.v3-toc-mobile .v3-toc-chevron { transition: transform var(--dur-base) var(--ease); }
.v3-toc-mobile[open] .v3-toc-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .v3-toc-mobile .v3-toc-chevron { transition: none; }
}

.v3-toc-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 12px;
}

.v3-toc-mobile-list .v3-toc-link { padding: 10px 12px; font-size: 15px; }

/* --------------------------------------------------------------- prose */

.v3-article-body {
  display: flex;
  flex-direction: column;
  font-size: clamp(17px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
}

.v3-article-body > p,
.v3-article-body li { text-wrap: pretty; }

.v3-article-body > p { margin: 0 0 24px; }

.v3-article-body strong { font-weight: 600; color: var(--ink); }

/* Live sets emphasis in italics; v3 has none, so emphasis takes the v3
   accent instead (as .v3-accent does in headlines): upright Trust Teal. */
.v3-article-body em,
.v3-article-takeaways em,
.v3-article-faq em,
.v3-article-note-body em { color: var(--accent); }

.v3-article-body a,
.v3-article-sources a,
.v3-article-takeaways a,
.v3-article-faq a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--teal-rgb) / .6);
}

@media (hover: hover) and (pointer: fine) {
  .v3-article-body a:hover,
  .v3-article-sources a:hover,
  .v3-article-takeaways a:hover,
  .v3-article-faq a:hover { text-decoration-color: var(--accent); }
}

/* Headings are focused when a contents link lands on them; they are not
   Tab stops, so they draw no ring. */
.v3-article-body h2 {
  margin: 20px 0 16px;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
  scroll-margin-top: 110px;
  outline: none;
  text-wrap: balance;
}

.v3-article-body h3 {
  margin: 8px 0 12px;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}

.v3-article-body h4 {
  margin: 4px 0 10px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

.v3-article-body ul,
.v3-article-body ol {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
}

.v3-article-body ul { padding-left: 24px; gap: 10px; }
.v3-article-body ol { padding-left: 26px; gap: 12px; }
.v3-article-body ul > li { padding-left: 4px; }
.v3-article-body ol > li { padding-left: 6px; }
.v3-article-body li > p { margin: 0 0 8px; }
.v3-article-body li > p:last-child { margin-bottom: 0; }
.v3-article-body li > ul, .v3-article-body li > ol { margin: 10px 0 0; }

/* A pull quote in the heading face, upright: v3 has no serif or italic. */
.v3-pull-quote {
  margin: 8px 0 36px;
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v3-pull-quote .v3-i { color: var(--accent); }

.v3-pull-quote blockquote {
  margin: 0;
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.v3-pull-quote blockquote p { margin: 0; }
.v3-pull-quote blockquote p + p { margin-top: 12px; }

.v3-table-block { margin: 8px 0 32px; }

/* As on live: each cell has 8px of padding on both sides and the table
   reaches 8px past the text column, so every column's text lines up with
   the prose. The row rules are painted only under the text. */
.v3-table-scroll {
  overflow-x: auto;
  margin: 0 -8px;
  padding: 0 8px;
}

.v3-article-table {
  width: calc(100% + 16px);
  margin: 0 -8px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  --rule: rgb(var(--navy-rgb) / .1);
}

.v3-article-table thead { --rule: rgb(var(--navy-rgb) / .14); }

.v3-article-table .v3-col-key { width: 38.96%; }

.v3-article-table th,
.v3-article-table td {
  padding-left: 8px;
  padding-right: 8px;
  text-align: left;
  background: linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px;
}

.v3-article-table th:first-child,
.v3-article-table td:first-child { background-position: 8px 100%; background-size: calc(100% - 8px) 1px; }

.v3-article-table th:last-child,
.v3-article-table td:last-child { background-size: calc(100% - 8px) 1px; }

.v3-article-table th:only-child,
.v3-article-table td:only-child { background-position: 8px 100%; background-size: calc(100% - 16px) 1px; }

/* Column labels in sentence case (CHANGES §4), as written. */
.v3-article-table th {
  padding-top: 0;
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: bottom;
  color: var(--text-2);
}

.v3-article-table td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: top;
  text-wrap: pretty;
}

.v3-article-table td:first-child { font-weight: 600; color: var(--ink); }
.v3-article-table strong { font-weight: 600; color: var(--ink); }

.v3-table-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-2);
}

@media (max-width: 767px) {
  .v3-table-scroll { margin: 0 -16px; padding: 0 16px; }
  .v3-table-hint { display: flex; }
}

.v3-article-note {
  margin: 4px 0 32px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--zone);
}

.v3-article-note .v3-i { margin-top: 2px; color: var(--accent); }

/* An editor's placeholder note: shown in previews only, never in public. */
.v3-article-editor-note {
  margin: 4px 0 32px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px dashed rgb(var(--navy-rgb) / .22);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}

.v3-article-editor-note p { margin: 0; }

.v3-article-editor-note-label {
  flex: none;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-700);
}
.v3-article-note-body { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.v3-article-note-body p { margin: 0; }
.v3-article-note-body p + p { margin-top: 8px; }
.v3-article-note-body a { text-decoration-color: currentColor; }

.v3-article-figure { margin: 8px 0 32px; }

.v3-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--tray);
}

.v3-article-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

.v3-article-body hr {
  margin: 12px 0 36px;
  border: 0;
  border-top: 1px solid var(--hairline);
}

.v3-article-body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--tray);
  font-family: ui-monospace, Menlo, monospace;
  font-size: .88em;
}

.v3-article-body pre {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--tray);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

.v3-article-body pre code { padding: 0; background: none; font-size: inherit; }

/* Key takeaways: a summary card before the article. */
.v3-article-takeaways {
  margin: 0 0 32px;
  padding: clamp(20px, 2.4vw, 24px) clamp(20px, 2.4vw, 28px);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.v3-article-takeaways h2 { margin: 0 0 14px; }

.v3-article-takeaways ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

.v3-article-takeaways li { padding-left: 4px; text-wrap: pretty; }

/* Questions answered in the article, as visible Q&A. */
.v3-article-faq { margin: 16px 0 40px; }

.v3-article-faq > h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
  scroll-margin-top: 110px;
  outline: none;
}

.v3-article-faq-item {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.v3-article-faq-item:last-child { border-bottom: 1px solid var(--hairline); }

.v3-article-faq-item h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

.v3-article-faq-answer {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

.v3-article-faq-answer p { margin: 0 0 10px; }
.v3-article-faq-answer p:last-child { margin-bottom: 0; }
.v3-article-faq-answer ul, .v3-article-faq-answer ol { margin: 0 0 10px; padding-left: 22px; }

/* ------------------------------------------------------ call to action */

/* The home page's navy CTA panel: a teal glow, the eyebrow in Soft Gold,
   the text in sage-300. The glow holds still, as on live. */
.v3-article-cta {
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--ink);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-float);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
}

.v3-article-cta-glow {
  position: absolute;
  bottom: -260px;
  left: -200px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgb(var(--teal-rgb) / .6) 0%, rgb(var(--teal-rgb) / .3) 45%, rgb(var(--teal-rgb) / 0) 100%);
  pointer-events: none;
  z-index: -1;
}

.v3-article-cta-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v3-article-cta .v3-blog-eyebrow { color: var(--on-navy-accent); }

.v3-article-cta h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--on-navy);
  text-wrap: balance;
}

.v3-article-cta p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-navy-2);
  text-wrap: pretty;
}

.v3-article-cta .v3-btn { position: relative; justify-self: start; }

@media (max-width: 767px) {
  .v3-article-cta { grid-template-columns: minmax(0, 1fr); }
  .v3-article-cta .v3-btn { justify-self: stretch; }
}

.v3-article-cta-caption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ------------------------------------------------------------- sources */

.v3-article-sources {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.v3-article-sources h2 { margin: 0 0 16px; }

.v3-article-sources ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v3-article-sources li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  padding-left: 4px;
}


.v3-article-source-title { font-weight: 500; color: var(--ink); }
.v3-article-source-publisher { color: var(--text-2); }

.v3-article-disclaimer {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.v3-article-sources h2 + .v3-article-disclaimer { margin-top: 0; }

.v3-article-back { margin-top: 40px; }

/* Author box under the article. */
.v3-article-author-box {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.v3-article-author-box img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--zone);
}

.v3-article-author-box-name { margin: 0; font-family: var(--heading); font-size: 15px; font-weight: 700; color: var(--ink); }
.v3-article-author-box-name a { color: inherit; text-decoration: none; }
.v3-article-author-box-name a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.v3-article-author-box-role { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.v3-article-author-box-bio { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* -------------------------------------------------------------- related */

.v3-related {
  max-width: 1200px;
  margin: clamp(64px, 8vw, 112px) auto 0;
}

.v3-related-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
}

.v3-related-head > div { display: flex; flex-direction: column; gap: 12px; }

.v3-related-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
}

.v3-related-head .v3-link { margin-bottom: 6px; }
.v3-related .v3-blog-grid { margin-top: 32px; }

@media print {
  .v3-nav, .v3-blog-sheet, .v3-toc, .v3-toc-mobile, .v3-article-cta, .v3-related, .v3-footer { display: none !important; }
  .v3-article-page { padding-top: 0; }
  .v3-article-grid { display: block; }
}