/* Visual layer for the training pages ("Aurora", chosen by Shalin 2026-10-23): soft blurred color glows behind alternating sections, faded at the top and bottom so no hard edges,
   a faint ambient glow behind the whole page, and small "kicker" labels above the headings.
   Loaded only when the pages are built with the bands on (the default). To go back to the flat white look: PP_BANDS=0 node build_training_pages.cjs ... and rebuild; nothing else changes.
   Two section kinds: .tr-band--lav (purple, pink and blue glows) and .tr-band--sand (gold, orange and purple glows); white stays the base. */
.tr-band{ position:relative; margin:0; padding-top:clamp(64px, 8vw, 104px) !important; padding-bottom:clamp(64px, 8vw, 104px) !important; }
/* the glows are drawn on a layer behind the content, faded at the top and bottom */
.tr-band::before{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.tr-band > .wrap{ position:relative; z-index:1; }
.tr-band--lav::before{ background:
  radial-gradient(560px 360px at 6% 14%, rgba(125,0,234,.22), transparent 66%),
  radial-gradient(480px 340px at 94% 86%, rgba(236,72,153,.15), transparent 66%),
  radial-gradient(440px 300px at 72% 8%, rgba(56,189,248,.14), transparent 66%), #fbf8ff; }
.tr-band--sand::before{ background:
  radial-gradient(560px 360px at 94% 12%, rgba(218,165,32,.28), transparent 66%),
  radial-gradient(480px 340px at 4% 90%, rgba(125,0,234,.13), transparent 66%),
  radial-gradient(420px 300px at 40% 100%, rgba(251,146,60,.14), transparent 66%), #fffdf6; }
/* the strip behind the floating menu fades out at its bottom instead of ending in a hard edge, and the glow of the page top (below) runs on behind it, so menu and page top blend */
.nav-outer{ background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 45%, rgba(255,255,255,0) 100%); }
/* the site's own soft corner glow of the page top also starts with a straight edge: fade it in over its first 90px */
.hero-glow{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 90px, #000 100%); mask-image:linear-gradient(180deg, transparent 0, #000 90px, #000 100%); }
/* the top of every page gets the same glows */
.hero-inner::after{ content:''; position:absolute; inset:-140px 0 0 0; z-index:-1; pointer-events:none; background:
  radial-gradient(720px 400px at 12% 80px, rgba(125,0,234,.22), transparent 62%),
  radial-gradient(640px 380px at 92% 100px, rgba(218,165,32,.26), transparent 62%),
  radial-gradient(520px 320px at 60% 340px, rgba(56,189,248,.11), transparent 66%); }
/* a faint ambient glow behind the whole page (fixed, so the white sections are not dead white either) */
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(620px 420px at 0% 18%, rgba(125,0,234,.07), transparent 70%), radial-gradient(560px 380px at 100% 62%, rgba(218,165,32,.09), transparent 70%), radial-gradient(520px 360px at 55% 100%, rgba(236,72,153,.06), transparent 70%); }

/* cards sit on the glow with a soft lift */
.tr-band .faq-item, .tr-band .link-card, .tr-band .tr-card:not(.tr-feature), .tr-band .tr-state-list a, .tr-band .check-item{ background:#fff; box-shadow:0 8px 22px rgba(60,20,110,.07); }
.tr-band--sand .link-card, .tr-band--sand .faq-item{ border-color:#f0e2b8; }
.tr-band .check-item{ padding:18px 20px; border-radius:16px; border:1px solid #e5d8fb; }
.tr-band--lav .tr-card, .tr-band--lav .faq-item{ border-color:#e5d8fb; }

/* kicker above a heading: a short gradient rule and a small label */
.tr-kicker{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--purple); }
.tr-kicker::before{ content:''; width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--purple), var(--gold)); }
.tr-section .tr-kicker{ margin-top:46px; }
.tr-section > .wrap > .tr-kicker:first-child{ margin-top:0; }
.tr-kicker + .tr-h2{ margin-top:0; }
.tr-kicker + .tr-faq-head{ margin-top:0; }

@media (max-width:640px){
  .tr-band{ padding-top:56px !important; padding-bottom:56px !important; }
}