/* ================================================================
   Terawatt 3.0 — Single Post 2026 (Insights template)
   Adds: breadcrumb, byline-row, framed hero-media, sticky TOC,
         3-col body grid, TL;DR, stat-callout, inline-CTA, key-takeaways,
         FAQ, sticky sidebar (lead-magnet + consult + related),
         next-steps banner, mobile sticky pill.
   Builds on tokens already declared in site.css.
   ================================================================ */

/* ---------- Breadcrumb ---------- */
.tw-breadcrumb {
  max-width: var(--container);
  margin: 0 auto; padding: 18px var(--gutter) 0;
}
.tw-breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-muted);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.tw-breadcrumb li { display: flex; align-items: center; gap: 10px; }
.tw-breadcrumb li:not(:last-child)::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-master-2); margin-left: 4px;
}
.tw-breadcrumb a { color: var(--c-muted); border-bottom: none; }
.tw-breadcrumb a:hover { color: var(--c-ink); }

/* ---------- Article header ---------- */
.tw-article-header {
  max-width: 1080px; margin: 36px auto 0; padding: 0 var(--gutter);
}
.tw-article-header h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5.6vw, 60px); line-height: 0.98;
  letter-spacing: -0.045em; margin: 18px 0 22px;
  color: var(--c-ink); max-width: 19ch;
}
.tw-article-lead {
  font-size: 20px; line-height: 1.55; color: var(--c-ink-soft);
  max-width: 62ch; letter-spacing: -0.005em; margin: 0 0 28px;
}
.tw-byline-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.tw-byline-row__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-master), #1a2c3f);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--c-master-2);
}
.tw-byline-row__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tw-byline-row__name { font-weight: 600; font-size: 15px; color: var(--c-ink); }
.tw-byline-row__role {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted);
}
.tw-byline-row__meta {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted);
}

/* ---------- Hero media frame ---------- */
.tw-hero-media {
  max-width: 1280px; margin: 32px auto 0; padding: 0 var(--gutter);
}
.tw-hero-media__frame {
  position: relative; overflow: hidden; border-radius: 6px;
  background: #000; aspect-ratio: 16/10;
}
.tw-hero-media__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tw-hero-media__badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--c-solar); color: #000;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 3px;
}
.tw-hero-media__caption {
  display: flex; gap: 24px; padding: 14px 4px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
}
.tw-hero-media__caption span:not(:last-child)::after {
  content: " ·"; opacity: .5; margin-left: 10px;
}

/* ---------- Body grid (3-col on desktop) ---------- */
.tw-article-grid {
  max-width: 1280px; margin: 48px auto 64px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 220px 1fr 280px; gap: 48px;
  align-items: start;
}
/* When there are fewer than 2 H2s, JS adds this class so layout collapses cleanly. */
.tw-article-grid--no-toc { grid-template-columns: 1fr 280px; }
.tw-article-grid--no-toc .tw-toc-aside { display: none; }
.tw-article-aside { position: sticky; top: 96px; align-self: start; }

/* ---------- Sticky TOC ---------- */
.tw-toc h6 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 14px;
  display: flex; align-items: center; gap: .6em;
}
.tw-toc h6::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-master-2);
}
.tw-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--c-line); }
.tw-toc li { margin: 0; }
.tw-toc a {
  display: block; padding: 8px 14px; border-bottom: none;
  font-size: 13.5px; font-weight: 500; color: var(--c-muted); line-height: 1.4;
  border-left: 2px solid transparent; margin-left: -1px;
  transition: color .12s, border-color .12s;
}
.tw-toc a:hover { color: var(--c-ink); }
.tw-toc a.is-active { color: var(--c-ink); border-left-color: var(--c-master-2); }

/* ---------- Article body content ---------- */
.tw-article-body { max-width: 720px; margin: 0 auto; }
.tw-article-body p { margin: 0 0 18px; font-size: 17px; line-height: 1.68; color: var(--c-ink); }
.tw-article-body p.tw-lead { font-size: 21px; line-height: 1.5; color: var(--c-ink); margin-bottom: 28px; }
.tw-article-body strong { font-weight: 600; color: var(--c-ink); }
.tw-article-body h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; line-height: 1.18; letter-spacing: -0.025em;
  margin: 48px 0 18px; scroll-margin-top: 110px; color: var(--c-ink);
}
.tw-article-body h2::before {
  content: ""; display: inline-block; width: 14px; height: 3px;
  background: var(--c-master-2); margin-right: 14px;
  vertical-align: middle; transform: translateY(-4px);
}
.tw-article-body h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; line-height: 1.22; letter-spacing: -0.02em;
  margin: 32px 0 12px; color: var(--c-ink);
}
.tw-article-body ul, .tw-article-body ol { margin: 0 0 24px; padding-left: 22px; }
.tw-article-body li { margin-bottom: 8px; line-height: 1.6; color: var(--c-ink); }
.tw-article-body a { color: var(--c-ink); border-bottom: 1px solid var(--c-line-strong); transition: border-color .15s, color .15s; }
.tw-article-body a:hover { color: var(--c-master-2); border-bottom-color: var(--c-master-2); }
.tw-article-body img { border-radius: 4px; margin: 24px 0; }
.tw-article-body blockquote {
  margin: 32px 0; padding: 6px 0 6px 22px;
  border-left: 4px solid var(--c-master-2);
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; line-height: 1.32; letter-spacing: -0.02em;
  color: var(--c-ink);
}

/* ---------- TL;DR card ---------- */
.tw-tldr {
  background: var(--c-bone); border-left: 3px solid var(--c-master);
  padding: 22px 26px; margin: 0 0 36px; border-radius: 0 4px 4px 0;
}
.tw-tldr .eyebrow { margin-bottom: 12px; }
.tw-tldr p { font-size: 16px; line-height: 1.6; margin: 0; color: var(--c-ink-soft); }

/* ---------- Stat callout ---------- */
.tw-stat-callout {
  margin: 32px 0; padding: 28px 0 24px;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: end;
}
.tw-stat-callout__number {
  font-family: var(--font-mono); font-size: 56px; font-weight: 500;
  line-height: 1; color: var(--c-ink); letter-spacing: -0.02em;
  border-bottom: 2px solid var(--c-master-2); padding-bottom: 6px;
}
.tw-stat-callout__label { font-size: 14px; line-height: 1.5; color: var(--c-muted); padding-bottom: 10px; }

/* ---------- Inline CTA ---------- */
.tw-inline-cta {
  background: var(--c-solar); color: #000;
  padding: 30px 32px; margin: 44px 0; border-radius: 4px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.tw-inline-cta h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; line-height: 1.18; letter-spacing: -0.025em;
  margin: 0 0 8px; color: #000;
}
.tw-inline-cta p { margin: 0; font-size: 15px; color: #000; max-width: 48ch; }
.tw-inline-cta__btn {
  background: #000; color: #fff; border-bottom: none;
  padding: 14px 22px; border-radius: 4px; font-weight: 700;
  font-size: 14px; letter-spacing: -0.005em; white-space: nowrap;
  transition: background .15s;
}
.tw-inline-cta__btn:hover { color: #fff; background: #222; }

/* ---------- Key takeaways ---------- */
.tw-key-takeaways {
  background: var(--c-bone); padding: 24px 28px; margin: 36px 0;
  border: 1px solid var(--c-line); border-radius: 4px;
}
.tw-key-takeaways .eyebrow { margin-bottom: 14px; }
.tw-key-takeaways ul { margin: 0; padding-left: 20px; }
.tw-key-takeaways li { font-size: 15px; line-height: 1.55; margin-bottom: 8px; color: var(--c-ink-soft); }
.tw-key-takeaways li:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.tw-faq { margin: 24px 0 0; }
.tw-faq details { border-top: 1px solid var(--c-line); padding: 18px 0; }
.tw-faq details:last-of-type { border-bottom: 1px solid var(--c-line); }
.tw-faq summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 17px;
  display: flex; align-items: center; gap: 14px; padding-right: 32px;
  position: relative; color: var(--c-ink);
}
.tw-faq summary::-webkit-details-marker { display: none; }
.tw-faq summary::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-master-2); flex-shrink: 0;
}
.tw-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 0;
  font-family: var(--font-mono); font-size: 22px; font-weight: 400;
  color: var(--c-muted); transition: transform .15s;
}
.tw-faq details[open] summary::after { transform: rotate(45deg); }
.tw-faq details[open] summary { margin-bottom: 10px; }
.tw-faq details > p, .tw-faq details > div { margin: 6px 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--c-ink-soft); }

/* ---------- Author block (post-article) ---------- */
.tw-author-block {
  margin: 56px 0 0; padding: 28px; background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: 6px;
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
}
.tw-author-block__avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-master), #1a2c3f);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 32px;
  color: var(--c-master-2); overflow: hidden;
}
.tw-author-block__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tw-author-block__name {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.025em; margin: 0 0 4px; color: var(--c-ink);
}
.tw-author-block__role {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 12px;
}
.tw-author-block__bio { font-size: 15px; line-height: 1.55; color: var(--c-ink-soft); margin: 0 0 12px; }
.tw-author-block__links { display: flex; gap: 16px; }
.tw-author-block__links a {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink); border-bottom: 1px solid var(--c-line);
  padding-bottom: 2px;
}
.tw-author-block__links a:hover { color: var(--c-master-2); border-bottom-color: var(--c-master-2); }

/* ---------- Sidebar widgets ---------- */
.tw-sidebar > section + section { margin-top: 32px; }

.tw-sidebar-author {
  background: var(--c-white); border: 1px solid var(--c-line);
  padding: 18px; border-radius: 6px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
}
.tw-sidebar-author__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-master), #1a2c3f);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--c-master-2);
  overflow: hidden;
}
.tw-sidebar-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tw-sidebar-author__name { font-weight: 600; font-size: 14px; color: var(--c-ink); line-height: 1.2; }
.tw-sidebar-author__role {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted);
  margin-top: 4px;
}

.tw-lead-magnet {
  background: var(--c-bone); border: 1px solid var(--c-line);
  padding: 22px; border-radius: 6px;
}
.tw-lead-magnet .eyebrow { margin-bottom: 10px; }
.tw-lead-magnet h4 {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  line-height: 1.18; letter-spacing: -0.025em; margin: 0 0 12px; color: var(--c-ink);
}
.tw-lead-magnet p { font-size: 13.5px; line-height: 1.5; color: var(--c-muted); margin: 0 0 16px; }
.tw-lead-magnet .tw-field { margin-bottom: 10px; }
.tw-lead-magnet label {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 5px;
}
.tw-lead-magnet input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-line-strong);
  border-radius: 4px; font-family: var(--font-body); font-size: 13.5px;
  background: var(--c-white);
}
.tw-lead-magnet input:focus { outline: none; border-color: var(--c-ink); }
.tw-lead-magnet button {
  width: 100%; margin-top: 6px; padding: 12px;
  background: var(--c-solar); color: #000; border: none; border-radius: 4px;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: background .15s;
}
.tw-lead-magnet button:hover { background: #d9aa1d; }

.tw-consult-cta {
  background: var(--c-master); color: var(--c-white);
  padding: 22px; border-radius: 6px;
}
.tw-consult-cta .eyebrow { color: rgba(255,255,255,.65); }
.tw-consult-cta .eyebrow::before { background: var(--c-master-2); }
.tw-consult-cta h4 {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  line-height: 1.2; letter-spacing: -0.025em; margin: 10px 0 14px; color: var(--c-white);
}
.tw-consult-cta a {
  display: inline-block; background: var(--c-solar); color: #000;
  padding: 10px 16px; border-radius: 4px; font-weight: 700; font-size: 13px;
  border-bottom: none;
}

.tw-related-posts h5 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted);
  margin: 0 0 14px; display: flex; align-items: center; gap: .6em;
}
.tw-related-posts h5::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-master-2);
}
.tw-related-posts ul { list-style: none; padding: 0; margin: 0; }
.tw-related-posts li { padding: 14px 0; border-top: 1px solid var(--c-line); }
.tw-related-posts li:last-child { border-bottom: 1px solid var(--c-line); }
.tw-related-posts a {
  border-bottom: none; display: block; font-size: 13.5px; font-weight: 600;
  line-height: 1.35; color: var(--c-ink);
}
.tw-related-posts a:hover { color: var(--c-master-2); }
.tw-related-posts time {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-faint); margin-top: 4px; display: block;
}

/* ---------- Next-steps banner ---------- */
.tw-next-steps {
  background: var(--c-master); color: var(--c-white);
  padding: 64px var(--gutter);
}
.tw-next-steps__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.tw-next-steps h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  line-height: 1.15; letter-spacing: -0.025em; margin: 14px 0 12px; color: var(--c-white);
}
.tw-next-steps p { font-size: 14.5px; color: rgba(255,255,255,.78); margin: 0 0 18px; }
.tw-next-steps .eyebrow { color: rgba(255,255,255,.7); }
.tw-next-steps .eyebrow::before { background: var(--c-master-2); }
.tw-next-steps a.tw-cta-link {
  display: inline-block; padding: 12px 20px;
  background: var(--c-solar); color: #000; border-radius: 4px;
  font-weight: 700; font-size: 13px; border-bottom: none;
}

/* ---------- Project Info Widget (used on /projects/* sidebar) ----------
 * Type roles (locked):
 *   - JetBrains Mono caps  → eyebrow + metric labels + sublabels (LABELS ONLY)
 *   - Inter Tight 800      → the savings showpiece amount (one big display number)
 *   - Inter 400/500/600    → all body text (info list, metric values, products, supporting text)
 * Three faces, three roles. No mixing inside a single value.
 */
.tw-project-info {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: 6px; padding: 22px;
  font-family: var(--font-body);
}
.tw-project-info .eyebrow { margin-bottom: 12px; }
.tw-project-info__list {
  list-style: none; padding: 0; margin: 0 0 16px;
}
.tw-project-info__list li {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.5; font-weight: 400;
  color: var(--c-ink-soft);
  padding: 7px 0; border-bottom: 1px solid var(--c-line);
  letter-spacing: 0;
}
.tw-project-info__list li:last-child { border-bottom: 0; }
.tw-project-info__metrics {
  margin: 0 0 16px; padding: 12px 0; border-top: 1px solid var(--c-line);
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; row-gap: 6px;
  align-items: baseline;
}
.tw-project-info__metrics dt {
  /* MONO — label only */
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted);
}
.tw-project-info__metrics dd {
  /* INTER — body bold, NOT mono. Pairs with the rest of the body type. */
  margin: 0;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--c-ink); text-align: right;
  letter-spacing: -0.005em;
}
.tw-project-info__sublabel {
  /* MONO — label only */
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 6px;
}
.tw-project-info__products {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.5; font-weight: 400;
  color: var(--c-ink-soft);
  padding-top: 12px; border-top: 1px solid var(--c-line); margin-bottom: 12px;
}
.tw-project-info__savings {
  background: var(--c-bone); border-left: 3px solid var(--c-master-2);
  padding: 14px 16px; margin-top: 12px; border-radius: 0 4px 4px 0;
}
/* Default for the savings supporting text — Inter, small, muted. The .years
 * span and any bare trailing words ("years") inherit this. */
.tw-project-info__savings-value {
  display: block; margin-top: 4px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  color: var(--c-muted); letter-spacing: 0;
}
/* The showpiece amount — Inter Tight 800, the only display number on the card. */
.tw-project-info__savings-value .count {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.tw-project-info__savings-value .years {
  /* Inherits from .tw-project-info__savings-value — explicitly reinforce
   * to override any legacy CSS picked up from wp-templates.css */
  display: inline; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 500; opacity: 1;
}

/* ---------- Projects single body grid ---------- */
.tw-case-body { padding: 48px var(--gutter) 64px; background: var(--c-paper); }
.tw-case-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start;
}
/* 3-column layout — project info LEFT, gallery+content MIDDLE, marketing RIGHT */
.tw-case-grid--3col {
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: 32px;
}
.tw-case-main { max-width: 760px; }
.tw-case-grid--3col .tw-case-main { max-width: none; min-width: 0; }
.tw-case-summary {
  font-size: 19px; line-height: 1.55; color: var(--c-ink-soft);
  margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line);
}
.tw-case-content p, .tw-case-content li { font-size: 17px; line-height: 1.68; }
.tw-case-content h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1.18; letter-spacing: -0.025em;
  margin: 40px 0 16px;
}
.tw-case-sidebar { position: sticky; top: 96px; align-self: start; }
.tw-case-sidebar--left { z-index: 1; }

/* Inline gallery wrapper — sits between summary and content. */
.tw-case-gallery-inline { margin: 8px 0 32px; }
.tw-case-gallery-inline .tw-gallery { margin: 0; }

@media (max-width: 1280px) {
  .tw-case-grid--3col { grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 24px; }
}
@media (max-width: 1100px) {
  /* Stack right aside below; keep info left + content middle */
  .tw-case-grid--3col {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
  }
  .tw-case-grid--3col .tw-case-sidebar--right {
    grid-column: 1 / -1;
    position: static;
  }
}
@media (max-width: 1024px) {
  .tw-case-grid { grid-template-columns: 1fr; gap: 32px; }
  .tw-case-sidebar { position: static; }
  .tw-case-grid--3col { grid-template-columns: 1fr; }
  .tw-case-grid--3col .tw-case-sidebar--left,
  .tw-case-grid--3col .tw-case-sidebar--right { position: static; }
  /* On tablet/mobile, project info goes ABOVE the main content. */
  .tw-case-grid--3col .tw-case-sidebar--left { order: 0; }
  .tw-case-grid--3col .tw-case-main { order: 1; }
  .tw-case-grid--3col .tw-case-sidebar--right { order: 2; }
}

/* ---------- Mobile sticky pill ---------- */
.tw-mobile-pill {
  display: none; position: fixed; left: 12px; right: 12px; bottom: 12px;
  background: var(--c-solar); color: #000; padding: 16px 20px; border-radius: 6px;
  font-weight: 700; text-align: center; z-index: 60;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18); border-bottom: none;
  font-size: 15px; letter-spacing: -0.005em;
  opacity: 0; transform: translateY(120%); transition: opacity .18s, transform .18s;
}
.tw-mobile-pill.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .tw-article-grid { grid-template-columns: 1fr 280px; gap: 32px; }
  .tw-toc-aside { display: none; }
}
@media (max-width: 880px) {
  .tw-article-grid { grid-template-columns: 1fr; gap: 32px; }
  .tw-article-grid > .tw-sidebar { order: 2; }
  .tw-article-header h1 { font-size: 34px; }
  .tw-next-steps__inner { grid-template-columns: 1fr; gap: 36px; }
  .tw-inline-cta { grid-template-columns: 1fr; gap: 18px; }
  .tw-stat-callout { grid-template-columns: 1fr; gap: 8px; }
  .tw-author-block { grid-template-columns: 1fr; }
  .tw-author-block__avatar { width: 60px; height: 60px; font-size: 24px; }
  .tw-mobile-pill { display: block; }
  .tw-hero-media__caption { flex-direction: column; gap: 6px; }
  .tw-hero-media__caption span:not(:last-child)::after { content: ""; }
  .tw-article-aside { position: static; }
  .tw-byline-row { flex-wrap: wrap; }
  .tw-byline-row__meta { width: 100%; margin: 6px 0 0; }
}

/* ================================================================
   Mobile overflow safety net (2026-04-30)
   Post HTML occasionally contains wide content — tables, <pre>
   blocks, embedded iframes, long URLs, concatenated number strings
   inside .tw-chart figures. Grid items default to min-width:auto,
   so any of these blew the column open and forced horizontal page
   scroll on mobile. Constrain at every layer.
   ================================================================ */

/* 1. Grid items respect their track width — stops wide content from
      pushing the column past the viewport. */
.tw-article-grid > * { min-width: 0; }

/* 2. Long words/URLs in prose wrap instead of overflow. */
.tw-article-body { overflow-wrap: break-word; }

/* 3. Tables become horizontal-scroll surfaces when their natural
      width exceeds the column. Works for any column count.
      -webkit-overflow-scrolling for iOS momentum. */
.tw-article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4. Pre/code blocks scroll horizontally rather than overflow. */
.tw-article-body pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 5. Embedded media respects column width. */
.tw-article-body iframe,
.tw-article-body embed,
.tw-article-body object,
.tw-article-body video {
  max-width: 100%;
}

/* 6. Inline .tw-chart figures contain unbroken concatenated strings
      ("1000kVA800kVA600kVA…") that can't word-wrap normally. */
.tw-article-body figure.tw-chart { overflow-wrap: anywhere; }

/* ================================================================
   Mobile overflow safety net
   ----------------------------------------------------------------
   Post content (the_content()) is rendered untouched, so authored
   HTML — wide tables, <pre> blocks, embeds, long URLs, pasted
   chart figures with unbroken numeric strings — can blow past the
   article column on narrow viewports and force horizontal page
   scroll. These rules contain that without changing how legitimate
   editorial content looks.
   ================================================================ */

/* 1. Grid items default to min-width:auto, so a wide child expands
      the track instead of being clipped to it. Pin every column. */
.tw-article-grid,
.tw-article-grid > * { min-width: 0; }

/* 2. Long words / URLs / tariff strings wrap rather than overflow. */
.tw-article-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 3. Tables in post content are usually too wide for mobile. Make
      the table itself a horizontal scroll surface — preserves all
      table layout semantics inside the scroller. */
.tw-article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4. Code blocks: same treatment. */
.tw-article-body pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 5. Embedded media — never wider than the column. */
.tw-article-body iframe,
.tw-article-body embed,
.tw-article-body object,
.tw-article-body video {
  max-width: 100%;
}

/* 6. Inline .tw-chart figures sometimes contain long unbroken
      strings of numbers + units. Allow them to break anywhere. */
.tw-article-body figure.tw-chart {
  overflow-wrap: anywhere;
  word-break: break-word;
}