.cellarune-marketing .topbar { position: relative; top: auto; }
.cellarune-marketing h1 { line-height: 1.2; }
.cellarune-marketing:lang(th) h1 { line-height: 1.45; }
.cellarune-marketing .hero > * { min-width: 0; }
.cellarune-marketing .brand-icon { width: 44px; height: 44px; border-radius: 12px; }
.cellarune-marketing a:not(.button):not(.brand) { text-underline-offset: .2em; }
.cellarune-marketing .article-copy a,
.cellarune-marketing .info-card h3 a,
.cellarune-marketing .notice-card a,
.cellarune-marketing .related-guides a { text-decoration: underline; }
.cellarune-marketing .guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.cellarune-marketing .screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
.cellarune-marketing .screenshot-grid figure { margin: 0; text-align: center; }
.cellarune-marketing .screenshot-grid img { width: 100%; height: auto; max-width: 280px; border-radius: 20px; }
.cellarune-marketing .screenshot-grid figcaption { color: var(--muted); margin-top: 16px; }
.cellarune-marketing .article { max-width: 840px; padding-top: 40px; }
.cellarune-marketing .article-heading h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.02em; }
.cellarune-marketing .article-copy { font-size: 1.06rem; line-height: 1.85; margin: 40px 0; }
.cellarune-marketing .article-copy h2 { margin-top: 40px; line-height: 1.4; }
.cellarune-marketing .byline, .cellarune-marketing .breadcrumbs { color: var(--muted); font-size: .9rem; }
.cellarune-marketing .contact-actions a { overflow-wrap: anywhere; }
.cellarune-marketing .skip-link { position: absolute; left: 12px; top: -100px; z-index: 200; padding: 12px; background: var(--bg); }
.cellarune-marketing .skip-link:focus { top: 12px; }
@media (max-width: 900px) {
  .cellarune-marketing .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .cellarune-marketing .screenshot-grid { grid-template-columns: 1fr; }
  .cellarune-marketing .hero-actions { flex-direction: column; align-items: stretch; }
  .cellarune-marketing .hero h1 { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cellarune-marketing *, .cellarune-marketing *::before, .cellarune-marketing *::after { animation: none; transition: none; }
}