/* TRACKSUPPLY — Future Session visual experiment
   Branch-only presentation layer. No storefront, pricing, payment, or catalog
   behavior is changed here. */

body[data-design="future-session"] {
  --future-pearl: #fff8f2;
  --future-lavender: #c7b5ff;
  --future-cobalt: #3457ff;
  --future-cyan: #35e7ff;
  --future-pink: #ff4fd8;
  --future-coral: #ff9678;
  --future-lime: #c8ff45;
  --future-yellow: #ffe66b;
  --future-ink: #172044;
  --future-muted: #536083;
  --future-line: rgba(52, 87, 255, 0.2);
  --future-glass: rgba(255, 255, 255, 0.68);
  --future-shadow: 0 28px 80px rgba(74, 54, 180, 0.18);
  --bg: var(--future-pearl);
  --panel: rgba(255, 255, 255, 0.78);
  --panel-2: #eee9ff;
  --line: var(--future-line);
  --text: var(--future-ink);
  --muted: var(--future-muted);
  --accent: var(--future-cobalt);
  --accent-dim: #2443d8;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--future-ink);
  background:
    radial-gradient(circle at 4% 4%, rgba(255, 79, 216, 0.26), transparent 26rem),
    radial-gradient(circle at 96% 18%, rgba(53, 231, 255, 0.35), transparent 30rem),
    radial-gradient(circle at 54% 86%, rgba(199, 181, 255, 0.42), transparent 36rem),
    var(--future-pearl);
  font-family: "Space Grotesk", "Archivo", sans-serif;
}

body[data-design="future-session"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(52, 87, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 87, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

body[data-design="future-session"] main {
  position: relative;
  overflow: hidden;
}

body[data-design="future-session"] .wrap {
  max-width: 1320px;
  padding-inline: clamp(20px, 5vw, 70px);
}

body[data-design="future-session"] a:focus-visible,
body[data-design="future-session"] button:focus-visible,
body[data-design="future-session"] input:focus-visible,
body[data-design="future-session"] select:focus-visible,
body[data-design="future-session"] textarea:focus-visible,
body[data-design="future-session"] summary:focus-visible {
  outline: 3px solid var(--future-pink);
  outline-offset: 3px;
}

/* Chromatic glass navigation */
body[data-design="future-session"] .site-header {
  position: fixed;
  inset: 16px 0 auto;
  z-index: 50;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

body[data-design="future-session"] .header-inner {
  width: min(calc(100% - 32px), 1240px);
  height: 64px;
  padding: 0 12px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.86), rgba(238, 233, 255, 0.74)),
    var(--future-glass);
  box-shadow:
    0 18px 50px rgba(52, 87, 255, 0.16),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(165%);
  pointer-events: auto;
}

body[data-design="future-session"] .brand {
  position: relative;
  color: var(--future-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

body[data-design="future-session"] .brand::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--future-pink);
  box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.17), 13px 0 0 -2px var(--future-cyan);
}

body[data-design="future-session"] .brand span {
  margin-left: 6px;
  color: var(--future-cobalt);
}

body[data-design="future-session"] nav {
  display: flex;
  align-items: center;
  gap: 3px;
}

body[data-design="future-session"] nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 15px;
  border-radius: 13px;
  color: #475273;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-design="future-session"] nav a:hover {
  color: var(--future-cobalt);
  background: rgba(199, 181, 255, 0.42);
}

body[data-design="future-session"] .cart-fab {
  color: var(--future-cobalt);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}
body[data-design="future-session"] .cart-fab:hover { color: var(--future-pink); }

/* Home: an original CSS-built robot session while generated art is pending. */
body[data-design="future-session"][data-page="home"] .hero {
  position: relative;
  width: calc(100% - 28px);
  max-width: 1600px;
  min-height: calc(100svh - 28px);
  margin: 14px auto 0;
  padding: clamp(130px, 17vh, 180px) clamp(24px, 6vw, 94px) 110px;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 34px;
  background:
    radial-gradient(circle at 74% 22%, rgba(255, 230, 107, 0.88), transparent 18rem),
    radial-gradient(circle at 94% 78%, rgba(53, 231, 255, 0.86), transparent 27rem),
    radial-gradient(circle at 56% 92%, rgba(255, 79, 216, 0.58), transparent 29rem),
    radial-gradient(circle at 10% 9%, rgba(199, 181, 255, 0.95), transparent 31rem),
    linear-gradient(135deg, #fffdf9 0%, #eeeaff 38%, #dffcff 72%, #fff3bc 100%);
  box-shadow: var(--future-shadow), inset 0 1px 0 #fff;
}

body[data-design="future-session"][data-page="home"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, 0.72) 56.2% 56.5%, transparent 56.7%),
    repeating-radial-gradient(circle at 82% 54%, transparent 0 32px, rgba(52, 87, 255, 0.07) 33px 34px);
}

body[data-design="future-session"] #hero-fx {
  z-index: 2;
  opacity: 0.72;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, transparent 0 30%, #000 55%, #000 100%);
}

body[data-design="future-session"] .studio-atmosphere,
body[data-design="future-session"] .studio-stage,
body[data-design="future-session"] .hero-wordmark {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
}

body[data-design="future-session"] .studio-atmosphere { z-index: 1 !important; }

body[data-design="future-session"] .studio-beam {
  position: absolute;
  top: -24%;
  width: 24%;
  height: 110%;
  opacity: 0.72;
  filter: blur(13px);
  transform-origin: 50% 0;
}

body[data-design="future-session"] .studio-beam-left {
  left: 46%;
  transform: rotate(-19deg);
  clip-path: polygon(42% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 79, 216, 0.56), rgba(255, 79, 216, 0.03));
}

body[data-design="future-session"] .studio-beam-right {
  right: 1%;
  transform: rotate(14deg);
  clip-path: polygon(40% 0, 57% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(53, 231, 255, 0.64), rgba(53, 231, 255, 0.04));
}

body[data-design="future-session"] .studio-haze {
  position: absolute;
  inset: 18% -12% 0 35%;
  background:
    radial-gradient(ellipse at 28% 42%, rgba(255, 79, 216, 0.36), transparent 31%),
    radial-gradient(ellipse at 74% 38%, rgba(53, 231, 255, 0.42), transparent 32%),
    radial-gradient(ellipse at 53% 72%, rgba(200, 255, 69, 0.32), transparent 36%);
  filter: blur(30px);
  animation: future-haze 9s ease-in-out infinite alternate;
}

body[data-design="future-session"] .hero-wordmark {
  z-index: 1 !important;
  top: 13%;
  left: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(52, 87, 255, 0.065);
  font-size: clamp(100px, 16vw, 250px);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: -0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-3deg);
}

body[data-design="future-session"] .hero-wordmark span:last-child {
  color: rgba(255, 79, 216, 0.075);
  transform: translateX(7%);
}

body[data-design="future-session"] .hero-content {
  position: relative;
  z-index: 8 !important;
  width: min(49%, 650px);
  text-shadow: none;
}

body[data-design="future-session"] .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 8px 12px;
  border: 1px solid rgba(52, 87, 255, 0.19);
  border-radius: 999px;
  color: var(--future-cobalt);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 28px rgba(52, 87, 255, 0.1);
  font-size: 10px;
}

body[data-design="future-session"] .kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--future-lime);
  box-shadow: 0 0 0 4px rgba(200, 255, 69, 0.28);
}

body[data-design="future-session"] .hero h1 {
  max-width: 9.4ch;
  color: var(--future-ink);
  font-size: clamp(58px, 7.2vw, 112px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

body[data-design="future-session"] .hero h1 em {
  display: inline;
  color: var(--future-cobalt);
  font-style: normal;
  text-shadow: 5px 5px 0 rgba(255, 79, 216, 0.2);
}

body[data-design="future-session"] .lede {
  max-width: 52ch;
  margin-top: 28px;
  color: #3f4d72;
  font-size: clamp(15px, 1.22vw, 18px);
  line-height: 1.68;
}

body[data-design="future-session"] .hero-cta {
  margin-top: 32px;
}

body[data-design="future-session"] .hero-note {
  max-width: 58ch;
  margin-top: 24px;
  color: #667192;
  font-size: 10px;
}

/* The robot ensemble is intentionally graphic, not an imitation of a known robot. */
body[data-design="future-session"] .studio-stage {
  z-index: 4 !important;
  left: 44%;
  top: 18%;
  right: 1.5%;
  bottom: 2%;
  perspective: 1000px;
  filter: drop-shadow(0 35px 35px rgba(63, 51, 160, 0.2));
}

body[data-design="future-session"] .future-wave {
  position: absolute;
  left: 1%;
  right: -8%;
  height: 90px;
  border: 14px solid transparent;
  border-top-color: var(--future-pink);
  border-radius: 50%;
  opacity: 0.52;
  filter: drop-shadow(0 0 12px rgba(255, 79, 216, 0.25));
  animation: future-wave 7s ease-in-out infinite alternate;
}

body[data-design="future-session"] .wave-a { top: 17%; transform: rotate(7deg); }
body[data-design="future-session"] .wave-b { top: 25%; border-top-color: var(--future-cyan); transform: rotate(-4deg) scaleX(0.92); animation-delay: -3s; }

body[data-design="future-session"] .future-orb {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.64), 0 18px 45px rgba(52, 87, 255, 0.18);
}

body[data-design="future-session"] .orb-a {
  top: 8%; right: 4%; width: 74px; height: 74px;
  background: linear-gradient(135deg, var(--future-yellow), var(--future-coral));
}

body[data-design="future-session"] .orb-b {
  top: 30%; left: 3%; width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--future-cyan), var(--future-lime));
}

body[data-design="future-session"] .future-robot {
  position: absolute;
  z-index: 4;
  width: 132px;
  height: 310px;
  transform-origin: 50% 100%;
}

body[data-design="future-session"] .robot-engineer { left: 42%; bottom: 28%; --robot-a: var(--future-cyan); --robot-b: var(--future-pink); transform: scale(1.03); }
body[data-design="future-session"] .robot-drummer { left: 4%; bottom: 16%; --robot-a: var(--future-coral); --robot-b: var(--future-lime); transform: rotate(-3deg) scale(0.86); }
body[data-design="future-session"] .robot-keys { right: 3%; bottom: 16%; --robot-a: var(--future-lavender); --robot-b: var(--future-yellow); transform: rotate(3deg) scale(0.88); }

body[data-design="future-session"] .robot-head {
  position: absolute;
  left: 22px;
  top: 12px;
  width: 88px;
  height: 70px;
  border: 2px solid #fff;
  border-radius: 30px 30px 24px 24px;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.96), rgba(238,233,255,0.7)),
    var(--robot-a);
  box-shadow: inset -12px -10px 22px color-mix(in srgb, var(--robot-a) 30%, transparent), 0 16px 28px rgba(52, 87, 255, 0.2);
}

body[data-design="future-session"] .robot-head i {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 25px;
  height: 13px;
  border-radius: 999px;
  background: var(--future-ink);
  box-shadow: inset 18px 0 0 var(--robot-a), inset -18px 0 0 var(--robot-b), 0 0 12px color-mix(in srgb, var(--robot-a) 62%, transparent);
}

body[data-design="future-session"] .robot-antenna {
  position: absolute;
  top: 0;
  left: 63px;
  width: 3px;
  height: 18px;
  border-radius: 9px;
  background: var(--future-cobalt);
}

body[data-design="future-session"] .robot-antenna::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--robot-b);
  box-shadow: 0 0 12px var(--robot-b);
}

body[data-design="future-session"] .robot-neck {
  position: absolute;
  left: 52px;
  top: 78px;
  width: 28px;
  height: 24px;
  border-radius: 9px;
  background: var(--future-cobalt);
}

body[data-design="future-session"] .robot-torso {
  position: absolute;
  left: 12px;
  top: 96px;
  width: 108px;
  height: 128px;
  border: 2px solid rgba(255,255,255,0.94);
  border-radius: 28px 28px 38px 38px;
  background:
    radial-gradient(circle at 50% 23%, #fff 0 6px, transparent 7px),
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(199,181,255,0.74) 60%, var(--robot-a));
  box-shadow: inset -16px -12px 25px color-mix(in srgb, var(--robot-b) 28%, transparent), 0 22px 36px rgba(52,87,255,0.2);
}

body[data-design="future-session"] .robot-torso i {
  position: absolute;
  left: 23px;
  right: 23px;
  top: 43px;
  height: 34px;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--robot-a), var(--robot-b));
  box-shadow: inset 0 0 14px rgba(255,255,255,0.6);
}

body[data-design="future-session"] .robot-arm {
  position: absolute;
  top: 112px;
  width: 27px;
  height: 134px;
  border: 2px solid #fff;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--robot-a), #fff 55%, var(--robot-b));
  transform-origin: 50% 12px;
  box-shadow: 0 10px 20px rgba(52,87,255,0.14);
}

body[data-design="future-session"] .arm-left { left: -7px; transform: rotate(24deg); }
body[data-design="future-session"] .arm-right { right: -7px; transform: rotate(-24deg); }
body[data-design="future-session"] .robot-engineer .arm-left { transform: rotate(48deg); height: 148px; }
body[data-design="future-session"] .robot-engineer .arm-right { transform: rotate(-48deg); height: 148px; }
body[data-design="future-session"] .robot-drummer .arm-left { transform: rotate(38deg); }
body[data-design="future-session"] .robot-drummer .arm-right { transform: rotate(-57deg); }
body[data-design="future-session"] .robot-keys .arm-left { transform: rotate(53deg); }
body[data-design="future-session"] .robot-keys .arm-right { transform: rotate(-42deg); }

body[data-design="future-session"] .studio-monitor {
  position: absolute;
  z-index: 2;
  top: 24%;
  width: 116px;
  height: 176px;
  padding-top: 24px;
  border: 2px solid #fff;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(199,181,255,0.62));
  box-shadow: 0 25px 50px rgba(52,87,255,0.17), inset 0 1px 0 #fff;
  opacity: 0.78;
}

body[data-design="future-session"] .studio-monitor-left { left: -2%; transform: rotate(-7deg); }
body[data-design="future-session"] .studio-monitor-right { right: -1%; transform: rotate(7deg); }

body[data-design="future-session"] .studio-monitor i {
  display: block;
  width: 62%;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border: 6px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, var(--future-yellow) 0 14%, var(--future-pink) 15% 32%, var(--future-cobalt) 33% 51%, var(--future-cyan) 52% 70%, #fff 71%);
  box-shadow: 0 0 22px rgba(255,79,216,0.24);
}

body[data-design="future-session"] .studio-monitor i:first-child { width: 28%; border-width: 4px; margin-bottom: 16px; }

body[data-design="future-session"] .studio-console {
  position: absolute;
  z-index: 7;
  left: 16%;
  right: 15%;
  bottom: -4%;
  height: 35%;
  transform: rotateX(55deg);
  transform-origin: 50% 100%;
  border: 3px solid rgba(255,255,255,0.92);
  border-radius: 28px 28px 8px 8px;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(52,87,255,0.22) 50%, transparent 50.2%),
    linear-gradient(150deg, rgba(255,255,255,0.94), #dcd5ff 52%, #9ef7ff);
  box-shadow: 0 -10px 38px rgba(52,87,255,0.24), inset 0 1px 0 #fff;
}

body[data-design="future-session"] .console-bridge {
  position: absolute;
  left: 5%; right: 5%; top: 6%; height: 28%;
  display: grid;
  grid-template-columns: 1fr minmax(90px, 0.7fr) 1fr;
  gap: 4%;
  align-items: center;
  padding: 2% 4%;
  border: 2px solid rgba(255,255,255,0.82);
  border-radius: 14px;
  background: rgba(52,87,255,0.82);
}

body[data-design="future-session"] .console-display {
  width: min(100%, 130px);
  height: 32px;
  justify-self: center;
  border: 2px solid rgba(255,255,255,0.82);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0 8%, var(--future-yellow) 9% 13%, transparent 14% 23%, var(--future-pink) 24% 31%, transparent 32% 44%, var(--future-lime) 45% 54%, transparent 55% 68%, var(--future-cyan) 69% 85%, transparent 86%),
    var(--future-ink);
  box-shadow: inset 0 0 16px rgba(53,231,255,0.35);
}

body[data-design="future-session"] .meter-bank {
  height: 72%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5%;
}

body[data-design="future-session"] .meter-bank i {
  width: 5%;
  min-width: 3px;
  height: 58%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--future-yellow), var(--future-pink) 43%, var(--future-cyan));
  animation: future-meter 1.8s steps(4, end) infinite alternate;
}

body[data-design="future-session"] .meter-bank i:nth-child(2n) { height: 82%; animation-delay: -0.9s; }
body[data-design="future-session"] .meter-bank i:nth-child(3n) { height: 38%; animation-delay: -0.45s; }

body[data-design="future-session"] .console-surface {
  position: absolute;
  inset: 39% 4% 8%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.3%;
}

body[data-design="future-session"] .channel-strip {
  position: relative;
  border-inline: 1px solid rgba(52,87,255,0.18);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 14%, var(--future-pink) 0 3px, #fff 4px 6px, transparent 7px),
    radial-gradient(circle at 50% 35%, var(--future-lime) 0 3px, #fff 4px 6px, transparent 7px),
    linear-gradient(90deg, transparent 45%, rgba(52,87,255,0.3) 46% 54%, transparent 55%) 50% 72% / 100% 47% no-repeat;
}

body[data-design="future-session"] .channel-strip::after {
  content: "";
  position: absolute;
  left: 27%; right: 27%; bottom: var(--fader, 24%);
  height: 8%; min-height: 5px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: var(--future-cobalt);
  box-shadow: 0 3px 8px rgba(52,87,255,0.22);
}

body[data-design="future-session"] .channel-strip:nth-child(3n) { --fader: 39%; }
body[data-design="future-session"] .channel-strip:nth-child(4n) { --fader: 17%; }
body[data-design="future-session"] .channel-strip:nth-child(5n) { --fader: 51%; }

body[data-design="future-session"] .future-pad {
  position: absolute;
  z-index: 8;
  left: 0;
  bottom: 6%;
  width: 180px;
  height: 120px;
  border: 3px solid #fff;
  border-radius: 22px;
  transform: rotate(-7deg) rotateX(38deg);
  background:
    radial-gradient(circle at 15% 18%, var(--future-pink) 0 9px, transparent 10px),
    repeating-conic-gradient(from 0deg, var(--future-pink) 0 22deg, var(--future-yellow) 23deg 44deg, var(--future-cyan) 45deg 67deg, var(--future-lime) 68deg 90deg) 20px 20px / 34px 34px;
  box-shadow: 0 22px 34px rgba(255,79,216,0.2);
}

body[data-design="future-session"] .future-keys {
  position: absolute;
  z-index: 8;
  right: -3%;
  bottom: 5%;
  width: 250px;
  height: 105px;
  border: 3px solid #fff;
  border-radius: 20px;
  transform: rotate(6deg) rotateX(38deg);
  background:
    repeating-linear-gradient(90deg, #fff 0 20px, var(--future-cobalt) 21px 23px),
    linear-gradient(135deg, var(--future-lavender), var(--future-cyan));
  box-shadow: 0 22px 34px rgba(52,87,255,0.2);
}

/* Buttons and controls */
body[data-design="future-session"] .btn {
  min-height: 48px;
  padding: 13px 23px;
  border-radius: 15px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-design="future-session"] .btn.primary {
  border: 1px solid var(--future-cobalt);
  color: #fff;
  background: linear-gradient(135deg, var(--future-cobalt), #6a46ff 58%, var(--future-pink));
  box-shadow: 0 14px 34px rgba(52,87,255,0.25), inset 0 1px 0 rgba(255,255,255,0.38);
}

body[data-design="future-session"] .btn.primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2448ff, #7c51ff 52%, #ff36d2);
  box-shadow: 0 19px 42px rgba(52,87,255,0.32), inset 0 1px 0 rgba(255,255,255,0.42);
}

body[data-design="future-session"] .btn.ghost {
  border: 1px solid rgba(52,87,255,0.22);
  color: var(--future-ink);
  background: rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 0 #fff;
}

body[data-design="future-session"] .btn.ghost:hover {
  border-color: var(--future-pink);
  color: var(--future-cobalt);
  background: rgba(255,255,255,0.92);
}

/* Catalog: high-information table in a bright signal console. */
body[data-design="future-session"] .catalog-explore {
  position: relative;
  max-width: none;
  padding-top: clamp(110px, 12vw, 175px);
  padding-bottom: clamp(100px, 11vw, 150px);
  background:
    radial-gradient(circle at 90% 12%, rgba(255,79,216,0.24), transparent 26rem),
    radial-gradient(circle at 8% 83%, rgba(53,231,255,0.3), transparent 28rem),
    linear-gradient(180deg, #fff8f2, #f0ebff 56%, #e8fbff);
}

body[data-design="future-session"] .catalog-explore::before {
  content: "";
  position: absolute;
  top: 58px;
  left: clamp(20px, 5vw, 70px);
  width: min(380px, 38vw);
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--future-pink) 0 24%, var(--future-coral) 24% 42%, var(--future-yellow) 42% 59%, var(--future-lime) 59% 76%, var(--future-cyan) 76%);
  box-shadow: 0 8px 24px rgba(52,87,255,0.16);
}

body[data-design="future-session"] .catalog-explore .section-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.58fr);
  align-items: end;
  gap: 42px;
  margin-bottom: 46px;
}

body[data-design="future-session"] .catalog-explore .section-head h2 {
  color: var(--future-ink);
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.08em;
}

body[data-design="future-session"] .catalog-explore .section-head .sub {
  justify-self: end;
  color: var(--future-muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
}

body[data-design="future-session"] .filter-bar {
  position: sticky;
  top: 92px;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(240px, 1.8fr) repeat(4, minmax(115px, auto));
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 20px;
  background: rgba(255,255,255,0.73);
  box-shadow: 0 20px 52px rgba(52,87,255,0.15), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px) saturate(160%);
}

body[data-design="future-session"] .filter-bar input[type="search"],
body[data-design="future-session"] .filter-bar select,
body[data-design="future-session"] .filter-bar .btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(52,87,255,0.16);
  border-radius: 13px;
  color: var(--future-ink);
  background: rgba(238,233,255,0.72);
}

body[data-design="future-session"] .filter-bar input::placeholder { color: #717c9c; }
body[data-design="future-session"] .filter-bar input:focus,
body[data-design="future-session"] .filter-bar select:focus { outline: 2px solid var(--future-cyan); outline-offset: 0; }

body[data-design="future-session"] .tag-chips { gap: 7px; margin: 0 0 26px; }

body[data-design="future-session"] .chip {
  min-height: 34px;
  padding: 7px 13px;
  border-color: rgba(52,87,255,0.2);
  color: #596789;
  background: rgba(255,255,255,0.55);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

body[data-design="future-session"] .chip:nth-child(4n+1):hover { border-color: var(--future-pink); }
body[data-design="future-session"] .chip:nth-child(4n+2):hover { border-color: var(--future-cyan); }
body[data-design="future-session"] .chip:nth-child(4n+3):hover { border-color: var(--future-lime); }
body[data-design="future-session"] .chip.on {
  border-color: var(--future-cobalt);
  color: #fff;
  background: linear-gradient(135deg, var(--future-cobalt), #7052ff);
  box-shadow: 0 8px 20px rgba(52,87,255,0.2);
}

body[data-design="future-session"] .table-scroll {
  max-height: none;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 22px;
  background: rgba(255,255,255,0.74);
  box-shadow: var(--future-shadow), inset 0 1px 0 #fff;
}

body[data-design="future-session"] .catalog-table[data-layout="table"] {
  min-width: 780px;
  background: transparent;
}

body[data-design="future-session"] .catalog-table[data-layout="table"] thead th {
  padding: 15px 16px;
  border-color: rgba(52,87,255,0.15);
  color: #526084;
  background: linear-gradient(90deg, rgba(199,181,255,0.55), rgba(53,231,255,0.22));
  font-size: 9px;
  letter-spacing: 0.16em;
}

body[data-design="future-session"] .catalog-table[data-layout="table"] tbody tr {
  background: rgba(255,255,255,0.48);
}

body[data-design="future-session"] .catalog-table[data-layout="table"] tbody tr:nth-child(even) {
  background: rgba(238,233,255,0.46);
}

body[data-design="future-session"] .catalog-table[data-layout="table"] tbody tr:hover {
  background: rgba(53,231,255,0.24);
}

body[data-design="future-session"] .catalog-table[data-layout="table"] tbody tr.playing {
  background: linear-gradient(90deg, rgba(255,79,216,0.2), rgba(53,231,255,0.22));
}

body[data-design="future-session"] .catalog-table[data-layout="table"] td {
  padding: 15px 16px;
  border-color: rgba(52,87,255,0.12);
  color: #354260;
}

body[data-design="future-session"] .catalog-table[data-layout="table"] .cell-title {
  color: var(--future-ink);
  font-size: 15px;
}

body[data-design="future-session"] .catalog-table[data-layout="table"] .row-play {
  width: 34px;
  height: 34px;
  border-color: rgba(52,87,255,0.24);
  border-radius: 11px;
  color: var(--future-cobalt);
  background: rgba(255,255,255,0.82);
}

body[data-design="future-session"] .catalog-table[data-layout="table"] tr.playing .row-play {
  border-color: var(--future-cobalt);
  color: #fff;
  background: var(--future-cobalt);
}

body[data-design="future-session"] .catalog-table[data-layout="table"] .row-cart {
  width: auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,79,216,0.35);
  border-radius: 11px;
  color: #7e2571;
  background: rgba(255,79,216,0.1);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 32px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-design="future-session"] .result-count { color: var(--future-cobalt); }

/* Inner-page hero system: each route gets a distinct color atmosphere. */
body[data-design="future-session"] .page-head {
  position: relative;
  max-width: min(1320px, calc(100% - 28px));
  min-height: 430px;
  margin: 14px auto 70px;
  padding: clamp(132px, 17vh, 180px) clamp(28px, 7vw, 92px) 76px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 34px;
  background:
    radial-gradient(circle at 84% 35%, rgba(53,231,255,0.72), transparent 17rem),
    radial-gradient(circle at 63% 85%, rgba(255,79,216,0.45), transparent 24rem),
    linear-gradient(135deg, #fffdf9, #e9e4ff 48%, #ddfbff);
  box-shadow: var(--future-shadow), inset 0 1px 0 #fff;
}

body[data-design="future-session"] .page-head::before,
body[data-design="future-session"] .page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

body[data-design="future-session"] .page-head::before {
  top: -24%;
  right: 4%;
  width: clamp(220px, 34vw, 470px);
  aspect-ratio: 1;
  border: clamp(28px, 4vw, 62px) solid rgba(255,255,255,0.54);
  border-radius: 44% 56% 63% 37% / 42% 34% 66% 58%;
  background: linear-gradient(135deg, rgba(199,181,255,0.7), rgba(255,79,216,0.42) 48%, rgba(53,231,255,0.75));
  box-shadow: 0 36px 90px rgba(52,87,255,0.16), inset 0 0 0 2px rgba(52,87,255,0.08);
  transform: rotate(18deg);
}

body[data-design="future-session"] .page-head::after {
  right: 36%;
  top: 21%;
  width: 88px;
  height: 88px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--future-yellow), var(--future-lime));
  box-shadow: 0 20px 44px rgba(92,83,196,0.2);
}

body[data-design="future-session"][data-page="custom"] .page-head {
  background:
    radial-gradient(circle at 88% 24%, rgba(200,255,69,0.65), transparent 18rem),
    radial-gradient(circle at 62% 92%, rgba(255,150,120,0.52), transparent 25rem),
    linear-gradient(135deg, #fffaf3, #ffe8f8 45%, #e8ffd5);
}

body[data-design="future-session"][data-page="catalog"] .page-head {
  background:
    radial-gradient(circle at 88% 24%, rgba(53,231,255,0.76), transparent 18rem),
    radial-gradient(circle at 64% 91%, rgba(255,79,216,0.5), transparent 25rem),
    linear-gradient(135deg, #fffaf3, #e8e4ff 46%, #d8fcff);
}

body[data-design="future-session"][data-page="catalog"] .page-head::before {
  border-radius: 32px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.9) 0 12px, transparent 13px 26px),
    linear-gradient(135deg, var(--future-pink), var(--future-cobalt) 48%, var(--future-cyan));
  transform: rotate(12deg) perspective(700px) rotateX(18deg);
}

body[data-design="future-session"][data-page="faq"] .page-head {
  background:
    radial-gradient(circle at 86% 23%, rgba(255,230,107,0.78), transparent 18rem),
    radial-gradient(circle at 64% 90%, rgba(53,231,255,0.55), transparent 25rem),
    linear-gradient(135deg, #fffaf3, #e7faff 48%, #f1eaff);
}

body[data-design="future-session"][data-page="portal"] .page-head,
body[data-design="future-session"][data-page="thanks"] .hero {
  background:
    radial-gradient(circle at 82% 29%, rgba(255,79,216,0.48), transparent 20rem),
    radial-gradient(circle at 58% 93%, rgba(53,231,255,0.52), transparent 24rem),
    linear-gradient(135deg, #fffaf5, #e8e4ff 49%, #dcfbff);
}

body[data-design="future-session"] .page-head h1 {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  color: var(--future-ink);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.07em;
  text-wrap: balance;
}

body[data-design="future-session"] .page-head .sub {
  position: relative;
  z-index: 1;
  max-width: 68ch;
  color: #4e5b7d;
  line-height: 1.66;
}

/* General bright surfaces */
body[data-design="future-session"] .tier,
body[data-design="future-session"] .custom-card,
body[data-design="future-session"] .brief-form,
body[data-design="future-session"] .clause-box,
body[data-design="future-session"] .disclosure-banner,
body[data-design="future-session"] .faq details {
  border: 1px solid rgba(255,255,255,0.92);
  color: var(--future-ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.9), rgba(238,233,255,0.66));
  box-shadow: 0 22px 60px rgba(52,87,255,0.12), inset 0 1px 0 #fff;
}

body[data-design="future-session"] .tier {
  border-radius: 24px;
}

body[data-design="future-session"] .tier:nth-child(3n+1) { background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(53,231,255,0.2)); }
body[data-design="future-session"] .tier:nth-child(3n+2) { background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,79,216,0.14)); }
body[data-design="future-session"] .tier:nth-child(3n+3) { background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(200,255,69,0.22)); }
body[data-design="future-session"] .tier.featured { border: 2px solid var(--future-pink); box-shadow: 0 24px 70px rgba(255,79,216,0.18), inset 0 1px 0 #fff; }
body[data-design="future-session"] .tier h3,
body[data-design="future-session"] .custom-card h3,
body[data-design="future-session"] .clause-box h3 { color: var(--future-ink); }
body[data-design="future-session"] .tier .price { color: var(--future-cobalt); }
body[data-design="future-session"] .tier li,
body[data-design="future-session"] .tier-note,
body[data-design="future-session"] .custom-card li,
body[data-design="future-session"] .fine { color: var(--future-muted); }
body[data-design="future-session"] .flag { color: var(--future-ink); background: var(--future-yellow); }

body[data-design="future-session"] .step {
  border-color: rgba(52,87,255,0.16);
}

body[data-design="future-session"] .step > span {
  color: var(--future-pink);
}

body[data-design="future-session"] .brief-form,
body[data-design="future-session"] .custom-card,
body[data-design="future-session"] .clause-box,
body[data-design="future-session"] .disclosure-banner {
  border-radius: 24px;
}

body[data-design="future-session"] .brief-form input,
body[data-design="future-session"] .brief-form select,
body[data-design="future-session"] .brief-form textarea {
  border: 1px solid rgba(52,87,255,0.18);
  border-radius: 13px;
  color: var(--future-ink);
  background: rgba(255,255,255,0.74);
}

body[data-design="future-session"] .brief-form input:focus,
body[data-design="future-session"] .brief-form select:focus,
body[data-design="future-session"] .brief-form textarea:focus {
  border-color: var(--future-cyan);
  box-shadow: 0 0 0 4px rgba(53,231,255,0.16);
}

body[data-design="future-session"] .faq details {
  margin-bottom: 12px;
  border-radius: 18px;
}

body[data-design="future-session"] .faq details[open] {
  border-color: rgba(255,79,216,0.34);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,79,216,0.1), rgba(53,231,255,0.13));
}

body[data-design="future-session"] .faq summary { color: var(--future-ink); }
body[data-design="future-session"] .faq p,
body[data-design="future-session"] .legal p,
body[data-design="future-session"] .legal li { color: #4d5a7d; }
body[data-design="future-session"] .legal h2 { color: var(--future-cobalt); }
body[data-design="future-session"] .legal h3 { color: var(--future-ink); }

body[data-design="future-session"] .cta-band {
  margin-block: 100px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 28px;
  color: var(--future-ink);
  background:
    radial-gradient(circle at 85% 12%, rgba(255,230,107,0.82), transparent 18rem),
    linear-gradient(115deg, rgba(199,181,255,0.82), rgba(255,79,216,0.2) 54%, rgba(53,231,255,0.52));
  box-shadow: var(--future-shadow), inset 0 1px 0 #fff;
}

body[data-design="future-session"] .cta-band .sub { color: #485578; }

/* Modal, cart, player */
body[data-design="future-session"] .modal-overlay {
  background: rgba(32,25,86,0.44);
  backdrop-filter: blur(18px) saturate(150%);
}

body[data-design="future-session"] .modal,
body[data-design="future-session"] .cart-drawer,
body[data-design="future-session"] .assent-modal {
  border-color: rgba(255,255,255,0.88);
  border-radius: 26px;
  color: var(--future-ink);
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(238,233,255,0.92));
  box-shadow: 0 42px 110px rgba(45,31,128,0.28), inset 0 1px 0 #fff;
}

body[data-design="future-session"] .tm-art {
  border-color: rgba(52,87,255,0.18);
  border-radius: 18px;
  color: var(--future-cobalt);
  background:
    radial-gradient(circle at 22% 28%, var(--future-pink), transparent 24%),
    radial-gradient(circle at 72% 66%, var(--future-cyan), transparent 28%),
    linear-gradient(135deg, #fff, var(--future-lavender)) !important;
}

body[data-design="future-session"] .tier-wrap {
  border-color: rgba(52,87,255,0.16);
  border-radius: 15px;
  background: rgba(255,255,255,0.62);
}

body[data-design="future-session"] .tier-wrap.sel {
  border-color: var(--future-pink);
  background: rgba(255,79,216,0.09);
}

body[data-design="future-session"] .player-bar {
  left: 16px;
  right: 16px;
  bottom: 16px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,79,216,calc(var(--lvl) * 0.3)), transparent 40%),
    rgba(23,32,68,0.94);
  box-shadow: 0 28px 72px rgba(39,28,126,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(20px) saturate(150%);
}

body[data-design="future-session"] .player-bar::before {
  background: linear-gradient(90deg, var(--future-pink), var(--future-yellow), var(--future-lime), var(--future-cyan), var(--future-cobalt));
}

body[data-design="future-session"] .play-btn {
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--future-pink), var(--future-cobalt));
}

body[data-design="future-session"] .toast {
  border-color: rgba(255,255,255,0.86);
  color: var(--future-ink);
  background: rgba(255,255,255,0.92);
}

/* Footer */
body[data-design="future-session"] .site-footer {
  border-top: 0;
  color: #596586;
  background:
    radial-gradient(circle at 10% 130%, rgba(255,79,216,0.34), transparent 26rem),
    radial-gradient(circle at 90% 130%, rgba(53,231,255,0.42), transparent 26rem),
    #ebe6ff;
}

body[data-design="future-session"] .site-footer a { color: #536083; }
body[data-design="future-session"] .site-footer a:hover { color: var(--future-cobalt); }

@keyframes future-meter {
  from { transform: scaleY(0.55); filter: saturate(0.9); }
  to { transform: scaleY(1); filter: saturate(1.3); }
}

@keyframes future-wave {
  from { transform: translateY(-8px) rotate(4deg) scaleX(0.95); }
  to { transform: translateY(12px) rotate(-4deg) scaleX(1.03); }
}

@keyframes future-haze {
  from { transform: translate3d(-2%, -1%, 0) scale(0.96); }
  to { transform: translate3d(2%, 2%, 0) scale(1.04); }
}

@media (max-width: 1080px) {
  body[data-design="future-session"][data-page="home"] .hero {
    min-height: 960px;
    align-items: start;
  }

  body[data-design="future-session"] .hero-content { width: min(76%, 700px); }
  body[data-design="future-session"] .studio-stage { left: 22%; top: 43%; }
  body[data-design="future-session"] #hero-fx { mask-image: linear-gradient(180deg, transparent 0 35%, #000 56%, #000 100%); }
  body[data-design="future-session"] .catalog-explore .section-head { grid-template-columns: 1fr; gap: 22px; }
  body[data-design="future-session"] .catalog-explore .section-head .sub { justify-self: start; }
  body[data-design="future-session"] .filter-bar { position: static; grid-template-columns: 1fr 1fr; }
  body[data-design="future-session"] .filter-bar input[type="search"] { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body[data-design="future-session"] .site-header { inset: 8px 0 auto; }
  body[data-design="future-session"] .header-inner { width: calc(100% - 16px); min-height: 58px; height: auto; padding: 8px 14px; border-radius: 18px; }
  body[data-design="future-session"] nav a { display: none; }
  body[data-design="future-session"] nav::after {
    content: "MENU";
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--future-cobalt);
    background: rgba(199,181,255,0.38);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  body[data-design="future-session"][data-page="home"] .hero {
    width: calc(100% - 12px);
    min-height: 1000px;
    margin-top: 6px;
    padding: 112px 22px 58px;
    border-radius: 26px;
  }

  body[data-design="future-session"] .hero-content { width: 100%; }
  body[data-design="future-session"] .hero h1 { max-width: 9.8ch; font-size: clamp(54px, 15.6vw, 78px); }
  body[data-design="future-session"] .lede { max-width: 44ch; }
  body[data-design="future-session"] .hero-cta { display: grid; }
  body[data-design="future-session"] .hero-cta .btn { width: 100%; text-align: center; }
  body[data-design="future-session"] .studio-stage { left: -8%; right: -8%; top: 52%; bottom: 0; transform: scale(0.82); transform-origin: 50% 100%; }
  body[data-design="future-session"] .studio-monitor { opacity: 0.54; }
  body[data-design="future-session"] .hero-wordmark { top: 47%; left: 0; font-size: 30vw; }

  body[data-design="future-session"] .catalog-explore { padding-top: 110px; }
  body[data-design="future-session"] .catalog-explore::before { width: 62vw; }
  body[data-design="future-session"] .filter-bar { grid-template-columns: 1fr; }
  body[data-design="future-session"] .filter-bar input[type="search"] { grid-column: auto; }
  body[data-design="future-session"] .catalog-explore .section-head h2 { font-size: clamp(54px, 18vw, 86px); }

  body[data-design="future-session"] .page-head {
    max-width: calc(100% - 12px);
    min-height: 500px;
    margin: 6px auto 52px;
    padding: 116px 22px 48px;
    border-radius: 26px;
  }

  body[data-design="future-session"] .page-head h1 { font-size: clamp(46px, 14vw, 72px); }
  body[data-design="future-session"] .page-head::before { right: -30%; top: -3%; width: 310px; opacity: 0.7; }
  body[data-design="future-session"] .page-head::after { right: 11%; top: 27%; width: 58px; height: 58px; }
  body[data-design="future-session"] .player-bar { left: 6px; right: 6px; bottom: 6px; }
  body[data-design="future-session"] .cta-band { margin-block: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design="future-session"] .studio-haze,
  body[data-design="future-session"] .future-wave,
  body[data-design="future-session"] .meter-bank i { animation: none; }
  body[data-design="future-session"] .btn { transition: none; }
}