/* TB//DIM uses the same typography, studio palette and page layout as the collection. */
.tb-dim-page main [id] { scroll-margin-top: 144px; }
.tb-dim-page .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; }
.tb-hero-art { width: min(100%, 340px); justify-self: center; }
.tb-dim-page .media-card { border-color: #675731; }
.tb-dim-page .media-card img { width: 100%; height: auto; }
.tb-dim-page .media-note { flex-direction: column; gap: 4px; padding: 12px; }
.tb-manual-hero { display: inline-block; margin-top: 14px; color: #f3d27c; font-size: .82rem; text-underline-offset: 4px; }
.tb-controls-layout { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: 64px; align-items: center; }
.tb-showcase { width: min(100%, 330px); justify-self: center; display: block; }
.tb-showcase img { width: 100%; height: auto; border: 1px solid #675731; border-radius: 12px; }
.tb-dim-page .control-card { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
.tb-dim-page .control-card h3 { font-size: 1.3rem; }
.tb-dim-page .final-cta::after { content: "TB"; }
.tb-dim-page .section-dark .intro-split h2 { color: #fffdf8; }
.tb-dim-page .section-dark .readable p { color: #b9bdc1; }
.tb-dim-page .section-dark .readable strong { color: #fffdf8; }
.tb-dim-page #demo .eyebrow { color: #f3d27c; }
.tb-dim-page #workflow .workflow-grid,
.tb-dim-page #workflow article,
.tb-dim-page #faq details { border-color: #d4d0c7; }
.tb-dim-page #workflow h3 { color: #121315; }
.tb-dim-page #workflow p,
.tb-dim-page #faq details p { color: #62666c; }
.tb-dim-page #workflow .step-number,
.tb-dim-page #faq summary::after { color: #6d5118; }
.tb-dim-catalog-card .plugin-card__visual { --art-padding: 18px; }
@media (max-width: 960px) {
  .tb-dim-page .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .tb-controls-layout { grid-template-columns: 1fr; gap: 32px; }
  .tb-dim-page .control-grid { max-width: 720px; margin: auto; }
}
@media (max-width: 380px) {
  .tb-dim-page .nav { gap: 10px; }
  .tb-dim-page .brand { gap: 8px; }
  .tb-dim-page .brand strong { font-size: .75rem; }
  .tb-dim-page .brand img { width: 30px; height: 30px; }
}