/* =====================================================================
   TTF | Demo page (/demo/<product>) — the demo runs inside this page.
   ===================================================================== */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.demo-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; text-decoration: none;
  color: var(--text); font-weight: 600; font-size: 14.5px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.demo-back:hover { color: var(--yellow); }
.demo-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo-frame {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #F5F6F2;
}
.demo-frame::before { content: ""; display: block; height: 4px; background: var(--stripe); }
.demo-frame iframe {
  display: block; width: 100%; border: 0;
  height: max(560px, calc(100vh - var(--nav-h) - var(--hero-min) - 110px));
}
@media (max-width: 600px) { .demo-frame iframe { height: max(520px, calc(100vh - var(--nav-h) - var(--hero-min) - 90px)); } }