/* ============================================================
   Support hub — page-specific decoration.

   Organised by intent, not by product: look it up, learn it, watch it
   done, keep up, ask the room, talk to a human. People land here when
   something is broken, so the tone is warm and the fastest self-serve
   doors come first with the human backstop last.

   CYAN leads; red marks the YouTube/live badge and the search button;
   green marks "live now" and the human door; amber carries the Season 1
   disclaimer, which is the only warm-toned panel on the page.

   Keyframes are global, so everything here is `sp`-prefixed.

   NOTE on <p>/<a>/<input>/<button>: the theme styles bare form
   elements and links at specificity 0,1,1, which beats any single class
   here (0,1,0). Anything landing on one is scoped under `.xs-page`, and
   the search input/button restate their own background on :hover/:focus.
   ============================================================ */

@keyframes spGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
@keyframes spExpand{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---------- hero ---------- */
.sp-hero{position:relative;overflow:hidden;color:#fff;text-align:center;
	background:radial-gradient(circle at 22% 32%,#0d1a33,#04070f 64%)}
.sp-hero__fade{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none;
	background:linear-gradient(180deg,var(--ink-900) 0,var(--ink-900) 130px,transparent 100%)}
.sp-hero__glow{position:absolute;top:-120px;left:12%;width:520px;height:520px;border-radius:50%;
	background:radial-gradient(circle,rgba(0,212,255,.22),transparent 62%);filter:blur(28px);
	animation:spGlow 8s ease-in-out infinite;pointer-events:none}
.sp-hero__inner{position:relative;padding-top:calc(130px + clamp(1rem,3vw,2.5rem))}

/* search pill */
.sp-search{display:flex;align-items:center;gap:.6rem;background:#0b1120;
	border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.4rem .4rem .4rem 1.1rem;
	max-width:44rem;margin:0 auto;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.sp-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,.2)}
.sp-search__icon{color:rgba(255,255,255,.5);flex:none}
/* the theme styles bare inputs — restated on every state, and the
   uppercase placeholder transform reset the same way as Contact */
.xs-page .sp-search__input{flex:1;min-width:0;background:transparent;border:0;box-shadow:none;
	color:#fff;font-family:var(--font-body);font-size:1rem;line-height:1.4;padding:.6rem 0;margin:0;height:auto}
.xs-page .sp-search__input:focus{background:transparent;border:0;box-shadow:none;outline:none}
.xs-page .sp-search__input::placeholder{color:rgba(255,255,255,.4);text-transform:none;letter-spacing:normal}
.xs-page .sp-search__input::-webkit-input-placeholder{color:rgba(255,255,255,.4);text-transform:none;letter-spacing:normal}
.xs-page .sp-search__btn{flex:none;border-radius:999px;padding:.6rem 1.4rem}
.sp-search__cap{margin-top:.8rem;font-size:.86rem;color:rgba(255,255,255,.5)}

/* ---------- the hub ---------- */
.sp-hubhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem}

/* every door shares the lift-on-hover */
.sp-door{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:18px;
	padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;
	transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sp-door:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.55)}
.sp-door--grad{background:linear-gradient(160deg,#0d1a33,#0b1120);border-color:rgba(255,255,255,.12)}
/* Academy is the featured door — cyan ring + cyan-tinted shadow */
.sp-door--feature{background:linear-gradient(160deg,#0a2233,#0b1120);border-color:rgba(0,212,255,.5);
	box-shadow:0 22px 50px rgba(0,212,255,.1)}
.sp-door--feature:hover{box-shadow:0 30px 60px rgba(0,212,255,.16)}
/* the community door is deliberately quieter until it's seeded */
.sp-door--quiet{background:#0a0f1c;border-color:rgba(255,255,255,.08)}
.sp-door--human{background:linear-gradient(160deg,#12233d,#0b1120);border-color:rgba(58,219,118,.35)}

.sp-door__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.sp-door__tile{width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;
	justify-content:center;font-size:1.2rem;background:rgba(0,212,255,.12);
	border:1px solid rgba(0,212,255,.3);color:var(--cyan)}
.sp-door__tile--red{background:rgba(255,77,77,.12);border-color:rgba(255,77,77,.35);color:#ff4d4d}
.sp-door__tile--green{background:rgba(58,219,118,.12);border-color:rgba(58,219,118,.35);color:var(--success)}
.sp-door__tile--muted{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.sp-door__name{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.55rem);color:#fff;line-height:1.15}
.sp-door__tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cyan);margin-top:.25rem}
.sp-door--quiet .sp-door__name{color:rgba(255,255,255,.82)}
.sp-door--quiet .sp-door__tag{color:rgba(255,255,255,.5)}
.xs-page .sp-door__body{font-size:.98rem;line-height:1.55;color:rgba(255,255,255,.74);margin:0 0 1.3rem}
.xs-page .sp-door--quiet .sp-door__body{color:rgba(255,255,255,.6)}
.sp-door__foot{margin-top:auto}

/* small pills that ride in a door's top-right */
.sp-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.28rem .65rem;
	font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;flex:none;white-space:nowrap}
.sp-badge--cyan{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.45);color:var(--cyan)}
.sp-badge--red{background:rgba(255,77,77,.12);border:1px solid rgba(255,77,77,.45);color:#ff6b6b}
.sp-badge--green{background:rgba(58,219,118,.12);border:1px solid rgba(58,219,118,.45);color:var(--success)}
.sp-badge--muted{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55)}

/* ---------- video tutorials (wide card) ---------- */
.sp-video{border-color:rgba(0,212,255,.35)}
.sp-video__head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.3rem}

/* Season 1 disclaimer — the only amber panel on the page */
.sp-s1{background:rgba(255,180,60,.08);border:1px solid rgba(255,180,60,.3);border-radius:12px;
	padding:.9rem 1.1rem;margin:1.1rem 0 1.3rem}
.sp-s1__line{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.5;
	color:rgba(255,255,255,.82)}
.sp-s1__line>i{color:#ffb43c;flex:none;margin-top:.15rem}
/* the expander is a real <button>; the theme styles button:hover at
   0,1,1 so the background is restated to stop it going blue */
.xs-page .sp-s1__toggle{display:inline-flex;align-items:center;gap:.4rem;background:transparent;
	border:0;box-shadow:none;padding:.5rem 0 0;margin:0;cursor:pointer;
	font-family:var(--font-body);font-size:.82rem;font-weight:700;color:#ffb43c}
.xs-page .sp-s1__toggle:hover,
.xs-page .sp-s1__toggle:focus{background:transparent;color:#ffc66b;text-decoration:underline}
.sp-s1__toggle i{font-size:.7rem}
.xs-page .sp-s1__more{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.7);
	margin:.7rem 0 0;animation:spExpand .25s var(--ease) both}
.sp-s1__more[hidden]{display:none}

/* ---------- on the way ---------- */
.sp-soon{border:1px dashed rgba(0,212,255,.4);border-radius:16px;background:rgba(13,26,51,.4);
	padding:clamp(1.2rem,2.6vw,1.7rem);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.sp-soon__body{flex:1;min-width:16rem}
.sp-soon__head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.35rem}
.sp-soon__name{font-family:var(--font-display);font-size:1.25rem;color:#fff}
.xs-page .sp-soon__text{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.7);margin:0}

/* ---------- close ---------- */
.sp-close{position:relative;overflow:hidden;text-align:center;
	background:linear-gradient(150deg,var(--navy-900),#0d1a33)}
.sp-close__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:640px;height:420px;
	background:radial-gradient(circle,rgba(0,212,255,.3),transparent 65%);filter:blur(26px);pointer-events:none}
.sp-close__line{font-family:var(--font-display);font-size:clamp(1.3rem,2.8vw,2rem);
	line-height:1.3;color:#fff}
.sp-stamp{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.8rem);
	text-transform:uppercase;color:#fff;line-height:1.1}

@media (prefers-reduced-motion:reduce){
	.sp-hero__glow{animation:none}
	.sp-door:hover{transform:none}
	.xs-page .sp-s1__more{animation:none}
}