/* Wizz. After Wizz on Refero: a black and white base with one hot pink
   accent, heavy all-caps display type, a floating black pill nav and a pastel
   gradient hero. Its signature move is a fan of tilted app screenshots, which
   here is the "Inside the app" band on black. */
:root[data-style="wizz"] {
  --canvas: #ffffff;
  --linen: #f5f5f5;
  --stone: #000000;
  --on-stone: #ffffff;
  --card: #ffffff;
  --hairline: #dadada;
  --ink: #000000;
  --iron: #333333;
  --graphite: #555555;
  --faint: #9a9a9a;
  --label: #555555;
  --accent: #ff3d9e;
  --mark: rgba(255,61,158,.22);
  --btn-bg: #ff3d9e; --btn-fg: #ffffff; --btn-hover: #f0228a;
  --ghost-border: transparent;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-quote: var(--font-sans);
  --font-mono: var(--font-sans);
  --w-display: 400; --w-heading: 400;
  --display: clamp(36px, 5.2vw, 72px);
  --lh-display: 0.94;
  --track-display: -0.01em;
  --h2: clamp(30px, 4.2vw, 56px);
  --track-h2: -0.01em;
  --h3: clamp(20px, 2vw, 24px);
  --label-size: 12px; --label-track: 0.05em;

  --radius: 12px; --radius-btn: 12px; --radius-card: 12px;
  --shadow-card: rgba(0,0,0,.05) 0 1px 10px, inset 0 0 0 1px #dadada;
}
[data-style="wizz"] h1, [data-style="wizz"] h2 { text-transform: uppercase; }
[data-style="wizz"] .moment-text h3, [data-style="wizz"] .gets h3, [data-style="wizz"] .done h3 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
[data-style="wizz"] .label { font-weight: 600; }
[data-style="wizz"] .hero > .wrap > .label,
[data-style="wizz"] .head .label,
[data-style="wizz"] .why-text .label,
[data-style="wizz"] .join-copy .label { color: #ff3d9e; }
[data-style="wizz"] .btn { font-weight: 600; }
[data-style="wizz"] .btn-primary { box-shadow: rgba(0,0,0,.3) 0 1px 30px; }
[data-style="wizz"] .btn-ghost { background: #000; color: #fff; }
[data-style="wizz"] .btn-ghost:hover { background: #292929; }

/* Floating black pill nav over the gradient */
[data-style="wizz"] .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 12px; margin-bottom: -80px; --ink: #ffffff; --iron: #dddddd; --linen: #292929; }
[data-style="wizz"] .nav .wrap { background: #000; border-radius: 999px; height: 60px; width: min(1152px, calc(100% - 32px)); padding: 0 8px 0 22px; }
[data-style="wizz"] .nav .brand span { color: #fff; }
[data-style="wizz"] .nav-links a { border-radius: 999px; font-weight: 500; }
[data-style="wizz"] .nav .btn { border-radius: 999px; min-height: 44px; }

/* Pastel gradient hero, the only multi-color surface */
[data-style="wizz"] .hero {
  padding-top: calc(80px + clamp(48px, 7vw, 96px));
  background: linear-gradient(135deg, #c9b8ff 0%, #a9e2ff 36%, #ffc2a1 72%, #ffe29a 100%);
}
[data-style="wizz"] .hero h1 span { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 30px rgba(0,0,0,.08); }
[data-style="wizz"] .hero-row p { color: #1a1a1a; }
[data-style="wizz"] .note { background: rgba(255,255,255,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px; }
[data-style="wizz"] .transcript { border-radius: 16px; }
[data-style="wizz"] .margin li { box-shadow: var(--shadow-card); }
[data-style="wizz"] .facts span { color: #1a1a1a; }
[data-style="wizz"] .play { background: #ff3d9e; }
[data-style="wizz"] .rec .dot { background: #ff3d9e; }
[data-style="wizz"] .chip { border-radius: 999px; box-shadow: var(--shadow-card); }

/* The fan: tilted, overlapping screenshots on black, no bezels or shadows */
[data-style="wizz"] .showcase { background: #000; --ink: #ffffff; --iron: #cccccc; --graphite: #9a9a9a; --hairline: #333; --bezel: 0px; --phone-shadow: none; padding-bottom: clamp(80px, 10vw, 140px); }
[data-style="wizz"] .showcase .head h2 { color: #fff; }
[data-style="wizz"] .showcase .phone .frame { border-radius: 24px; background: none; }
[data-style="wizz"] .showcase .phone .frame::after { display: none; }
[data-style="wizz"] .showcase .phone img { border-radius: 24px; }
/* The fanned screens overlap, so each caption (the same title and line Blue hour shows under every screen)
   appears as a dark card under its screen on hover, or on tap and keyboard focus. */
[data-style="wizz"] .showcase .phone { position: relative; outline: none; }
[data-style="wizz"] .showcase .phone figcaption {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 5;
  width: max-content; max-width: 24ch; padding: 10px 14px; border: 1px solid #333; border-radius: 14px;
  background: rgba(20,20,20,.94); color: #fff; font-size: 14px; text-align: center;
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
[data-style="wizz"] .showcase .phone figcaption .label { color: #ff3d9e; }
[data-style="wizz"] .showcase .phone:hover figcaption,
[data-style="wizz"] .showcase .phone:focus figcaption { opacity: 1; transform: translate(-50%, 0); }
[data-style="wizz"] .showcase .phone:focus-visible .frame { box-shadow: 0 0 0 3px #ff3d9e; }
[data-style="wizz"] .phones { gap: 0; padding-top: 24px; }
[data-style="wizz"] .phone { --pw: clamp(160px, 19vw, 248px); margin-inline: calc(var(--pw) * -0.1); transition: transform .4s var(--ease); }
[data-style="wizz"] .phone.hero-phone { --pw: clamp(160px, 19vw, 248px); z-index: 3; }
[data-style="wizz"] .phone:nth-child(1) { transform: rotate(-8deg) translateY(40px); z-index: 1; }
[data-style="wizz"] .phone:nth-child(2) { transform: rotate(-4deg) translateY(12px); z-index: 2; }
[data-style="wizz"] .phone:nth-child(3) { transform: rotate(0deg); }
[data-style="wizz"] .phone:nth-child(4) { transform: rotate(4deg) translateY(12px); z-index: 2; }
[data-style="wizz"] .phone:nth-child(5) { transform: rotate(8deg) translateY(40px); z-index: 1; }
[data-style="wizz"] .phone:hover, [data-style="wizz"] .phone:focus { transform: rotate(0deg) translateY(-12px) scale(1.04); z-index: 4; }
@media (max-width: 900px) {
  [data-style="wizz"] .phones { overflow: visible; justify-content: center; margin: 0; padding: 24px 0 0; }
  [data-style="wizz"] .phone, [data-style="wizz"] .phone.hero-phone { --pw: 34vw; margin-inline: -9vw; }
}

[data-style="wizz"] .when b { color: #000; }
[data-style="wizz"] .reason h2 { color: #fff; }
[data-style="wizz"] .reason .when b { color: #ff3d9e; }
[data-style="wizz"] .reason dl div { background: #141414; color: #fff; }
[data-style="wizz"] .honest { background: #000; color: #fff; }
[data-style="wizz"] .honest .label { color: #ff3d9e; }
[data-style="wizz"] .fit li { background: #fff; box-shadow: var(--shadow-card); }
[data-style="wizz"] .seg span { border-radius: 999px; }
[data-style="wizz"] input[type="text"], [data-style="wizz"] input[type="email"], [data-style="wizz"] select, [data-style="wizz"] textarea { background: #eeeeee; border-color: #cfcfcf; }
@media (max-width: 900px) { [data-style="wizz"] .phone.hero-phone { order: 0; } }