/* ============================================================
   SUN TOOLS V3 — LAYOUT
   ============================================================
   One container system, used everywhere. No page or section
   invents its own max-width or side padding.
   ============================================================ */

.st3-container {
  max-width: var(--st3-container);
  margin-inline: auto;
  padding-inline: var(--st3-container-pad);
}

.st3-grid {
  display: grid;
  gap: var(--st3-space-5);
}

@media (max-width: 768px) {
  :root { --st3-container-pad: var(--st3-space-4); }
}
@media (max-width: 430px) {
  :root { --st3-container-pad: var(--st3-space-3); }
}

/* Utility: kill x-scroll on any wide element (tables, logo rows,
   category strips) rather than letting it blow out the viewport. */
.st3-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Shell-QA placeholder only (front-page.php) — removed once the real
   homepage is built. */
.st3-placeholder__inner {
  padding-block: var(--st3-space-11);
  text-align: center;
  max-width: 640px;
}
.st3-placeholder__eyebrow {
  font-size: var(--st3-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st3-red);
  margin-bottom: var(--st3-space-3);
}
.st3-placeholder__inner h1 { margin-bottom: var(--st3-space-3); }
.st3-placeholder__inner p:last-child { color: var(--st3-body); }