/* ==========================================================================
   City Harvest Church – site styles
   Colours come straight from the logo's cross: each area of the site wears one.
   red = Watch live · blue = Bible · purple = Prayer · green = Champions for Jesus
   ========================================================================== */
@font-face{font-family:"Jost";src:url("fonts/jost-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@property --cut{syntax:"<percentage>";inherits:false;initial-value:34%}

:root{
  --red:#F6262C;--blue:#3658C9;--purple:#982BB5;--green:#A6C535;--ink:#15141B;
  --red-t:#C8121A;--blue-t:#2B4AB4;--purple-t:#86229F;--green-t:#566D08;
  --red-bg:#FFF0F0;--blue-bg:#EEF1FD;--purple-bg:#F7EEFA;--green-bg:#F3F8E2;
  --paper:#fff;--mist:#F4F5F9;--line:#E2E4EC;--muted:#575A6D;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --accent:var(--ink);--accent-t:var(--ink);--accent-bg:var(--mist);
  --r:12px;--maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0 0 1em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
small{color:var(--muted);font-weight:400}

.accent-red{--accent:var(--red);--accent-t:var(--red-t);--accent-bg:var(--red-bg)}
.accent-blue{--accent:var(--blue);--accent-t:var(--blue-t);--accent-bg:var(--blue-bg)}
.accent-purple{--accent:var(--purple);--accent-t:var(--purple-t);--accent-bg:var(--purple-bg)}
.accent-green{--accent:var(--green);--accent-t:var(--green-t);--accent-bg:var(--green-bg)}

/* ------------------------------------------------------------ header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:24px}
.brand img{display:block;height:54px;width:auto}
nav#mainNav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
nav#mainNav a{font-weight:500;font-size:16px;text-decoration:none;padding:10px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;position:relative}
nav#mainNav a:hover{background:var(--mist)}
nav#mainNav a.active{font-weight:600}
nav#mainNav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:2px;background:var(--ink)}
nav#mainNav a[data-nav=live].active::after,nav#mainNav a[data-nav=recordings].active::after{background:var(--red)}
nav#mainNav a[data-nav=bible].active::after{background:var(--blue)}
nav#mainNav a[data-nav=champions].active::after{background:var(--green)}
nav#mainNav a[data-nav=prayer].active::after{background:var(--purple)}
.nav-user{font-size:14px;color:var(--muted);padding-left:8px}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:10px;width:46px;height:42px;padding:0;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-btn span:nth-child(1){top:13px}.menu-btn span:nth-child(2){top:20px}.menu-btn span:nth-child(3){top:27px}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#B5B8C6;flex:none}
.is-live .dot,.live-link.is-live .dot{background:var(--red);box-shadow:0 0 0 0 rgba(246,38,44,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(246,38,44,0)}100%{box-shadow:0 0 0 0 rgba(246,38,44,0)}}

/* ------------------------------------------------------------ buttons / forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;border-radius:10px;padding:12px 24px;font-weight:600;font-size:16px;text-decoration:none;line-height:1.2;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:8px 16px;font-size:15px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#DD1A20}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:#2A49B3}
.btn-purple{background:var(--purple);color:#fff}.btn-purple:hover{background:#82229C}
.btn-green{background:var(--green);color:var(--ink)}.btn-green:hover{background:#98B72A}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#2C2A39}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-weight:500;color:var(--accent-t)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
label{display:block;font-weight:500;font-size:15px}
input,select,textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #C9CCDA;border-radius:10px;padding:11px 14px}
textarea{resize:vertical;min-height:120px}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent-t)}
.form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.msg:empty{display:none}
.msg{padding:12px 16px;border-radius:10px;font-weight:500;border-left:5px solid}
.msg.ok{background:var(--green-bg);border-color:var(--green-t);color:#34440a}
.msg.err{background:var(--red-bg);border-color:var(--red-t);color:#8f0d12}
.msg.info{background:var(--blue-bg);border-color:var(--blue-t);color:#1d3382}

/* ------------------------------------------------------------ page scaffolding */
.page{padding-bottom:72px;min-height:60vh}
.page-head{padding:48px 0 32px;max-width:860px}
.page-head::before{content:"";display:block;width:64px;height:8px;border-radius:4px;background:var(--accent);margin-bottom:22px}
.page-head h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800}
.page-head .lead{margin-top:16px}
.row-between{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;max-width:none}
.lead{font-family:var(--serif);font-size:1.28rem;line-height:1.55;color:#33323f;max-width:60ch}
.h-lg{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700;line-height:1.12}
.h-md{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700}
.sec-t{margin:48px 0 18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.prose p{font-family:var(--serif);font-size:1.18rem;line-height:1.7;max-width:58ch}
.prose h2{margin-bottom:16px}
.band{padding-top:64px;padding-bottom:8px}
.band-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.more{font-weight:600}
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pillars li{display:grid;gap:2px;padding:16px 0 16px 22px;border-left:6px solid var(--c);border-bottom:1px solid var(--line);margin-bottom:0}
.pillars li:first-child{border-top:1px solid var(--line)}
.pillars b{font-size:1.2rem;font-weight:700}
.pillars span{color:var(--muted)}
.c-red{--c:var(--red)}.c-blue{--c:var(--blue)}.c-purple{--c:var(--purple)}.c-green{--c:var(--green)}.c-ink{--c:var(--ink)}
.join{background:var(--mist);border-radius:20px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.join p{margin:8px 0 0;max-width:56ch;color:#3b3a49}

/* events */
.event-list{display:grid;gap:0}
.event{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:20px 24px;border-left:6px solid var(--c);border-bottom:1px solid var(--line);background:#fff}
.event:nth-child(4n+1){--c:var(--red)}.event:nth-child(4n+2){--c:var(--blue)}.event:nth-child(4n+3){--c:var(--purple)}.event:nth-child(4n+4){--c:var(--green)}
.event:first-child{border-top:1px solid var(--line)}
.event h3{font-size:1.35rem;font-weight:700}
.event p{margin:0;color:var(--muted);grid-column:1}
.event .when{grid-row:1;grid-column:2;font-weight:600;color:var(--ink);align-self:center}
.band-tint .event{background:transparent}
.contact{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:6px}

/* ------------------------------------------------------------ HOME hero + cross doors */
.hero{max-width:var(--maxw);margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;margin-bottom:26px;background:#fff}
.status:hover{border-color:var(--ink)}
.status.is-live{border-color:var(--red);background:var(--red-bg);color:#8f0d12;font-weight:600}
.hero>*{min-width:0}
.nb{white-space:nowrap}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.5rem);font-weight:800;line-height:.98;letter-spacing:-.03em;text-wrap:balance;margin-bottom:24px}
.hero .lead{margin-bottom:28px}
.hero-meta{margin:22px 0 0;color:var(--muted);font-size:16px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:540px;justify-self:end;min-width:0}
/* Four squares, each bitten at its OUTER corner: together they form the cross from the logo,
   with the white gutters as the cross lines. */
.door{--cut:50%;--cx:0%;--cy:0%;min-width:0;aspect-ratio:1;display:flex;flex-direction:column;gap:6px;padding:clamp(14px,2.2vw,26px);text-decoration:none;color:#fff;position:relative;overflow:hidden;
  -webkit-mask:radial-gradient(ellipse var(--cut) var(--cut) at var(--cx) var(--cy),transparent 98.6%,#000 100%);
          mask:radial-gradient(ellipse var(--cut) var(--cut) at var(--cx) var(--cy),transparent 98.6%,#000 100%);
  transition:--cut .35s cubic-bezier(.3,.7,.2,1)}
.door:hover,.door:focus-visible{--cut:58%}
.door:focus-visible{outline-offset:-6px;outline-color:#fff;outline-width:3px}
.door.red{background:var(--red);--cx:0%;--cy:0%;justify-content:flex-end}
.door.blue{background:var(--blue);--cx:100%;--cy:0%;justify-content:flex-end}
.door.purple{background:var(--purple);--cx:0%;--cy:100%;justify-content:flex-start}
.door.green{background:var(--green);color:var(--ink);--cx:100%;--cy:100%;justify-content:flex-start}
.door-t{font-weight:700;font-size:clamp(1.1rem,2.3vw,1.7rem);line-height:1.05;letter-spacing:-.01em;max-width:11ch}
.door-s{font-size:clamp(.8rem,1.2vw,.98rem);line-height:1.3;opacity:.95;max-width:16ch}
.door.green .door-t{max-width:9ch}
@media (prefers-reduced-motion:no-preference){
  .door{animation:assemble .8s cubic-bezier(.2,.8,.2,1) both}
  .door.red{--dx:-14px;--dy:-14px}.door.blue{--dx:14px;--dy:-14px;animation-delay:.08s}.door.purple{--dx:-14px;--dy:14px;animation-delay:.16s}.door.green{--dx:14px;--dy:14px;animation-delay:.24s}
  @keyframes assemble{from{opacity:0;transform:translate(calc(var(--dx)*1.6),calc(var(--dy)*1.6))}to{opacity:1;transform:none}}
}

/* ------------------------------------------------------------ auth gate */
.gate{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:56px 0;align-items:start}
.gate h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:16px}
.gate .tabs-lite{display:flex;gap:4px;margin-bottom:20px;border-bottom:1.5px solid var(--line)}
.gate .tabs-lite button{background:none;border:0;padding:10px 16px;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1.5px}
.gate .tabs-lite button[aria-selected=true]{border-color:var(--accent);}
.gate ul{padding-left:20px;color:var(--muted)}

/* ------------------------------------------------------------ live */
.live-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:22px 0 16px}
.live-state{display:flex;align-items:center;gap:12px;font-weight:500}
.badge{display:inline-block;padding:4px 12px;border-radius:6px;background:#E5E7EF;font-weight:700;font-size:14px;letter-spacing:.02em}
.badge.live{background:var(--red);color:#fff}
.badge.recon{background:#FFE9B8;color:#6b4500}
.live-bar-r{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:15px}
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
.player{position:relative;aspect-ratio:16/9;background:#0c0b10;border-radius:16px;overflow:hidden}
.player video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.player-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#fff;background:radial-gradient(circle at 50% 40%,#2a2736,#0c0b10 70%)}
.player-overlay[hidden]{display:none}
.player-overlay h2{font-size:clamp(1.3rem,2.6vw,2rem);margin-bottom:10px}
.player-overlay p{max-width:44ch;margin:0 auto 18px;color:#d5d6e2}
.player-note{font-size:14px;color:var(--muted);margin:12px 4px 0}
.chat{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;height:min(70vh,640px);min-height:380px;background:#fff}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1.5px solid var(--line)}
.chat-head h2{font-size:1.15rem;font-weight:700}
.viewers{font-size:14px;color:var(--muted)}
.chat-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.chat-empty,.chat-sys{color:var(--muted);font-size:14px;text-align:center;margin:auto;max-width:28ch}
.chat-sys{margin:6px auto;background:var(--mist);padding:6px 12px;border-radius:999px;max-width:none}
.cm{font-size:15.5px;line-height:1.4;word-break:break-word}
.cm b{font-weight:700;margin-right:6px}
.cm .t{font-size:12px;color:#8a8da0;margin-left:6px}
.cm.admin{background:var(--red-bg);border-left:4px solid var(--red);padding:8px 10px;border-radius:0 8px 8px 0}
.cm.admin b::after{content:"Church";margin-left:8px;font-size:11px;font-weight:700;background:var(--red);color:#fff;padding:1px 7px;border-radius:5px;vertical-align:1px}
.cm.me b{color:var(--blue-t)}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1.5px solid var(--line)}
.chat-form input{margin:0}
.chat-form .btn{padding:10px 18px}
.chat-form[data-closed] {opacity:.55;pointer-events:none}

/* recordings */
.rec-player{margin-bottom:32px}
.rec-player h2{font-size:1.4rem;margin-bottom:12px}
.rec-player video{width:100%;max-height:72vh;background:#000;border-radius:16px;display:block}
.rec-list{display:grid}
.rec{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:18px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rec:first-child{border-top:1px solid var(--line)}
.rec h3{font-size:1.2rem;font-weight:600}
.rec small{display:block;margin-top:2px}
.rec .actions{align-items:center}
.empty{padding:36px;border:1.5px dashed #C9CCDA;border-radius:16px;color:var(--muted);text-align:center}

/* ------------------------------------------------------------ bible */
.bible-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 330px;gap:32px;align-items:start}
.bible-controls{display:grid;gap:14px;position:sticky;top:84px}
.bible-controls .row2{grid-template-columns:1fr;gap:14px}
.passage-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:14.5px;font-weight:500}
.quick button:hover{border-color:var(--blue);color:var(--blue-t)}
.reader{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:28px 34px 24px;min-width:0}
.reader-head{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1.5px solid var(--line);padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}
.reader-head h2{font-size:2rem;font-weight:800}
.reader-tools{display:flex;gap:6px;align-items:center}
.reader-tools button{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:4px 10px;font-weight:600}
.tag{background:var(--blue-bg);color:var(--blue-t);font-weight:700;font-size:13px;padding:4px 10px;border-radius:6px;margin-right:6px}
.reader-text{font-family:var(--serif);font-size:var(--bible-size,1.22rem);line-height:1.85;max-width:62ch}
.v{cursor:pointer;border-radius:4px;padding:1px 0}
.v:hover{background:var(--blue-bg)}
.v.sel{background:#FFF3B0}
.v sup{font-family:var(--sans);font-size:.62em;font-weight:700;color:var(--blue-t);margin-right:4px;vertical-align:.5em}
.reader-text mark{background:#FFE17A;border-radius:3px}
.reader-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1.5px solid var(--line)}
.state{padding:24px;border-radius:12px;background:var(--mist);font-family:var(--sans);font-size:1rem;line-height:1.5}
.study{background:var(--blue-bg);border-radius:18px;padding:24px 26px;position:sticky;top:84px;font-size:16px}
.study h3{font-size:1.25rem;margin-bottom:12px}
.study h4{font-size:.98rem;font-weight:700;margin:18px 0 4px;color:var(--blue-t)}
.study p{margin:0 0 8px;font-family:var(--serif);font-size:1.02rem;line-height:1.6}
.study ul{margin:6px 0 0;padding-left:20px;font-family:var(--serif)}
.study .verse-box{background:#fff;border-left:5px solid var(--blue);border-radius:0 10px 10px 0;padding:12px 14px;margin-top:14px}

/* ------------------------------------------------------------ champions (kids) */
.kids{--r:24px}
.kids-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;padding:48px 0 8px}
.kids-hero h1{font-size:clamp(2.8rem,7.4vw,6rem);font-weight:900;line-height:.92;letter-spacing:-.035em}
.kids-hero h1 span{font-weight:300;font-size:.6em;letter-spacing:0;margin:0 .1em}
.kids-hero h1::after{content:"";display:block;height:10px;margin-top:20px;max-width:340px;border-radius:5px;background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 25% 50%,var(--purple) 50% 75%,var(--green) 75%)}
.kids-hero .lead{margin:22px 0 18px}
.champ-progress,.progress-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.bar{height:16px;flex:1;min-width:140px;max-width:420px;background:var(--mist);border-radius:99px;overflow:hidden;border:1.5px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--purple),var(--blue),var(--green));border-radius:99px;transition:width .5s}
.verse-of{font-family:var(--serif);font-style:italic;font-size:1.2rem;min-height:3.2em;max-width:52ch}
.stars{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:10px;justify-items:center;max-width:430px;justify-self:center}
.stars svg{width:100%;max-width:46px;height:auto}
.stars .s-off path{fill:#E9EBF2}
.stars .s-on{animation:pop .5s}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.lesson-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lg-group h3{font-size:1.05rem;font-weight:600;color:var(--muted);margin:26px 0 10px}
.ltile{position:relative;text-align:left;border:3px solid transparent;border-radius:22px;padding:18px 16px 16px;background:var(--tint);display:flex;flex-direction:column;gap:10px;min-height:150px;transition:transform .15s}
.ltile:hover{transform:translateY(-3px)}
.ltile .ico{font-size:2.4rem;line-height:1}
.ltile b{font-family:var(--sans);font-weight:700;font-size:1.05rem;line-height:1.15}
.ltile .done{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.ltile[aria-current=true]{border-color:var(--ink)}
.ltile.red{--tint:var(--red-bg)}.ltile.blue{--tint:var(--blue-bg)}.ltile.purple{--tint:var(--purple-bg)}.ltile.green{--tint:var(--green-bg)}
.lesson{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;margin-top:40px;scroll-margin-top:90px}
.stage{aspect-ratio:16/9;border-radius:28px;display:grid;place-content:center;text-align:center;padding:28px 40px;gap:6px;color:#fff;background:var(--stage,var(--blue));position:relative;overflow:hidden}
.stage[data-color=red]{--stage:var(--red)}.stage[data-color=blue]{--stage:var(--blue)}.stage[data-color=purple]{--stage:var(--purple)}
.stage[data-color=green]{--stage:var(--green);color:var(--ink)}
.stage-art{font-size:clamp(4rem,11vw,7.5rem);line-height:1;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
.stage h3{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:800}
.stage p{font-size:clamp(1.05rem,1.9vw,1.35rem);max-width:34ch;margin:0 auto}
.stage.swap h3,.stage.swap p,.stage.swap .stage-art{animation:fadein .35s both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.stage-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px}
.stage-dots i{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.3}
.stage-dots i.on{opacity:1;width:26px;border-radius:6px}
.stage-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.check-inline{display:inline-flex;gap:8px;align-items:center;margin-left:6px}
.check-inline input{width:auto;margin:0}
.video-slot{margin-bottom:18px}
.video-slot h3{font-size:1.2rem;margin-bottom:10px}
.video-slot iframe,.video-slot video{width:100%;aspect-ratio:16/9;border:0;border-radius:24px;background:#000;display:block}
.vid-note{font-size:14px;color:var(--muted);margin:8px 2px 10px}
.vid-note a{color:var(--accent-t)}
.side-actions{margin:0 0 14px}
.games{margin-top:36px}
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.game{background:var(--mist);border-radius:24px;padding:24px 26px}
.game h3{font-size:1.3rem;margin-bottom:6px}
.game p{margin:0 0 12px;color:#3b3a49}
.game .verse-line{font-family:var(--serif);font-size:1.2rem;line-height:2.1;color:var(--ink)}
.blank{font:inherit;display:inline-block;min-width:5.5em;margin:0 2px;padding:0 8px;border:0;border-bottom:3px solid var(--ink);background:#fff;border-radius:8px 8px 0 0;font-weight:600;color:var(--ink)}
.blank.filled{border-color:var(--green-t);background:var(--green-bg);color:var(--green-t)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{background:#fff;border:2.5px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:1.02rem}
.chip:hover:not([disabled]){border-color:var(--ink)}
.chip[disabled]{opacity:.35}
.chip.done{border-color:var(--green-t);background:var(--green-bg)}
.game-msg{font-weight:600;min-height:1.6em;margin:6px 0}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.order-list{margin:8px 0 0;padding-left:0;list-style:none;display:grid;gap:6px}
.order-list li{background:#fff;border-radius:12px;padding:8px 14px;border-left:6px solid var(--green-t);font-weight:600}
.vid-row{display:grid;grid-template-columns:230px 1fr auto;gap:10px;align-items:center;margin-bottom:10px}
.vid-row input{margin:0}
.vid-row b{font-size:15.5px}
#printSheet{font-family:var(--serif);color:#000}
@media print{
  body>*:not(#printSheet){display:none!important}
  #printSheet{display:block!important;padding:0;font-size:12pt}
  #printSheet h1{font-size:24pt;margin-bottom:8pt}#printSheet h2{font-size:14pt;margin:14pt 0 4pt;font-family:var(--sans)}
  #printSheet .wline{border-bottom:1px solid #000;height:22pt}
  #printSheet .draw-box{border:2px solid #000;height:230pt;border-radius:6pt;margin-top:6pt}
  #printSheet li{margin-bottom:6pt}
}
.lesson-side h3{font-size:1.9rem;font-weight:800;margin-bottom:8px}
.lesson-side p{color:#3b3a49}
.passage{font-size:15.5px}
.memory{margin:18px 0;padding:18px 20px;border-radius:18px;background:var(--green-bg);border-left:8px solid var(--green)}
.memory b{font-size:.9rem;color:var(--green-t)}
.memory p{font-family:var(--serif);font-size:1.12rem;line-height:1.55;margin:6px 0 6px;color:var(--ink)}
.memory cite{font-weight:600;font-style:normal}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--mist)}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.steps li.done{background:var(--green-bg)}
.steps li.done::before{content:"✓";background:var(--green-t)}
.quiz,.acts{margin-top:32px;padding:30px 32px;border-radius:28px;background:var(--mist)}
.quiz h2{font-size:1.5rem;margin-bottom:6px}
.quiz .q-count{color:var(--muted);font-weight:500;margin-bottom:10px}
.quiz .q{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;margin:6px 0 18px}
.opts{display:grid;gap:10px;max-width:640px}
.opt{text-align:left;background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:14px 18px;font-size:1.1rem;font-weight:500}
.opt:hover:not([disabled]){border-color:var(--ink)}
.opt.right{border-color:var(--green-t);background:var(--green-bg)}
.opt.wrong{border-color:var(--red-t);background:var(--red-bg)}
.q-fb{margin-top:14px;font-weight:600;min-height:1.5em}
.act-grid,.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.check{display:flex;gap:14px;align-items:flex-start;background:#fff;border:2.5px solid var(--line);border-radius:18px;padding:16px 18px;cursor:pointer;text-align:left;width:100%}
.check .box{width:28px;height:28px;border-radius:8px;border:2.5px solid #AEB1C3;flex:none;display:grid;place-items:center;font-weight:800;color:#fff;margin-top:2px}
.check b{display:block;font-size:1.1rem}
.check span{color:var(--muted);font-size:.98rem}
.check[aria-pressed=true]{border-color:var(--green-t);background:var(--green-bg)}
.check[aria-pressed=true] .box{background:var(--green-t);border-color:var(--green-t)}
.check[aria-pressed=true] .box::after{content:"✓"}
.reward{margin-top:18px;padding:18px 22px;border-radius:18px;background:var(--ink);color:#fff;font-size:1.15rem}
.reward b{color:var(--green)}

/* ------------------------------------------------------------ admin */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1.5px solid var(--line);margin-bottom:20px}
.tabs button{background:none;border:0;padding:12px 18px;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1.5px}
.tabs button[aria-selected=true]{border-color:var(--ink)}
.card{border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:20px;background:#fff}
.card h3{font-size:1.2rem;margin-bottom:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.stat{background:var(--mist);border-radius:14px;padding:16px 20px}
.stat b{display:block;font-size:2.2rem;font-weight:800;line-height:1}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:600;color:var(--muted);font-size:14px}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--mist)}
.pill.ok{background:var(--green-bg);color:var(--green-t)}.pill.wait{background:#FFF3D6;color:#7a5200}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:150px 1fr auto;gap:8px 14px;align-items:center;margin-bottom:10px}
.kv code{background:var(--mist);padding:8px 12px;border-radius:8px;font-size:15px;overflow-wrap:anywhere}
.warn{background:#FFF3D6;border-left:5px solid #E0A100;padding:12px 16px;border-radius:10px;margin-bottom:16px}
.switch{display:flex;gap:12px;align-items:center}
.switch input{width:22px;height:22px;margin:0}
.disk{height:12px;border-radius:6px;background:var(--mist);overflow:hidden;margin:8px 0}
.disk i{display:block;height:100%;background:var(--blue)}
.admin-chat{max-height:420px;overflow:auto;border:1.5px solid var(--line);border-radius:12px;padding:8px}
.admin-chat .cm{display:flex;gap:10px;justify-content:space-between;padding:6px 8px;border-radius:8px}
.admin-chat .cm:hover{background:var(--mist)}
.tips{margin:8px 0 0;padding-left:20px;color:#3b3a49}

/* ------------------------------------------------------------ footer / toast */
.foot{background:var(--ink);color:#d9dae6;padding:48px 0 calc(40px + env(safe-area-inset-bottom));margin-top:24px}
.foot-in{display:grid;gap:18px}
.foot img{background:#fff;border-radius:12px;padding:10px 14px;width:150px;height:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{text-decoration:none;font-weight:500}.foot-links a:hover{text-decoration:underline}
.foot-small{margin:0;font-size:14px;color:#a6a8bb}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:90;max-width:90vw;font-weight:500}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .bible-grid{grid-template-columns:1fr}
  .bible-controls,.study{position:static}
  .bible-controls .row2{grid-template-columns:1fr 1fr}
  .lesson-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .game-grid{grid-template-columns:1fr}
  .vid-row{grid-template-columns:1fr}
  .menu-btn{display:block}
  nav#mainNav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 20px 18px;gap:0;box-shadow:0 18px 30px rgba(21,20,27,.08)}
  nav#mainNav.open{display:flex}
  nav#mainNav a{padding:14px 8px;font-size:18px;border-bottom:1px solid var(--line);border-radius:0}
  nav#mainNav a.active::after{left:8px;right:auto;width:36px;bottom:6px}
  .nav-user{padding:12px 8px 0}
  .hero,.split,.gate,.kids-hero,.lesson,.live-grid{grid-template-columns:1fr}
  .hero{gap:40px;padding-top:32px}
  .doors{justify-self:stretch;max-width:none}
  .gate,.split{gap:28px}
  .chat{height:460px}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .kv{grid-template-columns:1fr}
  .stars{justify-self:start}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .wrap,.top-in,.hero{padding-left:18px;padding-right:18px}
  .row2{grid-template-columns:1fr}
  .lesson-grid{grid-template-columns:1fr 1fr}
  .reader{padding:20px 18px}
  .quiz,.acts{padding:22px 18px}
  .join{padding:26px 22px}
  .event{grid-template-columns:1fr}.event .when{grid-column:1;grid-row:auto}
  .stage{padding:20px}
  .brand img{height:46px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ==========================================================================
   v6 – 3D hero, glass header, polish
   ========================================================================== */
:root{--hdr:71px}
body{padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))}
.top{position:fixed;left:0;right:0;top:0;transition:background .3s,border-color .3s,box-shadow .3s}
.top.scrolled{box-shadow:0 8px 30px rgba(21,20,27,.08)}
.brand .logo-l{display:none}
.top.on-dark{background:transparent;border-color:transparent;backdrop-filter:none;box-shadow:none}
.top.on-dark .brand .logo-d{display:none}.top.on-dark .brand .logo-l{display:block}
.top.on-dark nav#mainNav a{color:#fff}
.top.on-dark nav#mainNav a:hover{background:rgba(255,255,255,.12)}
.top.on-dark nav#mainNav a.active::after{background:#fff!important}
.top.on-dark .nav-user{color:rgba(255,255,255,.7)}
.top.on-dark .dot{background:rgba(255,255,255,.55)}
.top.on-dark .is-live .dot,.top.on-dark .live-link.is-live .dot{background:var(--red)}
.top.on-dark .menu-btn{border-color:rgba(255,255,255,.45)}.top.on-dark .menu-btn span{background:#fff}

/* ---- dark 3D hero ---- */
.hero3d{position:relative;margin-top:calc((var(--hdr) + env(safe-area-inset-top,0px))*-1);background:#0c0b13;color:#fff;overflow:hidden;isolation:isolate}
.hero3d-bg{position:absolute;inset:-25%;z-index:-1;background:
  radial-gradient(34% 36% at 74% 32%,rgba(152,43,181,.55),transparent 70%),
  radial-gradient(30% 32% at 90% 66%,rgba(54,88,201,.5),transparent 70%),
  radial-gradient(34% 38% at 58% 88%,rgba(246,38,44,.32),transparent 70%),
  radial-gradient(26% 28% at 34% 8%,rgba(166,197,53,.2),transparent 70%),
  linear-gradient(180deg,#11101b,#0a0910);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}
.hero3d-in{max-width:var(--maxw);margin:0 auto;padding:calc(var(--hdr) + env(safe-area-inset-top,0px) + 34px) 24px 96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;align-items:center;min-height:min(100vh,860px)}
.hero3d .hero-copy{position:relative;z-index:2}
.hero3d h1{font-size:clamp(2.4rem,5.1vw,4.4rem);font-weight:800;line-height:.98;letter-spacing:-.03em;text-wrap:balance;margin-bottom:24px;color:#fff}
.hero3d .lead{color:#d9daee;margin-bottom:30px}
.hero3d .hero-meta{color:#b6b8d0}
.hero3d .status{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(10px)}
.hero3d .status:hover{border-color:#fff}
.hero3d .status.is-live{background:rgba(246,38,44,.22);border-color:rgba(246,38,44,.8);color:#fff}
.hero3d .status .dot{background:rgba(255,255,255,.6)}.hero3d .status.is-live .dot{background:#ff5a5f}
.btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(8px)}
.btn-glass:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-red{box-shadow:0 10px 30px -8px rgba(246,38,44,.7)}
.stage3d{position:relative;width:100%;aspect-ratio:1/1.08;max-height:78vh;justify-self:end}
.stage3d canvas{position:absolute;inset:-14% -48%;width:196%;height:128%;display:block;touch-action:pan-y;pointer-events:none}
.stage3d.gl-on canvas{pointer-events:auto}
.fallback-cross{position:absolute;inset:6% 12%;width:76%;height:88%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));transition:opacity .8s}
.stage3d.gl-on .fallback-cross{opacity:0}
.stage-hint{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font-size:14px;color:#a9abc4;margin:0;opacity:0;transition:opacity .6s}
.stage3d.gl-on .stage-hint{opacity:1}
.tip3d{position:absolute;pointer-events:none;z-index:5;padding:8px 16px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;box-shadow:0 10px 34px rgba(0,0,0,.45);transform:translate(-50%,-150%)}
.hero-curve{position:absolute;left:0;bottom:-1px;width:100%;height:70px;display:block}
@media (prefers-reduced-motion:no-preference){
  .hero3d .hero-copy>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .hero3d .hero-copy>:nth-child(1){animation-delay:.05s}.hero3d .hero-copy>:nth-child(2){animation-delay:.15s}.hero3d .hero-copy>:nth-child(3){animation-delay:.28s}.hero3d .hero-copy>:nth-child(4){animation-delay:.4s}.hero3d .hero-copy>:nth-child(5){animation-delay:.5s}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}}
  .fallback-cross{animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{50%{transform:translateY(-10px) rotate(1.2deg)}}
}

/* ---- navigation tiles ---- */
.explore{padding-top:40px}
.explore .h-md{margin-bottom:22px}
.doors{grid-template-columns:repeat(4,1fr);gap:16px;max-width:none;justify-self:stretch;width:100%}
.door{animation:none!important;aspect-ratio:1/.92;--cx:100%!important;--cy:0%!important;justify-content:flex-end!important;padding:22px!important;--cut:34%;transition:--cut .35s cubic-bezier(.3,.7,.2,1),transform .25s ease,box-shadow .25s}
.door:hover,.door:focus-visible{--cut:46%;box-shadow:0 22px 40px -18px rgba(21,20,27,.45)}
.door-t{max-width:12ch!important;font-size:clamp(1.2rem,2vw,1.6rem)!important}
.door-s{max-width:20ch!important}

/* ---- verse band ---- */
.verse-band{margin-top:72px;background:#0c0b13;color:#fff;position:relative;overflow:hidden;padding:90px 0 96px;text-align:center}
.verse-band::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 70% at 15% 0%,rgba(246,38,44,.32),transparent 70%),radial-gradient(40% 70% at 85% 100%,rgba(54,88,201,.4),transparent 70%),radial-gradient(35% 60% at 50% 50%,rgba(152,43,181,.25),transparent 70%)}
.verse-band::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 25% 50%,var(--purple) 50% 75%,var(--green) 75%)}
.verse-band blockquote{position:relative;margin:0 auto;max-width:900px;font-family:var(--serif);font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.25;font-weight:500;padding:0 24px}
.verse-band cite{display:block;margin-top:22px;font-family:var(--sans);font-style:normal;font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:#c9cae0}

/* ---- scroll reveal + 3D tilt ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  [data-tilt]{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out,box-shadow .25s,--cut .35s}
  [data-tilt].untilt{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .25s,--cut .35s}
}
.pillars li{transition:background .25s,padding-left .25s}
.pillars li:hover{background:var(--mist);padding-left:30px}
.event{transition:background .25s,padding-left .25s}
.event:hover{background:var(--mist);padding-left:32px}
.join{background:linear-gradient(135deg,#f4f5f9,#eceefa)}

/* ---- footer ---- */
.foot{position:relative;margin-top:0;background:#0c0b13}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 25% 50%,var(--purple) 50% 75%,var(--green) 75%)}
.foot img{background:none!important;padding:0!important;border-radius:0!important;width:170px!important}

/* ---- Champions 3D stars ---- */
.stars3d{position:relative;width:100%;aspect-ratio:1/1;max-width:520px;justify-self:center}
.stars3d canvas{position:absolute;inset:-12% -30%;width:160%;height:124%;display:block;touch-action:pan-y}
.stars3d .stars{position:absolute;inset:0;align-content:center}
.stars3d.gl-on .stars{display:none}
.stars3d .stage-hint{color:var(--muted);bottom:-14px}
.stars3d::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(166,197,53,.3),rgba(54,88,201,.12) 62%,transparent 74%);filter:blur(6px)}

@media (max-width:900px){
  :root{--hdr:63px}
  .hero3d-in{grid-template-columns:1fr;padding-bottom:70px;min-height:0;gap:0}
  .stage3d{max-width:520px;margin:0 auto;justify-self:center;max-height:none}
  .doors{grid-template-columns:1fr 1fr}
  .top.on-dark nav#mainNav.open a{color:var(--ink)}
  .top.on-dark nav#mainNav.open .nav-user{color:var(--muted)}
  .verse-band{padding:70px 0}
}
@media (max-width:600px){.door{aspect-ratio:1/1}.hero3d h1{font-size:2.5rem}}

.ltile[data-tilt]:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}

/* ==========================================================================
   v7 – themed 3D banners on every page, Champions hero, ribbons
   ========================================================================== */
.banner{--g1:var(--purple);--g2:var(--blue);position:relative;margin-top:calc((var(--hdr) + env(safe-area-inset-top,0px))*-1);background:#0c0b13;color:#fff;overflow:hidden;isolation:isolate}
.banner.g-red{--g1:var(--red);--g2:var(--purple)}.banner.g-blue{--g1:var(--blue);--g2:var(--purple)}.banner.g-purple{--g1:var(--purple);--g2:var(--red)}.banner.g-green{--g1:var(--green);--g2:var(--blue)}.banner.g-multi{--g1:var(--purple);--g2:var(--green)}
.banner-bg{position:absolute;inset:-25%;z-index:-1;background:
  radial-gradient(38% 52% at 78% 42%,color-mix(in srgb,var(--g1) 55%,transparent),transparent 70%),
  radial-gradient(32% 44% at 96% 82%,color-mix(in srgb,var(--g2) 48%,transparent),transparent 70%),
  radial-gradient(30% 40% at 38% 105%,color-mix(in srgb,var(--red) 20%,transparent),transparent 70%),
  radial-gradient(24% 30% at 30% 0%,color-mix(in srgb,var(--green) 16%,transparent),transparent 70%),
  linear-gradient(180deg,#11101b,#0a0910);animation:drift 26s ease-in-out infinite alternate;will-change:transform}
.banner-in{max-width:var(--maxw);margin:0 auto;padding:calc(var(--hdr) + env(safe-area-inset-top,0px) + 26px) 24px 84px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:12px;align-items:center;min-height:430px}
.banner-compact .banner-in{min-height:330px;padding-bottom:70px}
.banner-copy{position:relative;z-index:2}
.banner h1{font-size:clamp(2.1rem,4.6vw,3.7rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.banner .lead{color:#d9daee;margin-top:18px;max-width:46ch}
.banner-stage{position:relative;height:340px;width:100%}
.banner-compact .banner-stage{height:270px}
.banner-stage canvas{position:absolute;inset:-22% -38%;width:176%;height:144%;display:block;pointer-events:none}
.banner-stage::before{content:"";position:absolute;inset:14%;border-radius:50%;background:conic-gradient(from 0deg,var(--red),var(--blue),var(--purple),var(--green),var(--red));filter:blur(38px);opacity:.5;transition:opacity .8s;animation:spin 22s linear infinite}
.banner-stage.gl-on::before{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.banner + .wrap{padding-top:44px}
.banner + .wrap.narrow{padding-top:48px}
@media (prefers-reduced-motion:no-preference){
  .banner-copy>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}.banner-copy>:nth-child(2){animation-delay:.12s}.banner-copy>:nth-child(3){animation-delay:.22s}.banner-copy>:nth-child(4){animation-delay:.3s}
}

/* ---- Champions: dark, vivid hero with the trophy and stars ---- */
.banner-kids{margin-bottom:0}
.banner-kids .banner-in{min-height:600px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.banner-kids h1{font-size:clamp(2.8rem,6.6vw,5.6rem);font-weight:900;line-height:.92;letter-spacing:-.035em}
.banner-kids h1 span{font-weight:300;font-size:.55em;letter-spacing:0;margin:0 .12em;color:#e3e4f5}
.banner-kids h1::after{content:"";display:block;height:10px;margin-top:20px;max-width:340px;border-radius:5px;background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 25% 50%,var(--purple) 50% 75%,var(--green) 75%)}
.banner-kids .champ-progress{margin:22px 0 14px}
.banner-kids .champ-progress b{color:#fff}
.banner-kids .bar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.banner-kids .verse-of{color:#e9eafb;font-size:1.15rem;min-height:3.4em;margin-bottom:12px}
.banner-kids .stars3d{aspect-ratio:1/1;max-width:600px;justify-self:end}
.banner-kids .stars .s-off path{fill:rgba(255,255,255,.2)}
.banner-kids .stage-hint{color:#a9abc4}
.banner-kids .stars3d::before{background:radial-gradient(closest-side,rgba(243,193,58,.28),rgba(152,43,181,.18) 62%,transparent 74%)}

/* ---- Home: ribbons behind the verse ---- */
.verse-band canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.9}
.verse-band::before{z-index:0}.verse-band blockquote{z-index:2}

@media (max-width:900px){
  .banner-in{grid-template-columns:1fr;padding-bottom:70px;min-height:0;gap:0}
  .banner-stage,.banner-compact .banner-stage{height:250px;margin-top:6px}
  .banner-kids .banner-in{min-height:0;grid-template-columns:1fr}
  .banner-kids .stars3d{justify-self:center;max-width:460px}
}
@media (max-width:600px){.banner h1{font-size:2.2rem}.banner-kids h1{font-size:3rem}.banner-stage canvas{inset:-18% -30%;width:160%;height:136%}}