/* Go 1.1.1. Preserve the teal holographic design before the session starts.
   The selected card's data-phase="live" enables the warm red theme below.
   Colours are in :root. The centred page width is in .go-shell.
   The banner stays 4:1; images are cropped, never stretched.
   Small screens and reduced-motion preferences are handled below. */
:root{color-scheme:dark;--text:#e9f4f8;--muted:#91a9b7;--brand:#01abcd}
*{box-sizing:border-box}html{min-height:100%;background:#081018}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 50% -15%,#01abcd25,transparent 55%),linear-gradient(180deg,#081018,#0a121a 55%,#071018)}
.go-shell{width:min(100% - 32px,740px);margin:auto;padding:16px 0 64px}
.go-heading{text-align:center;margin:0 auto 36px;max-width:650px}.go-heading h1{font-size:clamp(2rem,6vw,3.3rem);letter-spacing:-.045em;line-height:1.1;margin:0 0 16px;overflow-wrap:anywhere}.go-heading p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0;white-space:pre-line}
.sessions{display:grid;gap:24px}.session-card{padding:clamp(20px,4vw,32px);border:1px solid #ffffff16;border-radius:24px;background:linear-gradient(145deg,#111e28,#0d1720 78%);box-shadow:0 20px 60px #0004;text-align:center}
.webinar-date{font-size:clamp(.96rem,2.5vw,1.1rem);line-height:1.6;margin:0 0 20px;color:#eff8fb}
a{text-decoration:none;color:inherit}.countdown-card{display:block}.holo-button{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:18px;min-height:54px;margin-top:20px;padding:14px 22px;border:1px solid #4de8ff88;border-radius:13px;background:linear-gradient(110deg,#01abcd28,#3274bd30 55%,#ad65fc24);box-shadow:inset 0 0 20px #4de8ff0d,0 0 24px #01abcd13;color:#e7fcff;font-weight:650;letter-spacing:.025em;transition:box-shadow .2s,border-color .2s,transform .2s}.holo-button::before{content:"";position:absolute;inset:-100% -30%;z-index:-1;background:linear-gradient(112deg,transparent 35%,#4de8ff22 46%,#d766ff20 54%,transparent 65%);animation:holoSweep 7s ease-in-out infinite}.holo-button:hover{border-color:#98f2ff;box-shadow:0 0 32px #01abcd35;transform:translateY(-1px)}a:focus-visible{outline:3px solid #c2f8ff;outline-offset:5px}.status{text-align:center;color:var(--muted);line-height:1.65;padding:20px 12px;margin:0}.status:empty{display:none}[hidden]{display:none!important}
.countdown-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #4de8ff66;border-radius:15px;background:linear-gradient(145deg,#07141dcc,#0a1a25e8 58%,#0b1420e8);box-shadow:inset 0 0 0 1px #ffffff08,inset 0 0 28px #01abcd0f,0 0 28px #01abcd14,0 14px 38px #0004;padding:12px 15px 13px;backdrop-filter:blur(10px)}.countdown-card::before{content:"";position:absolute;z-index:-1;inset:-65% -20%;background:linear-gradient(112deg,transparent 31%,#4de8ff13 43%,#d766ff12 51%,#ffffff0d 56%,transparent 69%);transform:translateX(-28%);animation:holoSweep 7s ease-in-out infinite}.countdown-card::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.22;background:linear-gradient(#7defff08 1px,transparent 1px),linear-gradient(90deg,#7defff06 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,#0009,transparent 88%)}.countdown-heading{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:#bcecf4;margin-bottom:9px;text-shadow:0 0 14px #55e6ff44}.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr)}.countdown-grid>div{padding:2px 11px 1px;border-left:1px solid #72e9ff25}.countdown-grid>div:first-child{border-left:0}.countdown-grid strong{display:block;font-size:clamp(1.55rem,4.5vw,2.2rem);font-weight:450;line-height:1.05;letter-spacing:.045em;color:#eefcff;font-variant-numeric:tabular-nums;text-shadow:0 0 10px #32deff66,0 0 22px #7d5cff22}.countdown-grid span{display:block;margin-top:7px;font-size:.62rem;letter-spacing:.12em;color:#a9cad6}@keyframes holoSweep{0%,100%{transform:translateX(-30%) rotate(.001deg);opacity:.45}50%{transform:translateX(30%) rotate(.001deg);opacity:.95}}@media(prefers-reduced-motion:reduce){.countdown-card::before{animation:none;transform:none;opacity:.55}}
@media(max-width:380px){.countdown-grid>div{padding:2px 5px}.countdown-grid span{font-size:.55rem;letter-spacing:.06em}.session-card{padding:20px 14px}}
@media(prefers-reduced-motion:reduce){.holo-button::before{animation:none}.holo-button{transition:none}.holo-button:hover{transform:none}}

.coming-soon{margin-top:24px;border-style:dashed;border-color:#4de8ff44;background:linear-gradient(145deg,#0e1d28,#101725);padding:30px 24px}.sessions:empty + .coming-soon{margin-top:0}.coming-icon{width:80px;height:80px;color:#83eaff;margin:0 auto 14px;filter:drop-shadow(0 0 12px #01abcd44);animation:calendarFloat 4s ease-in-out infinite}.coming-icon svg{width:100%;height:100%;display:block}.coming-soon h2{font-size:clamp(1.2rem,4vw,1.55rem);font-weight:600;margin:0 0 10px;overflow-wrap:anywhere}.coming-soon p{color:var(--muted);line-height:1.65;margin:0;white-space:pre-line;overflow-wrap:anywhere}@keyframes calendarFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}@media(prefers-reduced-motion:reduce){.coming-icon{animation:none}}

.go-banner{width:100%;aspect-ratio:4/1;margin:0 0 28px;border:1px solid #4de8ff33;border-radius:18px;overflow:hidden;background:#0d1720;box-shadow:0 16px 42px #0003}.go-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}@media(max-width:480px){.go-banner{border-radius:12px;margin-bottom:22px}}

/* Keep the one-session layout centred and allow long customised text to wrap. */
.sessions{min-width:0}.holo-button{overflow-wrap:anywhere}.holo-button>span:first-child{min-width:0}
.countdown-grid>div{min-width:0}.countdown-grid strong{overflow-wrap:anywhere}

/* LIVE COLOURS: these overrides apply ONLY from the selected session's start
   until its end. The original teal timer/button rules above stay unchanged.
   Warm red accent: #ff697b. Pale text stays readable on the dark background.
   The visible badge and live wording identify the state without colour alone. */
.live-badge{display:none;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin:0 auto 14px;padding:7px 12px;border:1px solid #ff697b66;border-radius:999px;background:#ff697b14;color:#ffd9df;font-size:.68rem;font-weight:750;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;overflow-wrap:anywhere}
.live-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#ff697b;box-shadow:0 0 12px #ff697b88;animation:liveSignal 2.8s ease-out infinite}
.session-card[data-phase="live"]{border-color:#ff697b40;background:linear-gradient(145deg,#201821,#131720 78%)}
.session-card[data-phase="live"] .live-badge{display:flex}
.session-card[data-phase="live"] .countdown-card{border-color:#ff697b99;background:linear-gradient(145deg,#24131dcc,#21151ee8 58%,#171720e8);box-shadow:inset 0 0 0 1px #ffffff08,inset 0 0 28px #ff697b12,0 0 28px #ff697b1f,0 14px 38px #0004}
.session-card[data-phase="live"] .countdown-card::before{background:linear-gradient(112deg,transparent 31%,#ff697b24 43%,#e97fac18 51%,#ffffff0d 56%,transparent 69%)}
.session-card[data-phase="live"] .countdown-card::after{background-image:linear-gradient(#ffb1bf0d 1px,transparent 1px),linear-gradient(90deg,#ffb1bf09 1px,transparent 1px)}
.session-card[data-phase="live"] .countdown-heading{color:#ffced5;text-shadow:0 0 14px #ff697b44}
.session-card[data-phase="live"] .countdown-grid>div{border-left-color:#ff8b9c33}
.session-card[data-phase="live"] .countdown-grid strong{color:#fff1f4;text-shadow:0 0 10px #ff697b55,0 0 22px #fa718522}
.session-card[data-phase="live"] .countdown-grid span{color:#e4bbc4}
.session-card[data-phase="live"] .holo-button{border-color:#ff758ab3;background:linear-gradient(110deg,#b52f4355,#a83b593d 55%,#78447230);box-shadow:inset 0 0 20px #ff8c9d12,0 0 24px #ff697b20;color:#fff1f4}
.session-card[data-phase="live"] .holo-button::before{background:linear-gradient(112deg,transparent 35%,#ff9aab26 46%,#fa83b624 54%,transparent 65%)}
.session-card[data-phase="live"] .holo-button:hover{border-color:#ffc5d0;box-shadow:0 0 32px #ff697b40}
.session-card[data-phase="live"] a:focus-visible{outline-color:#ffd1d9}
@keyframes liveSignal{0%{box-shadow:0 0 0 0 #ff697b66}75%,100%{box-shadow:0 0 0 6px #ff697b00}}

/* MESSAGE PANEL: content and the true/false switch are in go/index.php, A5.
   Teal before start; the SAME phase used by the timer switches it to warm red.
   display:none removes the inactive version from both layout and screen readers. */
.session-note{--note-accent:#87e7f7;--note-text:#b1c5d0;--note-border:#4de8ff30;--note-tint:#01abcd0b;--note-icon:#01abcd15;margin-top:20px;padding:20px;border:1px solid var(--note-border);border-radius:18px;background:linear-gradient(125deg,var(--note-tint),#ffffff02);text-align:left}
.note-state{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:17px}
.note-icon{position:relative;display:grid;place-items:center;width:60px;height:60px;border:1px solid var(--note-border);border-radius:18px 18px 18px 7px;background:var(--note-icon);color:var(--note-accent);animation:noteFloat 5s ease-in-out infinite}
.note-icon svg{display:block;width:27px;height:27px;fill:currentColor}
.note-icon::after{content:"✦";position:absolute;top:-6px;right:-5px;font-size:16px;line-height:1;color:var(--note-accent);text-shadow:0 0 10px var(--note-icon)}
.note-copy{min-width:0}.note-copy h2{margin:0 0 6px;color:var(--text);font-size:1.02rem;font-weight:650;line-height:1.4;letter-spacing:-.015em;white-space:pre-line;overflow-wrap:anywhere}.note-copy p{margin:0;color:var(--note-text);font-size:.87rem;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere}
.note-live{display:none}
.session-card[data-phase="live"] .session-note{--note-accent:#ff9aaa;--note-text:#d3b9c2;--note-border:#ff697b38;--note-tint:#ff697b0d;--note-icon:#ff697b16}
.session-card[data-phase="live"] .note-before{display:none}
.session-card[data-phase="live"] .note-live{display:grid}
@keyframes noteFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@media(max-width:420px){.session-note{padding:16px 14px}.note-state{grid-template-columns:44px minmax(0,1fr);gap:12px}.note-icon{width:44px;height:48px;border-radius:14px 14px 14px 6px}.note-icon svg{width:23px;height:23px}.note-copy h2{font-size:.96rem}.note-copy p{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.live-dot,.note-icon{animation:none;transform:none}}

/* The live timer counts elapsed time from the scheduled start. */
.countdown-ago{margin-top:10px;color:#e4bbc4;font-size:.66rem;line-height:1.3;letter-spacing:.13em;text-transform:uppercase}