/* Static guide pages use the same card, font and color rules as the app. */
.public-page { overflow-wrap: anywhere; }
.public-header .top-inner { flex-wrap: wrap; height: auto; padding-block: 14px; gap: 16px; }
.public-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-block: 18px; }
.public-links a { color: inherit; text-decoration: underline; padding-block: 6px; }
.public-page .public-header { position: static; }
.public-page .section-block { padding-block: 32px; }
.public-section { margin-block: 36px; }
.public-page h1 { font-size: clamp(28px,6vw,48px); line-height: 1.15; }
.public-page h2 { margin-bottom: 20px; }
.public-page .prod-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.public-page .prod-card { min-width: 0; }
.public-page .prod-img-wrap img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; }
.public-page .prod-body { padding: 16px; }
.public-page .btn { white-space: normal; }
.public-page .foot { padding-block: 28px; }
.public-videos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.public-videos article { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; }
.public-videos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.public-video-body { padding: 16px; }
@media (max-width: 760px) {
  .public-page .prod-grid, .public-videos { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 440px) {
  .public-page .prod-grid, .public-videos { grid-template-columns: minmax(0,1fr); }
  .public-header .public-links { gap: 8px 16px; margin: 0; }
  .public-header .logo { width: 100%; }
}