/* ============================================================
   Deen First Tech — Beat the Blanket palette
   Night navy, blanket lavender, moonlight cream and sunrise gold.
   The layout is shared in ../app-pages.css.
   ============================================================ */

:root {
  --bg: #0a1222;
  --surface: #111a2e;
  --surface-2: #16203a;
  --line: rgba(196, 184, 255, 0.12);
  --line-strong: rgba(196, 184, 255, 0.22);
  --ink: #f7f1e3;
  --ink-dim: rgba(247, 241, 227, 0.72);
  --ink-faint: rgba(247, 241, 227, 0.48);
  --accent: #b8a8f2;           /* the blanket */
  --on-accent: #120d2a;
  --warm: #fac463;             /* sunrise */
  --glow: rgba(122, 111, 224, 0.22);
  --header-bg: rgba(10, 18, 34, 0.72);
}

body {
  background:
    radial-gradient(circle at 85% -5%, rgba(122, 111, 224, 0.28), transparent 34rem),
    radial-gradient(circle at 0% 100%, rgba(250, 196, 99, 0.08), transparent 30rem),
    var(--bg);
}

/* Approved campaign panels already contain their phone frames. */
.blanket-campaign { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 12px; }
.blanket-campaign li:nth-child(3n + 2) { margin-top: 0; }
.blanket-campaign .reveal { transition-delay: 0ms; }
.campaign-art { overflow: hidden; border-radius: 12px; background: #0a1222; }
.campaign-art img { display: block; width: 100%; height: auto; }
@media (min-width: 761px) and (max-width: 1000px) {
  .blanket-campaign { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .blanket-campaign { gap: 0; }
  .blanket-campaign li { padding-bottom: 8px; }
  .blanket-campaign figcaption { padding-right: 16px; }
  .campaign-art { border-radius: 0; }
}

/* Wake-up guides */
.guide-list, .ap-doc .guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.guide-list li:last-child { border-bottom: 0; }
.guide-list a { color: var(--ink); text-decoration: none; }
.guide-list a:hover strong, .ap-guides a:hover { color: var(--accent); }
.guide-list span { color: var(--ink-dim); }
.ap-guides { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.ap-guides a { color: var(--ink); }
.ap-guides-section { text-align: center; }
.ap-guides-section .ap-guides { justify-items: center; }