/* ============================================================
   sections.css — shared landing-section primitives
   ============================================================
   .shead — centered section heading block
   .viz   — framed product screenshot beside a .split text block
            (holds a .lm/.dm image pair for light/dark).
   .card  — bordered surface tile (pillars, how-it-works points)
   .cards — responsive card grid (--2 / --3 columns)
   .split — text beside a visual (library, personalization)
   ============================================================ */

.shead              { max-width: 640px; margin: 0 auto var(--space-16); text-align: center;
                      display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.shead .subtitle    { max-width: 52ch; }

.viz                { background: var(--gradient-warm); padding: var(--space-6);
                      border-radius: var(--radius-xl); line-height: 0; }
.viz img            { width: 100%; height: auto; vertical-align: bottom;
                      border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); }

.card               { background: var(--color-card); border: 1px solid var(--color-border);
                      border-radius: var(--radius-lg); padding: var(--space-8);
                      display: flex; flex-direction: column; gap: var(--space-3); }
.card p             { color: var(--color-muted-foreground); }

.cards              { display: grid; gap: var(--space-6); }
.cards--3           { grid-template-columns: repeat(3, 1fr); }
.cards--2           { grid-template-columns: repeat(2, 1fr); }

.split              { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24);
                      align-items: center; }
.split-text         { display: flex; flex-direction: column; align-items: flex-start;
                      gap: var(--space-4); }
.split-text .button { margin-top: var(--space-2); }

@media (max-width: 1024px) {
  .split { gap: var(--space-16); }
}

@media (max-width: 768px) {
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
  .split               { grid-template-columns: 1fr; }
  /* Smaller radii on mobile — wrapper and image each drop a step. */
  .viz                 { border-radius: var(--radius-lg); }
  .viz img             { border-radius: var(--radius-sm); }
}