@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");

/* Wizard Games Website v3 */
:root {
  --cream:#fbf8fd;
  --cream-deep:#f1ebf7;
  --paper:#fffdfd;

  --ink:#433c50;
  --muted:#756d82;

  /* Keeping the old variable names avoids changing the rest of the CSS */
  --green:#ad92c7;
  --green-dark:#8067a0;
  --green-deep:#604c79;

  --gold:#efd3ac;
  --line:rgba(67,60,80,.11);

  --shadow:0 18px 50px rgba(96,76,121,.14);
  --shadow-soft:0 10px 28px rgba(96,76,121,.09);
  --radius-md:18px; --max:1160px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;color:var(--ink);background:
  radial-gradient(
    circle at 8% 2%,
    rgba(239,211,172,.18),
    transparent 24rem
  ),
  radial-gradient(
    circle at 94% 8%,
    rgba(173,146,199,.18),
    transparent 28rem
  ),
  linear-gradient(
    180deg,
    #fcf9ff,
    #f6f0fb
  );
font-family:"Open Sans","Segoe UI",Arial,sans-serif;line-height:1.6}
body.menu-open{overflow:hidden} img,video{display:block;max-width:100%} a{color:inherit} button{font:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto} section{padding:72px 0}
.site-header{position:sticky;top:0;z-index:50;padding:12px 0;border-bottom:1px solid rgba(64,58,55,.07);
background:rgba(255,248,236,.9);backdrop-filter:blur(18px)}
.nav-row{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--green-deep);font-weight:900;letter-spacing:-.03em}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;overflow:hidden;border-radius:13px;color:white;
background:linear-gradient(145deg,var(--green),var(--green-dark));box-shadow:var(--shadow-soft)}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.desktop-nav{display:flex;align-items:center;gap:24px}.desktop-nav a{text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:850}
.desktop-nav a:hover{color:var(--green-dark)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 21px;border:0;border-radius:999px;
color:white;background:var(--green-dark);text-decoration:none;font-weight:900;box-shadow:0 10px 24px rgba(79,118,93,.2);
transition:transform 160ms ease,background 160ms ease,box-shadow 160ms ease}
.button:hover{transform:translateY(-2px);background:var(--green-deep);box-shadow:0 14px 30px rgba(79,118,93,.24)}
.button.secondary{color:var(--green-deep);background:rgba(255,255,255,.84);border:1px solid rgba(53,85,66,.16);box-shadow:none}
.nav-button{min-height:42px;padding:10px 17px;color:white!important;background:var(--green-dark);border-radius:999px}
.menu-toggle{display:none;width:44px;height:44px;border:0;border-radius:13px;background:rgba(255,255,255,.8);cursor:pointer}
.mobile-nav{display:none;padding:8px 0 4px}.mobile-nav.open{display:block}.mobile-nav a{display:block;padding:12px 4px;border-top:1px solid var(--line);
color:var(--muted);text-decoration:none;font-weight:850}
.hero-wrap{padding:26px 0 6px}.hero{position:relative;min-height:680px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
border-radius:var(--radius-xl);background:var(--green-deep);box-shadow:var(--shadow)}
.hero-media,.hero-media video,.hero-fallback{position:absolute;inset:0;width:100%;height:100%}.hero-media video{object-fit:cover}
.hero-fallback{background:
    radial-gradient(
      circle at 80% 22%,
      rgba(239,211,172,.36),
      transparent 23%
    ),
    radial-gradient(
      circle at 22% 84%,
      rgba(190,169,215,.30),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #a98dc3,
      #604c79
    );}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(30,45,36,.74),rgba(30,45,36,.42) 48%,rgba(30,45,36,.08)),
linear-gradient(0deg,rgba(28,40,33,.5),transparent 58%)}.hero-content{position:relative;z-index:2;width:min(730px,100%);padding:58px;color:white}
.eyebrow{margin-bottom:11px;color:var(--green-dark);font-size:.76rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.hero .eyebrow{color:#f8dc97}h1,h2,h3,p{margin-top:0}h1{margin-bottom:18px;font-size:clamp(3.2rem,7vw,6.5rem);line-height:.95;letter-spacing:-.065em}
h2{margin-bottom:16px;font-size:clamp(2.15rem,4.6vw,4.15rem);line-height:1;letter-spacing:-.052em}
h3{margin-bottom:8px;font-size:1.15rem;line-height:1.25;letter-spacing:-.025em}.hero p{max-width:620px;margin-bottom:28px;color:rgba(255,255,255,.88);
font-size:clamp(1.05rem,2vw,1.27rem)}.hero .button{color:var(--green-deep);background:#fff6df}.hero .button:hover{background:white}
.button-row{display:flex;flex-wrap:wrap;gap:12px}.section-heading{max-width:760px;margin:0 auto 32px;text-align:center}
.section-heading p{margin-bottom:0;color:var(--muted);font-size:1.05rem}
.game-feature{padding-top:18px}.feature-card{overflow:hidden;border-radius:var(--radius-xl);background:var(--paper);box-shadow:var(--shadow)}
.feature-copy{max-width:820px;margin-inline:auto;padding:52px 50px 38px;text-align:center}.feature-copy p{max-width:680px;margin-inline:auto;color:var(--muted);font-size:1.08rem}
.feature-copy .button-row{justify-content:center}.comparison-shell{padding:0 24px 26px}.comparison{--position:50%;position:relative;width:100%;aspect-ratio:16/9;
overflow:hidden;touch-action:none;user-select:none;cursor:ew-resize;border-radius:26px;background:linear-gradient(145deg,#6f997a,#355542);outline:none}
.comparison:focus-visible{box-shadow:0 0 0 4px rgba(239,201,109,.85)}.comparison picture{position:absolute;inset:0}
.comparison img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.comparison-after{clip-path:inset(0 0 0 var(--position));will-change:clip-path}.comparison-divider{position:absolute;top:0;bottom:0;left:var(--position);z-index:4;
width:3px;transform:translateX(-50%);background:rgba(255,255,255,.96);box-shadow:0 0 18px rgba(29,43,34,.22);pointer-events:none}
.comparison-handle{position:absolute;top:50%;left:var(--position);z-index:5;width:54px;height:54px;display:grid;place-items:center;transform:translate(-50%,-50%);
border:3px solid white;border-radius:50%;color:var(--green-deep);background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(34,48,39,.24);
font-size:1.25rem;font-weight:950;pointer-events:none}.comparison-label{position:absolute;top:18px;z-index:6;padding:8px 12px;border-radius:999px;color:white;
background:rgba(35,48,40,.58);backdrop-filter:blur(8px);font-size:.76rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.comparison-label.before{left:18px}.comparison-label.after{right:18px}.drag-hint{margin:14px 0 0;color:var(--muted);text-align:center;font-size:.88rem;font-weight:800;transition:opacity 220ms ease}
.drag-hint.hidden{opacity:0}.video-section{background:rgba(235,226,244,.60);border-block:1px solid rgba(64,58,55,.06)}
.video-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px}
.video-card{position:relative;display:block;overflow:hidden;aspect-ratio:9/16;border-radius:23px;color:white;background:linear-gradient(155deg,#89b398,#355542);
box-shadow:var(--shadow-soft);text-decoration:none;scroll-snap-align:start}.video-card video,.video-card img{width:100%;height:100%;object-fit:cover}
.video-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,37,29,.76),transparent 52%);pointer-events:none}
.video-copy{position:absolute;left:17px;right:17px;bottom:17px;z-index:2}.video-copy span{display:inline-block;margin-bottom:6px;color:#f8dc97;font-size:.7rem;
font-weight:950;letter-spacing:.1em;text-transform:uppercase}.video-copy h3{margin:0;color:white;font-size:1.05rem}
.video-play{position:absolute;top:15px;right:15px;z-index:2;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--green-deep);
background:rgba(255,255,255,.9);box-shadow:var(--shadow-soft);font-size:.85rem}.center-actions{display:flex;justify-content:center;margin-top:28px}
.studio-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:68px;align-items:start}.studio-copy{color:var(--muted);font-size:clamp(1.12rem,2.1vw,1.4rem)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}.stat{min-height:132px;padding:23px;border:1px solid rgba(64,58,55,.08);
border-radius:var(--radius-md);background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft)}.stat strong{display:block;color:var(--green-dark);
font-size:clamp(1.7rem,3.3vw,2.6rem);line-height:1;letter-spacing:-.05em}.stat span{display:block;margin-top:10px;color:var(--muted);font-size:.86rem;font-weight:850}
.past-games{padding-top:18px}.past-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:23px}.past-heading h2{margin-bottom:0;font-size:clamp(1.85rem,3vw,2.75rem)}
.past-heading p{max-width:470px;margin-bottom:0;color:var(--muted)}.past-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.past-card{overflow:hidden;border:1px solid rgba(64,58,55,.08);
border-radius:17px;background:rgba(255,255,255,.72);box-shadow:var(--shadow-soft)}.past-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#789c83,#355542)}
.past-media img{width:100%;height:100%;object-fit:cover}.asset-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:15px;color:rgba(255,255,255,.86);text-align:center;font-size:.76rem;font-weight:850}
.past-body{padding:14px 15px 16px}.past-body h3{margin-bottom:4px;font-size:.98rem}.past-body p{margin-bottom:0;color:var(--muted);font-size:.8rem;line-height:1.45}
.signup-card{overflow:hidden;padding:clamp(40px,7vw,76px);border-radius:var(--radius-xl);color:white;background:
  radial-gradient(
    circle at 83% 16%,
    rgba(239,211,172,.36),
    transparent 26%
  ),
  radial-gradient(
    circle at 12% 88%,
    rgba(190,169,215,.24),
    transparent 24%
  ),
  var(--green-dark);
box-shadow:var(--shadow);text-align:center}.signup-card .eyebrow{color:#f8dc97}.signup-card h2{max-width:760px;margin-inline:auto}.signup-card p{max-width:650px;margin-inline:auto;color:rgba(255,255,255,.8);font-size:1.06rem}
.signup-card .button-row{justify-content:center;margin-top:26px}.signup-card .button{color:var(--green-deep);background:white}
.social-picker{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px}.social-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
color:white;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);transition:transform 160ms ease,background 160ms ease}
.social-icon:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}.social-icon svg{width:22px;height:22px;fill:currentColor}
.business-note{margin-top:20px!important;font-size:.86rem!important}footer{padding:36px 0 42px;color:var(--muted);font-size:.86rem}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid var(--line)}.footer-links{display:flex;gap:15px}.footer-links a{text-decoration:none;font-weight:850}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 520ms ease,transform 520ms ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){section{padding:60px 0}.desktop-nav{display:none}.menu-toggle{display:grid;place-items:center}.hero{min-height:610px}.hero-content{padding:40px}
.studio-grid{grid-template-columns:1fr;gap:18px}.past-grid{grid-template-columns:repeat(2,1fr)}.past-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.container{width:min(calc(100% - 24px),var(--max))}section{padding:50px 0}.hero-wrap{padding:12px 0 4px}.hero{min-height:600px;border-radius:24px}
.hero-content{padding:28px 21px}h1{font-size:clamp(3rem,15vw,4.5rem)}h2{font-size:clamp(2rem,10.5vw,3.1rem)}.button-row{align-items:stretch}.button-row .button{width:100%}
.feature-copy{padding:32px 21px 26px}.comparison-shell{padding:0 10px 14px}.comparison{aspect-ratio:4/3;border-radius:18px}.comparison-label{top:11px;padding:6px 9px;font-size:.66rem}
.comparison-label.before{left:11px}.comparison-label.after{right:11px}.comparison-handle{width:48px;height:48px}.stats,.past-grid{grid-template-columns:1fr}.stat{min-height:0}.footer-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ============================================================
   INLINE NEWSLETTER FORM
   ============================================================ */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}
.newsletter-form{max-width:690px;margin:28px auto 0}
.newsletter-fields{
  display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px;
  border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px)
}
.newsletter-fields input{
  min-width:0;padding:14px 18px;border:0;outline:0;border-radius:999px;
  color:var(--ink);background:white;font:inherit;font-size:1rem
}
.newsletter-fields input::placeholder{color:#8c837d}
.newsletter-fields input:focus{box-shadow:0 0 0 4px rgba(239,201,109,.55)}
.newsletter-submit{white-space:nowrap;cursor:pointer}
.newsletter-submit[disabled]{opacity:.72;cursor:default;transform:none}
.newsletter-fine-print{
  margin:12px auto 0!important;color:rgba(255,255,255,.64)!important;
  font-size:.78rem!important
}
.newsletter-status{
  min-height:1.5em;margin:8px auto 0!important;color:#fff6d8!important;
  font-size:.9rem!important;font-weight:800
}
.newsletter-status.success{color:#fff!important}
.newsletter-status.error{color:#ffe2d8!important}
.mailchimp-honeypot{position:absolute;left:-5000px}
.mailchimp-frame{position:absolute;width:1px;height:1px;border:0;opacity:0;pointer-events:none}

/* ============================================================
   LIGHTWEIGHT COZY MOTION
   ============================================================ */
.cozy-sparkles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cozy-sparkles span{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:rgba(255,246,211,.82);box-shadow:0 0 14px rgba(255,239,174,.8);
  animation:cozyFloat 7s ease-in-out infinite
}
.cozy-sparkles span:nth-child(1){left:72%;top:21%;animation-delay:-1s}
.cozy-sparkles span:nth-child(2){left:84%;top:42%;width:5px;height:5px;animation-delay:-4s}
.cozy-sparkles span:nth-child(3){left:65%;top:64%;width:6px;height:6px;animation-delay:-2.5s}
.cozy-sparkles span:nth-child(4){left:91%;top:72%;width:4px;height:4px;animation-delay:-5.5s}
.cozy-sparkles span:nth-child(5){left:58%;top:30%;width:4px;height:4px;animation-delay:-3s}
@keyframes cozyFloat{
  0%,100%{transform:translate3d(0,8px,0) scale(.8);opacity:.2}
  45%{opacity:.95}
  50%{transform:translate3d(10px,-18px,0) scale(1.18)}
}
.comparison.is-new .comparison-handle{animation:handleInvite 1.25s ease-in-out 2}
@keyframes handleInvite{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.13)}
}
.video-card,.past-card,.stat{transition:transform 180ms ease,box-shadow 180ms ease}
.video-card:hover,.past-card:hover,.stat:hover{
  transform:translateY(-5px);box-shadow:0 16px 34px rgba(78,64,53,.14)
}
.button:active{transform:translateY(0) scale(.96)}
.signup-stars{
  margin-bottom:8px;color:#f8dc97;font-size:1.1rem;letter-spacing:.2em;
  animation:starsBreathe 3.6s ease-in-out infinite
}
@keyframes starsBreathe{0%,100%{opacity:.48;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}

@media(max-width:620px){
  .newsletter-fields{grid-template-columns:1fr;border-radius:24px}
  .newsletter-fields input,.newsletter-submit{width:100%}
  .cozy-sparkles span:nth-child(1),
  .cozy-sparkles span:nth-child(5){display:none}
}
@media(prefers-reduced-motion:reduce){
  .cozy-sparkles span,.comparison.is-new .comparison-handle,.signup-stars{animation:none!important}
  .video-card:hover,.past-card:hover,.stat:hover{transform:none}
}


/* Social platform picker beneath Latest Clips */
.social-follow-block {
  margin-top: 28px;
  text-align: center;
}
.social-follow-block p {
  margin-bottom: 13px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 800;
}
.social-picker-dark {
  margin-top: 0;
}
.social-picker-dark .social-icon {
  color: var(--green-deep);
  background: rgba(255,255,255,.78);
  border-color: rgba(53,85,66,.14);
  box-shadow: var(--shadow-soft);
}
.social-picker-dark .social-icon:hover {
  color: white;
  background: var(--green-dark);
}

/* ============================================================
   OPEN SANS TYPOGRAPHY
   ============================================================ */
body,
button,
input,
textarea,
select,
h1,
h2,
h3,
.button,
.desktop-nav a,
.mobile-nav a,
.brand,
.eyebrow,
.stat,
.newsletter-fields input,
.newsletter-submit {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* ============================================================
   BEFORE / AFTER INVITATION PULSE
   ============================================================ */
.comparison.is-new .comparison-handle {
  animation: handleInvite 1.35s ease-in-out infinite;
}

@keyframes handleInvite {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 8px 22px rgba(34,48,39,.24),
      0 0 0 0 rgba(239,201,109,.58);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.16);
    box-shadow:
      0 10px 28px rgba(34,48,39,.3),
      0 0 0 13px rgba(239,201,109,0);
  }
}

/* ============================================================
   SOCIAL ICONS BENEATH SHORT VIDEOS
   ============================================================ */
.social-picker-dark .social-icon {
  width: auto;
  height: auto;
  padding: 7px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.social-picker-dark .social-icon svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

.social-picker-dark .social-icon:hover {
  color: var(--green-dark);
  background: transparent;
  transform: translateY(-2px) scale(1.09);
  box-shadow: none;
}