/* Slateveil's signature stage: a domino stone bedded into a band of mortar.
   The same mark as the app icon, in CSS, so the page and the launcher tile are
   the same product. */

.sv-hero { display: flex; gap: clamp(24px, 5vw, 64px); align-items: center;
           flex-wrap: wrap; }
.sv-stage { flex: 0 0 auto; display: flex; flex-direction: column;
            align-items: center; }

.sv-stone {
  width: 200px; height: 122px; border-radius: 20px;
  background: #b9c0c7; border-bottom: 6px solid #8a939c;
  display: flex; position: relative;
  animation: sv-settle 5.5s ease-in-out infinite;
}
.sv-stone::after {
  content: ''; position: absolute; left: 50%; top: 16px; bottom: 16px;
  width: 2px; background: rgba(138, 147, 156, .55);
}
.sv-half { flex: 1; display: flex; flex-direction: column; align-items: center;
           justify-content: space-evenly; padding: 18px 0; }
.sv-pip { width: 22px; height: 22px; border-radius: 50%; background: #20252b; }

.sv-seam {
  width: 240px; height: 13px; border-radius: 7px; background: #c98f5a;
  box-shadow: 0 0 38px 10px rgba(201, 143, 90, .32);
  transform: translateY(-2px);
}

/* The stone settles onto the seam and rests. Anything more than this reads as
   decoration rather than as the game. */
@keyframes sv-settle {
  0%, 62%, 100% { transform: translateY(0); }
  8%            { transform: translateY(-9px); }
  18%           { transform: translateY(0); }
}

/* The reduced-motion twin. The stone still sits on the seam — the switch
   removes motion, not meaning, exactly as it does in the app. */
@media (prefers-reduced-motion: reduce) {
  .sv-stone { animation: none; }
}

.sv-wordmark {
  font-family: 'Cinzel', Georgia, serif; font-weight: 700;
  font-size: clamp(38px, 7vw, 66px); letter-spacing: .18em;
  margin: 0 0 18px; line-height: 1;
}
.sv-lede {
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 300;
  font-size: clamp(16px, 2.1vw, 20px); line-height: 1.55;
  max-width: 54ch; margin: 0 0 14px;
}
.sv-lede strong { font-weight: 600; color: #c98f5a; }

.sv-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.sv-card {
  border: 1px solid rgba(201, 143, 90, .22); border-radius: 12px;
  padding: 20px 22px; background: rgba(29, 33, 38, .55);
}
.sv-card h3 {
  font-family: 'Cinzel', Georgia, serif; font-size: 18px; letter-spacing: .06em;
  margin: 0 0 8px;
}
.sv-card p { font-family: 'Outfit', system-ui, sans-serif; font-weight: 300;
             line-height: 1.5; margin: 0; }

.sv-list { font-family: 'Outfit', system-ui, sans-serif; font-weight: 300;
           line-height: 1.75; max-width: 70ch; }
.sv-list b { font-weight: 600; }