/*
 * event.css — the event.monetise.com look across the site, in Camiforex colours.
 * Built by NgallaFX (ngallabrian@gmail.com)
 *
 *   1. Home hero: centred, the mentor on top, a wall of trading screens behind, one wide pill button
 *   2. Pricing cards in the "episode" style: colour glow at the top, one huge word, feature tiles
 *   3. Site-wide touches: pill buttons, cards lit from the top, feature tiles
 */

/* ---------- 1 · home hero ---------- */
.xh{position:relative;isolation:isolate;padding:6px 0 clamp(52px,6vw,96px);text-align:center;overflow:hidden}
.xh-bg{position:absolute;inset:-130px 0 0;z-index:-1;pointer-events:none;overflow:hidden}
.xh-bg img{position:absolute;left:50%;top:0;width:max(1600px,112%);height:auto;transform:translateX(-50%) perspective(1400px) rotateX(22deg);transform-origin:50% 0;opacity:.5;
  -webkit-mask:radial-gradient(80% 85% at 50% 30%,#000 35%,transparent 80%);mask:radial-gradient(80% 85% at 50% 30%,#000 35%,transparent 80%)}
/* darkness behind the words so the wall never fights the text */
.xh-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(36% 46% at 50% 66%,color-mix(in srgb,var(--bg) 96%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,transparent 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent) 0%,transparent 30%,transparent 62%,var(--bg) 100%)}
.xh-in{display:flex;flex-direction:column;align-items:center}

.xh-portrait{position:relative;width:min(470px,78vw);aspect-ratio:1;margin:0 0 -6px}
.xh-glow{position:absolute;left:50%;bottom:4%;width:92%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(58,242,127,.42),rgba(58,242,127,.12) 55%,transparent 100%);filter:blur(4px)}
.xh-portrait>img{position:relative;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  -webkit-mask:linear-gradient(#000 72%,transparent 99%);mask:linear-gradient(#000 72%,transparent 99%)}
.xh-portrait figcaption{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 14px 7px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,14,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:500 13px/1 var(--font-label,Inter);color:#fff}
.xh-portrait figcaption img{width:22px;height:22px;border-radius:50%}

.xh-pill{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 16px 8px 12px;border-radius:999px;
  border:1px solid rgba(58,242,127,.55);background:rgba(58,242,127,.07);box-shadow:inset 0 0 14px rgba(58,242,127,.28),0 0 22px -6px rgba(58,242,127,.5);
  font:500 13px/1 var(--font-label,Inter);text-transform:uppercase;letter-spacing:.01em}
.xh-pill i{width:10px;height:10px;border-radius:50%;background:#ff2d4b;box-shadow:0 0 0 0 rgba(255,45,75,.7);animation:xhPing 1.8s infinite}
.xh-pill span{color:var(--mint)}
.xh-pill b{color:var(--white);font-weight:600}
@keyframes xhPing{70%{box-shadow:0 0 0 8px rgba(255,45,75,0)}100%{box-shadow:0 0 0 0 rgba(255,45,75,0)}}

html body .xh h1{max-width:920px;margin:22px auto 14px}
html body .xh .lead{max-width:600px;margin:0 auto;color:var(--text)}
.xh-cta.btn{width:min(400px,100%);height:58px;margin-top:30px;border-radius:999px;font-size:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 36px -4px rgba(58,242,127,.75),inset 0 1px 0 rgba(255,255,255,.45)}
.xh-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:22px 0 0;padding:0}
.xh-points li,.xh-points a{display:inline-flex;align-items:center;gap:8px;font:italic 600 14px/1.2 var(--font);color:var(--text);letter-spacing:.01em}
.xh-points svg{width:18px;height:18px;color:var(--mint);flex:none}
.xh-points a:hover{color:var(--white)}
.xh-trust{margin-top:22px}

@media (max-width:809px){
  .xh-bg{inset:-90px 0 0}
  .xh-bg img{width:1100px;opacity:.5}
  .xh-portrait{width:min(330px,82vw)}
  .xh-portrait figcaption{font-size:12px}
  .xh-pill{font-size:11px;padding:7px 12px 7px 10px}
  .xh-cta.btn{height:54px;font-size:16px}
  .xh-points{gap:10px 18px}
  .xh-points li,.xh-points a{font-size:13px}
}
html[data-theme="light"] .xh-bg img{opacity:.22}
html[data-theme="light"] .xh-portrait figcaption{background:rgba(255,255,255,.85);color:#0b0c10;border-color:#e4e6eb}

/* ---------- 2 · pricing cards ("episode" cards) ---------- */
.x-stage .plans,.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px;align-items:stretch;justify-content:center;margin-top:8px}
.panel.plans{display:none}.panel.plans.on{display:grid}
.pc{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;text-align:center;padding:42px 26px 26px;border-radius:24px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(58,242,127,.95) 0%,rgba(58,242,127,.42) 9%,rgba(58,242,127,.10) 22%,transparent 36%),#050506;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -36px rgba(0,0,0,.9);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.pc:hover{transform:translateY(-4px);box-shadow:0 40px 70px -36px rgba(58,242,127,.4)}
.pc.feat{border-color:rgba(58,242,127,.45);background:linear-gradient(180deg,#c9ffdc 0%,rgba(58,242,127,.95) 7%,rgba(58,242,127,.42) 17%,rgba(58,242,127,.12) 30%,transparent 44%),#050506}
.pc-head{display:grid;justify-items:center;gap:4px;width:100%}
html body .pc-kind{margin:0;font:700 clamp(22px,7cqi,32px)/1.1 var(--font-display);font-variation-settings:"opsz" 32;letter-spacing:-.04em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.pc-big{max-width:100%;font:900 min(96px,17cqi)/.95 var(--font);font-stretch:125%;letter-spacing:-.04em;white-space:nowrap;
  background:linear-gradient(180deg,#ffffff 0%,#effff4 40%,#9dfcc0 78%,var(--mint) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(0,40,15,.25)) drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.pc-pop{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:999px;font:700 11px/1 var(--font-label,Inter);text-transform:uppercase;letter-spacing:.04em;color:#03140a;background:#fff}
html body .pc-title{margin:26px 0 0;max-width:340px;font:700 clamp(19px,6.6cqi,24px)/1.2 var(--font-display);font-variation-settings:"opsz" 28;letter-spacing:-.03em;color:#fff}
.pc-meta{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:12px 0 0;padding:0}
.pc-meta li{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.2 var(--font-label,Inter);text-transform:uppercase;color:rgba(255,255,255,.82)}
.pc-meta li small{font:inherit;color:rgba(255,255,255,.6);text-transform:none;margin-left:5px}
.pc-meta svg{width:18px;height:18px;color:rgba(255,255,255,.75)}
.pc-feats{list-style:none;display:grid;gap:12px;width:100%;margin:28px 0 0;padding:0;text-align:left}
.pc-feats li{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;background:#111113;border:1px solid rgba(255,255,255,.06)}
.pc-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;color:var(--mint)}
.pc-ic svg{width:28px;height:28px;stroke-width:1.6}
.pc-ft{display:grid;gap:2px;min-width:0}
.pc-ft small{font:500 13px/1.2 var(--font-label,Inter);color:rgba(255,255,255,.55)}
.pc-ft b{font:500 17px/1.35 var(--font);color:#fff;letter-spacing:-.01em}
.pc-cta{display:grid;gap:12px;width:100%;margin-top:auto;padding-top:24px}
.pc-cta .btn{width:100%;height:56px;border-radius:999px}
.pc-cta .btn-dark{background:#fff;color:#050506;border-color:#fff}
.pc-cta .plan-wa{font-size:14px;color:rgba(255,255,255,.65)}
.pc-cta .plan-wa:hover{color:#fff}

/* coming soon: the head stays sharp, the rest is blurred under the badge */
.pc.cs .cs-blur{width:100%;filter:blur(7px);opacity:.55;pointer-events:none;user-select:none;display:flex;flex-direction:column;flex:1}
.pc.cs .cs-over{position:absolute;left:0;right:0;top:58%;display:grid;justify-items:center;gap:8px;z-index:2}
.pc.cs .cs-pill{background:rgba(0,0,0,.7);box-shadow:inset 0 0 14px rgba(58,242,127,.8),0 0 30px rgba(58,242,127,.35)}
.pc.cs .cs-over small{color:rgba(255,255,255,.75)}

/* the pricing area sits on its own dark stage in light mode too, so the cards keep their glow */
html[data-theme="light"] .pc{box-shadow:0 30px 60px -36px rgba(15,23,42,.45)}

/* ---------- 3 · site-wide touches ---------- */
/* pill buttons (the gold contest button keeps its own shape) */
html body .btn:not(.btn-gold):not(.btn-sm){border-radius:999px}
html body .nav .btn{border-radius:999px}
/* cards lit from the top, like the episode cards */
.gcard,.x-path li,.ev-card,.nw-card{background-image:linear-gradient(180deg,rgba(58,242,127,.16),rgba(58,242,127,0) 120px)!important;background-color:#08080a}
html[data-theme="light"] .gcard,html[data-theme="light"] .x-path li,html[data-theme="light"] .ev-card,html[data-theme="light"] .nw-card{background-image:linear-gradient(180deg,rgba(58,242,127,.14),rgba(58,242,127,0) 120px)!important;background-color:#fff}
/* the numbers of the three steps: big, wide and filled with the site colour */
.x-path .x-num{font-size:clamp(56px,6vw,88px)!important;line-height:.9!important;background:linear-gradient(180deg,#e9ffe9 0%,var(--mint) 60%,#1f9d4e 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
/* lists of points as dark feature tiles */
.checks li{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.checks{display:grid;gap:10px}
html[data-theme="light"] .checks li{background:#f6f7f9;border-color:#eceef1}

/* ---------- v2 · tweaks ---------- */
/* hero: a darker wall on desktop */
@media (min-width:810px){.xh-bg img{opacity:.3}.xh-bg::after{background:radial-gradient(40% 52% at 50% 64%,color-mix(in srgb,var(--bg) 97%,transparent) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 60%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 62%,transparent) 0%,color-mix(in srgb,var(--bg) 18%,transparent) 30%,color-mix(in srgb,var(--bg) 18%,transparent) 62%,var(--bg) 100%)}}

/* sizes brought in line with the rest of the site */
.x-path .x-num{font-size:clamp(36px,3.4vw,48px)!important;line-height:1!important}
.pc{padding-top:34px}
html body .pc-kind{font-size:clamp(17px,5.4cqi,20px);letter-spacing:-.03em}
.pc-big{font-size:min(54px,12cqi);margin-top:2px}
html body .pc-title{margin-top:18px;font-size:clamp(16px,5cqi,18px);font-weight:600;line-height:1.35;letter-spacing:-.02em;max-width:300px}
.pc-meta li{font-size:13px}
.pc-feats{margin-top:22px;gap:10px}
.pc-feats li{padding:13px 16px}
.pc-ft b{font-size:15px}
.pc-ic svg{width:24px;height:24px}

/* "Coming soon" on a locked button (Admin → Settings → General) */
.btn-soon{cursor:not-allowed;pointer-events:none;gap:8px;background:rgba(255,255,255,.05)!important;color:rgba(255,255,255,.72)!important;border:1px dashed rgba(255,255,255,.25)!important;box-shadow:none!important}
.btn-soon svg{width:16px;height:16px}
html[data-theme="light"] .btn-soon{background:#f3f4f6!important;color:#6a6f79!important;border-color:#cfd3da!important}
.pc .btn-soon{height:56px;width:100%}

/* ---------- v3 · hero wall: brighter with a glow (desktop) ---------- */
@media (min-width:810px){
  .xh-bg img{opacity:.55;filter:brightness(1.18) saturate(1.15)}
  .xh-bg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(55% 60% at 50% 38%,rgba(58,242,127,.22),transparent 70%),radial-gradient(30% 40% at 18% 30%,rgba(58,242,127,.10),transparent 70%),radial-gradient(30% 40% at 82% 30%,rgba(58,242,127,.10),transparent 70%)}
  .xh-bg img{z-index:0}
  .xh-bg::after{z-index:1;background:radial-gradient(34% 40% at 50% 70%,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 60%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 45%,transparent) 0%,transparent 28%,transparent 64%,var(--bg) 100%)}
}
html[data-theme="light"] .xh-bg img{opacity:.24;filter:none}

/* ---------- v4 · hero background: the Camiforex trading desk photo, graded in the site colour ---------- */
.xh-bg{inset:-130px 0 0}
.xh-bg img,html[data-theme] .xh-bg img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:none;filter:none;opacity:.9;
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 55%,transparent 100%)}
.xh-bg::before{display:none}
/* darker behind the words, the desk and chair stay visible around them */
.xh-bg::after,html[data-theme] .xh-bg::after{z-index:1;background:
  radial-gradient(38% 34% at 50% 74%,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 65%,transparent 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 40%,transparent) 0%,color-mix(in srgb,var(--bg) 10%,transparent) 22%,color-mix(in srgb,var(--bg) 20%,transparent) 60%,var(--bg) 100%)}
@media (max-width:809px){.xh-bg{inset:-90px 0 0}.xh-bg img,html[data-theme] .xh-bg img{object-position:50% 20%;opacity:.8}}
html[data-theme="light"] .xh-bg img{opacity:.35}
/* v4b: the whole scene, chair behind the mentor; it fades out before the heading */
.xh-bg img,html[data-theme] .xh-bg img{height:auto;object-fit:initial;-webkit-mask:linear-gradient(180deg,#000 60%,transparent 92%);mask:linear-gradient(180deg,#000 60%,transparent 92%)}
@media (min-width:810px){.xh-bg img,html[data-theme] .xh-bg img{width:max(100%,1300px);left:50%;transform:translateX(-50%)}}
@media (max-width:809px){.xh-bg img,html[data-theme] .xh-bg img{width:auto;height:560px;left:50%;transform:translateX(-50%);opacity:.85}}
/* v4c: faded at the top as well as the bottom, and 10% fainter so the mentor stands out */
.xh-bg img,html[data-theme] .xh-bg img{opacity:.8;-webkit-mask:linear-gradient(180deg,transparent 4%,#000 30%,#000 60%,transparent 92%);mask:linear-gradient(180deg,transparent 4%,#000 30%,#000 60%,transparent 92%)}
@media (max-width:809px){.xh-bg img,html[data-theme] .xh-bg img{opacity:.75}}
html[data-theme="light"] .xh-bg img{opacity:.3}
/* v4d: the photo starts behind the header and the hero cuts it there, so fade it in from the hero's top edge */
.xh-bg img,html[data-theme] .xh-bg img{-webkit-mask:linear-gradient(180deg,#000 60%,transparent 92%);mask:linear-gradient(180deg,#000 60%,transparent 92%)}
.xh-bg::after,html[data-theme] .xh-bg::after{background:
  linear-gradient(180deg,var(--bg) 0,var(--bg) 130px,color-mix(in srgb,var(--bg) 55%,transparent) 210px,transparent 330px),
  radial-gradient(38% 34% at 50% 74%,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 65%,transparent 100%),
  linear-gradient(180deg,transparent 0%,transparent 30%,color-mix(in srgb,var(--bg) 20%,transparent) 60%,var(--bg) 100%)}
@media (max-width:809px){.xh-bg::after,html[data-theme] .xh-bg::after{background:
  linear-gradient(180deg,var(--bg) 0,var(--bg) 90px,color-mix(in srgb,var(--bg) 55%,transparent) 150px,transparent 250px),
  radial-gradient(60% 34% at 50% 74%,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 65%,transparent 100%),
  linear-gradient(180deg,transparent 0%,transparent 30%,color-mix(in srgb,var(--bg) 20%,transparent) 60%,var(--bg) 100%)}}