/* ============================================================
   Deen First Tech — Tajri palette
   Deep night violet, Tajri's periwinkle, and a soft gold.
   The layout is shared in ../app-pages.css.
   ============================================================ */

:root {
  --bg: #0d0b1d;
  --surface: #151229;
  --surface-2: #1b1734;
  --line: rgba(201, 194, 255, 0.12);
  --line-strong: rgba(201, 194, 255, 0.22);
  --ink: #faf9ff;
  --ink-dim: rgba(250, 249, 255, 0.72);
  --ink-faint: rgba(250, 249, 255, 0.48);
  --accent: #a99fff;
  --on-accent: #15112e;
  --warm: #e9c37a;
  --glow: rgba(139, 124, 255, 0.22);
  --header-bg: rgba(13, 11, 29, 0.72);
}

body {
  background:
    radial-gradient(circle at 85% -5%, rgba(139, 124, 255, 0.3), transparent 34rem),
    radial-gradient(circle at 0% 100%, rgba(51, 196, 240, 0.07), transparent 30rem),
    var(--bg);
}

/* Campaign artwork includes its own device frame; keep every panel uncropped. */
.campaign-screens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 12px; }
.campaign-screens li:nth-child(3n + 2) { margin-top: 0; }
.campaign-art { overflow: hidden; border-radius: 12px; background: #f7f4ef; }
.campaign-art img { display: block; width: 100%; height: auto; }
.campaign-screens .reveal { transition-delay: 0ms; }
.campaign-ipad, .campaign-watch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.campaign-watch { max-width: 780px; }
@media (min-width: 761px) and (max-width: 1000px) {
  .campaign-screens:not(.campaign-ipad):not(.campaign-watch) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .campaign-screens { gap: 0; }
  .campaign-screens li { padding-bottom: 8px; }
  .campaign-screens figcaption { padding-right: 16px; }
  .campaign-art { border-radius: 0; }
  .campaign-ipad, .campaign-watch { gap: 16px; }
  .campaign-ipad .campaign-art, .campaign-watch .campaign-art { border-radius: 12px; }
}