:root {
  --bg: #050509;
  --bg-soft: #090a12;
  --panel: rgba(13, 14, 25, 0.88);
  --panel-2: rgba(9, 14, 22, 0.9);
  --line: rgba(174, 89, 255, 0.22);
  --line-cyan: rgba(39, 217, 255, 0.35);
  --text: #f7f4ff;
  --muted: #aaa7b5;
  --purple: #a54dff;
  --purple-2: #d9a8ff;
  --cyan: #25d7ff;
  --header-height: 92px;
  --container: 1440px;
  --radius: 24px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 74% 12%, rgba(9, 112, 137, 0.14), transparent 27rem),
    radial-gradient(circle at 26% 18%, rgba(126, 43, 178, 0.19), transparent 32rem),
    var(--bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.site-glow {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  filter: blur(90px);
  opacity: .28;
}

.site-glow--top {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  left: 34%;
  top: -210px;
  background: var(--purple);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  padding: 14px clamp(22px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 28px;
  background: rgba(4, 4, 9, .88);
  border-bottom: 1px solid rgba(153, 76, 255, .13);
  backdrop-filter: blur(22px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: 0 0 64px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(165, 77, 255, .30)) drop-shadow(0 0 26px rgba(37, 215, 255, .22));
}

.brand-copy {
  display: grid;
  gap: 5px;
}

.brand-copy strong {
  font-size: 20px;
  letter-spacing: .01em;
  background: linear-gradient(90deg, #d995ff, #9b56ff 60%, #31cfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-copy small {
  color: #b7b1c3;
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 700;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 42px;
  color: #aaa6b2;
  font-size: 15px;
  font-weight: 600;
}

.main-nav a {
  transition: color .2s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: #fff;
}

.header-cta { justify-self: end; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
}

.button {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: linear-gradient(135deg, #ad4cff, #7337ed);
  box-shadow: 0 14px 34px rgba(134, 55, 237, .25);
}

.button--primary:hover {
  box-shadow: 0 18px 42px rgba(134, 55, 237, .4);
}

.button--secondary,
.button--outline {
  background: rgba(12, 13, 22, .5);
  border-color: rgba(169, 89, 255, .35);
}

.button--secondary:hover,
.button--outline:hover {
  border-color: rgba(37, 215, 255, .55);
}

.button--large {
  min-height: 58px;
  padding-inline: 30px;
}

.play-icon { color: #fff; font-size: 13px; }

.section-anchor {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

.hero {
  width: min(var(--container), calc(100% - 64px));
  min-height: calc(100svh - var(--header-height));
  margin: 0 auto;
  padding: clamp(58px, 7vw, 110px) 0;
  display: grid;
  grid-template-columns: .98fr 1.12fr;
  gap: clamp(46px, 6vw, 90px);
  align-items: center;
}

.hero-copy { max-width: 650px; }

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 20px;
  border: 1px solid rgba(169, 83, 255, .38);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(113, 46, 159, .18), rgba(21, 146, 171, .14));
  color: #b98bff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  box-shadow: 0 0 25px rgba(148, 64, 231, .15);
}

.hero h1 {
  margin: 35px 0 26px;
  font-size: clamp(52px, 5.6vw, 88px);
  line-height: .99;
  letter-spacing: -.055em;
  font-weight: 900;
  background-image: linear-gradient(
    90deg,
    #f0a0ff 0%,
    #d96cff 24%,
    #b257f7 48%,
    #805cf4 68%,
    #596bf1 84%,
    #3f82ee 100%
  );
  background-size: 100% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-lead {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.75;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.hero-trust {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: #8d8997;
  font-size: 13px;
}

.hero-trust span::before {
  content: "•";
  margin-right: 8px;
  color: var(--cyan);
}

.hero-media {
  position: relative;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 12% 0 0;
  background: radial-gradient(circle, rgba(38, 219, 255, .2), rgba(150, 65, 255, .13) 38%, transparent 70%);
  filter: blur(40px);
}

.media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(179, 87, 255, .38);
  border-radius: 22px;
  background: #06070d;
  box-shadow:
    0 40px 80px rgba(0,0,0,.55),
    0 0 46px rgba(89, 52, 176, .14);
  transform: perspective(1200px) rotateY(-1deg);
}

.media-frame img {
  width: 100%;
  height: auto;
}

.media-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 58%);
  transform: translateX(-120%);
  animation: shine 8s ease-in-out infinite 2s;
}

@keyframes shine {
  0%, 55% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}

.section {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(82px, 9vw, 140px) 0;
}

.section-heading {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-heading .section-kicker {
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.045em;
  background: linear-gradient(110deg, #f0d4ff, #c479ff 68%, #43d8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-heading p {
  margin: 26px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.7;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}

.step-card,
.feature-card,
.audience-card,
.price-card {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(19, 14, 27, .92), rgba(7, 13, 20, .94));
  border-radius: var(--radius);
}

.step-card {
  min-height: 275px;
  padding: 34px 28px;
}

.step-card:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -23px;
  top: 47%;
  color: rgba(167, 73, 255, .55);
  font-size: 35px;
  z-index: 2;
}

.step-card.featured,
.feature-card.featured,
.audience-card.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, #a849ff, #2dd5ff) border-box;
  box-shadow: 0 28px 60px rgba(100, 44, 177, .24);
}

.step-number {
  display: block;
  margin-bottom: 28px;
  color: #9258ff;
  font-size: 51px;
  font-weight: 900;
  letter-spacing: -.05em;
}

.step-card h3,
.feature-card h3,
.audience-card h3,
.price-card h3 {
  margin: 0 0 16px;
  font-size: 23px;
}

.step-card p,
.feature-card p,
.price-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  min-height: 260px;
  padding: 34px 30px;
}

.feature-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #c05aff;
  background: linear-gradient(135deg, rgba(132, 56, 197, .28), rgba(25, 97, 130, .25));
  font-size: 31px;
  box-shadow: inset 0 0 20px rgba(95, 44, 155, .15);
}

.compatibility-bar {
  margin-top: 38px;
  padding: 26px 34px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(127, 80, 185, .22);
  border-radius: 18px;
  color: #aaa8b2;
  background: rgba(7, 11, 18, .72);
}

.compatibility-bar span::first-letter {
  color: var(--cyan);
}

.app-action {
  padding-top: 95px;
}

.app-showcase {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  padding: 24px;
  border: 1px solid rgba(149, 72, 229, .24);
  border-radius: 28px;
  background: rgba(7, 8, 15, .88);
  box-shadow: 0 40px 85px rgba(0,0,0,.32);
}

.app-tabs {
  display: grid;
  align-content: center;
  gap: 10px;
}

.app-tab {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #aaa7b3;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}

.app-tab span {
  color: #7d5de9;
  font-size: 12px;
}

.app-tab:hover,
.app-tab.active {
  color: #fff;
  border-color: rgba(162, 72, 255, .35);
  background: linear-gradient(90deg, rgba(141, 56, 214, .2), rgba(27, 117, 140, .1));
}

.app-preview {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(50, 184, 220, .28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 25%, rgba(102, 53, 157, .23), transparent 38%),
    #080911;
}

.app-preview > img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
}

.placeholder-preview {
  min-height: 540px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  color: #aaa7b4;
  background:
    linear-gradient(rgba(6, 7, 13, .45), rgba(6, 7, 13, .45)),
    repeating-linear-gradient(90deg, transparent 0 69px, rgba(122, 77, 179, .05) 70px),
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(47, 190, 215, .04) 50px);
}

.placeholder-icon {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: var(--purple);
  background: rgba(124, 48, 188, .14);
  font-size: 42px;
}

.placeholder-preview strong {
  color: #fff;
  font-size: 28px;
}

.placeholder-preview p { margin: 0; }

.preview-caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(180px, .6fr) 1.4fr;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(184, 108, 255, .25);
  border-radius: 14px;
  background: rgba(4, 5, 10, .84);
  backdrop-filter: blur(14px);
}

.preview-caption span {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
}

.preview-caption h3 {
  margin: 6px 0 0;
  font-size: 22px;
}

.preview-caption p {
  margin: 0;
  color: #aaa7b2;
  line-height: 1.55;
}

.workflow-strip {
  min-height: 180px;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: rgba(226, 205, 244, .32);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  white-space: nowrap;
  border-block: 1px solid rgba(132, 66, 192, .16);
  background: linear-gradient(90deg, rgba(54, 10, 65, .16), rgba(9, 30, 43, .28));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.workflow-track {
  width: max-content;
  display: flex;
  flex: 0 0 auto;
  animation: workflow-marquee 38s linear infinite;
  will-change: transform;
}

.workflow-group {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 30px clamp(40px, 5vw, 90px) 30px 0;
  display: flex;
  align-items: center;
  gap: clamp(26px, 3.2vw, 58px);
}

.workflow-strip i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: rgba(177, 70, 255, .62);
  box-shadow: 0 0 14px rgba(177, 70, 255, .28);
}

.workflow-strip:hover .workflow-track {
  animation-play-state: paused;
}

@keyframes workflow-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
}

.audience-card {
  min-height: 420px;
  padding: 46px;
}

.audience-icon {
  margin-bottom: 26px;
  color: #ad52ff;
  font-size: 53px;
}

.audience-card h3 {
  margin-bottom: 32px;
  font-size: 29px;
}

.audience-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  list-style: none;
  color: #aaa8b2;
}

.audience-card li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  line-height: 1.45;
}

.audience-card li::before {
  content: "›";
  color: var(--cyan);
  font-size: 24px;
  line-height: .75;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}

.price-card {
  min-height: 390px;
  padding: 42px;
  display: flex;
  flex-direction: column;
}

.price-card h3 {
  font-size: 31px;
}

.price-card strong {
  margin: 40px 0 auto;
  display: block;
  font-size: clamp(33px, 3vw, 47px);
  background: linear-gradient(100deg, #a954ff, #4fa5ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-card .button {
  width: 100%;
  margin-top: 42px;
}

.price-card--featured {
  border-color: #a64fff;
  transform: translateY(-14px);
  box-shadow: 0 32px 70px rgba(117, 43, 193, .3);
}

.popular-badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 155px;
  padding: 10px 18px;
  border-radius: 99px;
  background: linear-gradient(90deg, #a55aff, #28c8ef);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.final-cta {
  padding: clamp(90px, 10vw, 150px) 32px;
  border-top: 1px solid rgba(135, 61, 194, .15);
  background:
    radial-gradient(circle at 50% 50%, rgba(133, 52, 197, .28), transparent 31rem),
    radial-gradient(circle at 72% 56%, rgba(24, 107, 128, .19), transparent 27rem);
}

.final-cta-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.final-cta h2 {
  margin: 0;
  font-size: clamp(50px, 6vw, 86px);
  line-height: 1.05;
  letter-spacing: -.05em;
  background: linear-gradient(100deg, #fae8ff, #d099ff, #9c56f0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.final-cta p {
  max-width: 700px;
  margin: 28px auto 36px;
  color: #aaa7b2;
  font-size: 18px;
  line-height: 1.65;
}

.site-footer {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  padding: 56px 0 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  color: #9996a3;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-weight: 700;
}

.brand-mark--small {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.site-footer nav {
  display: flex;
  gap: 38px;
}

.site-footer nav a:hover { color: #fff; }

.site-footer > p {
  grid-column: 1 / -1;
  margin: 30px 0 0;
  padding-top: 30px;
  text-align: center;
  border-top: 1px solid rgba(138, 73, 191, .14);
  font-size: 13px;
}

.signup-dialog {
  width: min(600px, calc(100% - 34px));
  border: 1px solid rgba(168, 77, 255, .5);
  border-radius: 24px;
  padding: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 25% 0, rgba(130, 48, 190, .28), transparent 22rem),
    #090a12;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}

.signup-dialog::backdrop {
  background: rgba(1, 1, 5, .75);
  backdrop-filter: blur(8px);
}

.signup-dialog h2 {
  margin: 20px 0 14px;
  font-size: 34px;
}

.signup-dialog > p,
.form-message {
  color: #aaa8b2;
  line-height: 1.6;
}

.dialog-close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

.signup-dialog label {
  display: block;
  margin: 26px 0 10px;
  color: #d9d5e1;
  font-size: 13px;
  font-weight: 700;
}

.signup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.signup-row input {
  min-width: 0;
  height: 50px;
  border: 1px solid rgba(168, 78, 255, .36);
  border-radius: 8px;
  padding: 0 15px;
  color: #fff;
  background: rgba(3, 4, 8, .72);
  outline: none;
}

.signup-row input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(37, 215, 255, .1);
}

.form-message { min-height: 24px; margin-bottom: 0; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal--delay { transition-delay: .12s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1150px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    padding: 28px;
    flex-direction: column;
    background: rgba(5,5,10,.97);
    border-bottom: 1px solid rgba(151, 77, 221, .18);
  }

  .main-nav.open { display: flex; }
  .nav-toggle { display: block; justify-self: end; }
  .header-cta { display: none; }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy { max-width: 820px; }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-card:not(:last-child)::after { display: none; }
  .steps-grid .step-card:last-child { grid-column: 1 / -1; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .app-showcase { grid-template-columns: 1fr; }

  .app-tabs {
    grid-template-columns: repeat(5, minmax(145px, 1fr));
    overflow-x: auto;
  }

  .app-tab { white-space: nowrap; }
}

@media (max-width: 780px) {
  :root { --header-height: 78px; }

  .site-header,
  .hero,
  .section,
  .site-footer {
    width: 100%;
  }

  .site-header { padding: 12px 20px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { font-size: 8px; }

  .hero {
    padding: 58px 22px 80px;
    gap: 42px;
  }

  .hero h1 {
    margin-top: 28px;
    font-size: clamp(46px, 14vw, 68px);
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button { width: 100%; }

  .section {
    padding: 76px 22px;
  }

  .section-heading {
    margin-bottom: 40px;
  }

  .steps-grid,
  .features-grid,
  .audience-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid .step-card:last-child { grid-column: auto; }
  .step-card,
  .feature-card { min-height: auto; }

  .compatibility-bar {
    flex-direction: column;
    padding: 24px;
  }

  .app-showcase {
    padding: 12px;
  }

  .app-tabs {
    grid-template-columns: repeat(5, 160px);
  }

  .app-preview,
  .app-preview > img,
  .placeholder-preview {
    min-height: 410px;
  }

  .preview-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .preview-caption p {
    display: none;
  }

  .workflow-strip {
    min-height: 132px;
    font-size: 25px;
  }

  .workflow-track {
    animation-duration: 30s;
  }

  .audience-card,
  .price-card {
    min-height: auto;
    padding: 32px 26px;
  }

  .price-card--featured {
    transform: none;
  }

  .site-footer {
    padding: 44px 22px 30px;
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    flex-direction: column;
    gap: 14px;
  }

  .signup-row {
    grid-template-columns: 1fr;
  }

  .signup-dialog {
    padding: 32px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .workflow-track { animation: none !important; }
  .workflow-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.hero-overview {
  width: min(var(--container), calc(100% - 64px));
  margin: -8px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.overview-card {
  min-height: 190px;
  padding: 28px 28px 24px;
  border: 1px solid rgba(158, 82, 255, .18);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(12, 11, 20, .92), rgba(8, 14, 22, .92));
  box-shadow: 0 26px 50px rgba(0, 0, 0, .22);
}

.overview-card span {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.overview-card strong {
  display: block;
  margin-bottom: 12px;
  font-size: 24px;
}

.overview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.overview-card--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, #a849ff, #2dd5ff) border-box;
  box-shadow: 0 28px 60px rgba(100, 44, 177, .24);
}

.media-frame--hero img {
  width: 100%;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}

@media (max-width: 1150px) {
  .hero-overview {
    grid-template-columns: 1fr;
    width: min(var(--container), calc(100% - 64px));
  }

  .app-tabs {
    grid-template-columns: repeat(8, minmax(150px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 780px) {
  .hero-overview {
    width: 100%;
    padding: 0 22px;
    gap: 18px;
  }

  .overview-card {
    min-height: auto;
    padding: 24px 22px;
  }

  .app-tabs {
    grid-template-columns: repeat(8, 170px);
  }
}

/* V4 — studio hero and compact upper landing section */
.main-nav { gap: 30px; }

.hero--studio {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: min(790px, calc(100svh - var(--header-height)));
  margin: 0;
  padding: clamp(62px, 6vw, 92px) max(32px, calc((100vw - var(--container)) / 2));
  display: grid;
  grid-template-columns: minmax(430px, .85fr) minmax(560px, 1.35fr);
  grid-template-rows: 1fr auto;
  gap: 32px 42px;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(158, 73, 229, .18);
  background:
    radial-gradient(circle at 15% 35%, rgba(135, 48, 195, .14), transparent 29rem),
    #040409;
}

.hero-studio-image {
  position: absolute;
  z-index: -3;
  top: 34px;
  right: max(0px, calc((100vw - 1700px) / 2));
  bottom: 30px;
  width: min(72vw, 1220px);
  display: grid;
  place-items: center;
  opacity: .98;
}

.hero-studio-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  filter: saturate(.94) contrast(1.03) brightness(.84);
}

.hero-studio-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, #040409 0%, rgba(4, 4, 9, .98) 25%, rgba(4, 4, 9, .76) 39%, rgba(4, 4, 9, .13) 62%, rgba(4, 4, 9, .08) 82%, rgba(4, 4, 9, .4) 100%),
    linear-gradient(180deg, rgba(4, 4, 9, .36), transparent 30%, transparent 72%, rgba(4, 4, 9, .8));
}

.hero-copy--studio {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  max-width: 610px;
  align-self: center;
}

.hero--studio h1 {
  margin: 28px 0 24px;
  max-width: 640px;
  font-size: clamp(50px, 4.35vw, 74px);
  line-height: 1.015;
  display: block;
}


.hero--studio .hero-lead {
  max-width: 575px;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.68;
  color: #b5b1bd;
}

.hero--studio .hero-actions { margin-top: 31px; }

.hero-benefits {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  width: min(720px, 100%);
  padding-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  border-top: 1px solid rgba(172, 85, 255, .17);
}

.hero-benefits article {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: start;
}

.benefit-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(46, 210, 245, .38);
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(8, 20, 29, .68);
  box-shadow: 0 0 22px rgba(80, 86, 238, .16);
}

.hero-benefits strong,
.hero-benefits small { display: block; }
.hero-benefits strong { font-size: 13px; line-height: 1.35; }
.hero-benefits small { margin-top: 5px; color: #9894a2; font-size: 11px; line-height: 1.45; }

.how-compact {
  padding-top: clamp(68px, 6vw, 92px);
  padding-bottom: clamp(72px, 6vw, 98px);
}

.section-heading--compact { margin-bottom: 36px; }
.section-heading--compact h2 { font-size: clamp(40px, 4vw, 60px); }
.section-heading--compact p { margin-top: 17px; }

.steps-grid--compact { gap: 24px; }

.step-card--compact {
  min-height: 218px;
  padding: 24px 24px 25px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr;
  align-content: start;
}

.step-card--compact .step-number {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0;
  color: #d4adff;
}

.step-symbol {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #9e58ff;
  background: linear-gradient(145deg, rgba(132, 51, 195, .25), rgba(28, 106, 132, .22));
  font-size: 28px;
}

.step-card--compact h3 {
  grid-column: 1 / -1;
  margin: 24px 0 10px;
  font-size: 18px;
}

.step-card--compact p {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.55;
}

.app-action { padding-top: clamp(76px, 7vw, 110px); }

.app-tabs {
  grid-template-columns: 1fr;
  max-height: 590px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(165, 77, 255, .55) transparent;
}

.app-preview {
  min-height: 620px;
}

.app-preview > img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  padding: 8px;
  object-fit: contain;
  background: #020307;
  transition: opacity .16s ease, transform .16s ease;
}

.app-preview > img.is-changing {
  opacity: .35;
  transform: scale(.995);
}

@media (max-width: 1260px) {
  .hero--studio {
    grid-template-columns: minmax(390px, .9fr) minmax(450px, 1.1fr);
  }
  .hero-studio-image { width: 76vw; opacity: .8; }
  .hero-studio-overlay {
    background:
      linear-gradient(90deg, #040409 0%, rgba(4,4,9,.98) 32%, rgba(4,4,9,.72) 49%, rgba(4,4,9,.18) 75%, rgba(4,4,9,.4) 100%),
      linear-gradient(180deg, rgba(4,4,9,.3), transparent 35%, rgba(4,4,9,.75));
  }
}

@media (max-width: 980px) {
  .hero--studio {
    min-height: auto;
    padding: 58px 24px 50px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 34px;
  }
  .hero-studio-image {
    position: relative;
    z-index: 0;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    opacity: 1;
  }
  .hero-studio-image img { height: auto; object-fit: contain; }
  .hero-studio-overlay {
    background: linear-gradient(180deg, rgba(4,4,9,.08), transparent 50%, rgba(4,4,9,.55));
  }
  .hero-copy--studio { grid-column: 1; grid-row: 1; max-width: 760px; }
  .hero-benefits { grid-column: 1; grid-row: 3; width: 100%; }
  .steps-grid--compact { grid-template-columns: repeat(2, 1fr); }
  .steps-grid--compact .step-card:last-child { grid-column: 1 / -1; }
  .app-tabs {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 650px) {
  .hero--studio h1 { font-size: clamp(43px, 13vw, 59px); }
  .hero-benefits { grid-template-columns: 1fr; gap: 14px; }
  .hero-benefits article { grid-template-columns: 40px 1fr; }
  .steps-grid--compact { grid-template-columns: 1fr; }
  .steps-grid--compact .step-card:last-child { grid-column: auto; }
  .app-preview, .app-preview > img { min-height: 420px; }
}


/* V5 — app-matched purple/blue gradients and verified 8-screen gallery */
:root {
  --purple: #b54cff;
  --purple-2: #f1a2ef;
  --cyan: #25d8ff;
  --line: rgba(171, 72, 255, .26);
  --line-cyan: rgba(37, 216, 255, .42);
}

body {
  background:
    radial-gradient(circle at 82% 10%, rgba(32, 83, 185, .16), transparent 29rem),
    radial-gradient(circle at 24% 15%, rgba(178, 52, 224, .18), transparent 31rem),
    radial-gradient(circle at 70% 64%, rgba(34, 181, 233, .075), transparent 30rem),
    var(--bg);
}

.brand-copy strong,
.hero h1,
.section-heading h2,
.price-card strong,
.final-cta h2 {
  background: linear-gradient(105deg, #f2a9ef 0%, #c960ff 35%, #8057ff 64%, #28d6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.button--primary {
  background: linear-gradient(120deg, #b546ff 0%, #814cff 50%, #238fe9 100%);
  box-shadow: 0 14px 36px rgba(111, 62, 238, .30), 0 0 24px rgba(37, 216, 255, .10);
}

.button--primary:hover {
  box-shadow: 0 18px 44px rgba(125, 65, 243, .43), 0 0 30px rgba(37, 216, 255, .16);
}

.eyebrow,
.section-kicker {
  border-color: rgba(172, 75, 255, .50);
  background: linear-gradient(90deg, rgba(168, 59, 219, .20), rgba(32, 152, 217, .16));
  color: #d79cff;
  box-shadow: 0 0 24px rgba(141, 70, 230, .15), inset 0 0 20px rgba(45, 191, 238, .035);
}

.step-number,
.step-card--compact .step-number,
.app-tab span {
  color: #aa70ff;
}

.step-symbol,
.feature-icon {
  color: #bc54ff;
  background: linear-gradient(145deg, rgba(174, 66, 232, .27), rgba(31, 145, 208, .23));
}

.featured,
.price-card--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, #c24fff 0%, #705dff 53%, #25d8ff 100%) border-box;
}

.app-showcase {
  border-color: transparent;
  background:
    linear-gradient(rgba(7, 8, 15, .96), rgba(7, 8, 15, .96)) padding-box,
    linear-gradient(135deg, rgba(183, 72, 255, .54), rgba(98, 85, 255, .28) 54%, rgba(37, 216, 255, .48)) border-box;
  box-shadow: 0 36px 82px rgba(0, 0, 0, .43), 0 0 46px rgba(114, 58, 211, .10);
}

.app-tab {
  min-height: 62px;
}

.app-tab:hover,
.app-tab.active {
  color: #fff;
  border-color: #31cfff;
  background: linear-gradient(90deg, rgba(174, 61, 237, .28), rgba(100, 77, 246, .18) 55%, rgba(31, 175, 225, .16));
  box-shadow: inset 0 0 22px rgba(121, 63, 220, .14), 0 0 18px rgba(35, 189, 235, .10);
}

.app-tab.active span {
  color: #32d8ff;
}

.app-preview {
  border-color: transparent;
  background:
    linear-gradient(#020307, #020307) padding-box,
    linear-gradient(135deg, #b34eff, #655eff 55%, #25d8ff) border-box;
  box-shadow: 0 24px 58px rgba(0,0,0,.35), inset 0 0 42px rgba(49, 102, 210, .035);
}

.preview-caption {
  border-color: rgba(175, 81, 255, .42);
  box-shadow: 0 12px 35px rgba(0,0,0,.28), 0 0 25px rgba(96, 61, 201, .09);
}

.preview-caption span {
  color: #29d7ff;
}

.popular-badge {
  background: linear-gradient(90deg, #b94cff, #7555ff 55%, #25cffa);
}

@media (max-width: 980px) {
  .app-tabs {
    grid-template-columns: repeat(8, minmax(150px, 1fr));
  }
}


/* V7: one continuous left-to-right gradient across the complete multiline hero heading. */
.hero--studio h1 {
  display: block;
  width: 100%;
  max-width: 640px;
  background-image: linear-gradient(
    90deg,
    #f0a0ff 0%,
    #d96cff 26%,
    #b257f7 49%,
    #815cf4 70%,
    #596bf1 86%,
    #3f82ee 100%
  );
  background-size: 100% 100%;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}

/* V8 — keep the App Screens menu and screenshot next to each other on laptop/tablet widths. */
.app-showcase {
  display: grid;
  grid-template-columns: clamp(180px, 21vw, 270px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2.2vw, 30px);
  width: 100%;
}

.app-tabs {
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  max-height: none;
  overflow: visible;
  align-content: start;
}

.app-tab {
  width: 100%;
  min-width: 0;
  white-space: normal;
}

.app-preview {
  width: 100%;
  min-width: 0;
}

.app-preview > img {
  width: 100%;
  max-width: 100%;
}

/* Only genuinely narrow phone screens stack the controls above the screenshot. */
@media (max-width: 720px) {
  .app-showcase {
    grid-template-columns: 1fr;
  }

  .app-tabs {
    grid-template-columns: repeat(8, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .app-tab {
    white-space: nowrap;
  }
}

/* V9 — definitive App Screens layout fix.
   The tabs and screenshot remain next to each other at every viewport width. */
.app-showcase {
  display: grid !important;
  grid-template-columns: clamp(128px, 21vw, 270px) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-auto-flow: column !important;
  align-items: start !important;
  gap: clamp(12px, 2vw, 30px) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.app-showcase > .app-tabs {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.app-showcase > .app-preview {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: start !important;
}

.app-showcase > .app-preview > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
}

@media (max-width: 720px) {
  .app-showcase {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .app-showcase > .app-tabs {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .app-showcase .app-tab {
    min-height: 48px !important;
    padding: 10px 9px !important;
    gap: 7px !important;
    white-space: normal !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .app-showcase .app-tab span {
    font-size: 9px !important;
  }

  .app-showcase .preview-caption {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    padding: 9px 10px !important;
  }

  .app-showcase .preview-caption h3 {
    margin-top: 3px !important;
    font-size: 13px !important;
  }

  .app-showcase .preview-caption p {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .app-showcase {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .app-showcase .app-tab {
    min-height: 43px !important;
    padding: 8px 7px !important;
    font-size: 10px !important;
  }
}



/* V10 — adaptive App Screens menu.
   The left tab list follows the screenshot height and shrinks with the preview. */
.app-showcase {
  container-type: inline-size;
  align-items: stretch !important;
}

.app-showcase > .app-tabs {
  contain: size layout;
  align-self: stretch !important;
  height: var(--app-preview-height, 100%) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
  gap: clamp(2px, 0.55cqw, 10px) !important;
  overflow: hidden !important;
}

.app-showcase .app-tab {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(4px, 1.05cqw, 18px) clamp(5px, 1.25cqw, 20px) !important;
  gap: clamp(4px, 0.8cqw, 14px) !important;
  border-radius: clamp(8px, 1.1cqw, 14px) !important;
  font-size: clamp(9px, 1.18cqw, 15px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: hidden !important;
}

.app-showcase .app-tab span {
  flex: 0 0 auto;
  font-size: clamp(8px, 0.82cqw, 12px) !important;
}

.app-showcase > .app-preview {
  align-self: start !important;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  height: auto !important;
}

.app-showcase > .app-preview > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
}

@container (max-width: 860px) {
  .app-showcase {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .app-showcase .app-tab {
    padding: 5px 8px !important;
    gap: 6px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
  }

  .app-showcase .app-tab span {
    font-size: 8px !important;
  }
}

@container (max-width: 650px) {
  .app-showcase {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .app-showcase .app-tab {
    padding: 3px 5px !important;
    gap: 4px !important;
    font-size: 9px !important;
    border-radius: 7px !important;
  }

  .app-showcase .app-tab span {
    font-size: 7px !important;
  }

  .app-showcase .preview-caption {
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    padding: 7px 8px !important;
  }

  .app-showcase .preview-caption h3 {
    font-size: 12px !important;
  }

  .app-showcase .preview-caption p {
    display: none !important;
  }
}

@container (max-width: 500px) {
  .app-showcase {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .app-showcase .app-tab {
    padding: 2px 4px !important;
    font-size: 8px !important;
  }

  .app-showcase .app-tab span {
    font-size: 6px !important;
  }
}

/* =========================
   V11 — expanded content based on approved layout.
   Hero and See the App in Action remain unchanged.
   ========================= */

.steps-grid--seven {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

.steps-grid--seven .step-card {
  min-height: 238px;
  padding: 24px 18px;
}

.steps-grid--seven .step-card:not(:last-child)::after {
  right: -11px;
  font-size: 24px;
}

.steps-grid--seven .step-number {
  margin-bottom: 14px;
  font-size: 32px;
}

.steps-grid--seven .step-symbol {
  margin-bottom: 16px;
  display: block;
  color: var(--cyan);
  font-size: 35px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(37, 215, 255, .24);
}

.steps-grid--seven h3 {
  font-size: 17px;
  line-height: 1.25;
}

.steps-grid--seven p {
  font-size: 13px;
  line-height: 1.55;
}

.features-grid--expanded {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.feature-card--detailed {
  min-height: 310px;
  padding: 28px 24px 24px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
}

.feature-card--detailed .feature-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  font-size: 30px;
}

.feature-card--detailed h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.feature-card--detailed p {
  font-size: 14px;
}

.feature-points {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  color: #aaa8b2;
  font-size: 13px;
}

.feature-points li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
}

.feature-points li::before {
  content: '✓';
  color: var(--cyan);
}

.product-proof-bar,
.pricing-notes {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.product-proof-bar span,
.pricing-notes span {
  min-height: 36px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(69, 151, 209, .22);
  border-radius: 8px;
  color: #aaa8b2;
  background: rgba(7, 11, 18, .78);
  font-size: 12px;
}

.product-proof-bar span::first-letter,
.pricing-notes span::first-letter {
  color: var(--cyan);
}

.audience-grid--premium {
  gap: 24px;
}

.audience-grid--premium .audience-card {
  min-height: 330px;
  padding: 34px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  overflow: hidden;
}

.audience-card--beginner {
  background:
    radial-gradient(circle at 12% 52%, rgba(159, 71, 255, .25), transparent 17rem),
    linear-gradient(145deg, rgba(27, 14, 40, .94), rgba(9, 11, 20, .96));
}

.audience-card--pro {
  background:
    radial-gradient(circle at 92% 52%, rgba(24, 162, 210, .2), transparent 18rem),
    linear-gradient(145deg, rgba(11, 20, 32, .96), rgba(7, 17, 26, .96));
}

.audience-side-icon {
  width: 110px;
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(173, 77, 255, .38);
  border-radius: 20px;
  color: #cf79ff;
  background: linear-gradient(145deg, rgba(126, 42, 191, .5), rgba(65, 24, 105, .3));
  font-size: 58px;
  box-shadow: 0 20px 50px rgba(101, 33, 165, .25);
}

.audience-card--pro .audience-side-icon {
  color: var(--cyan);
  border-color: rgba(37, 215, 255, .38);
  background: linear-gradient(145deg, rgba(15, 137, 172, .45), rgba(16, 68, 95, .28));
  box-shadow: 0 20px 50px rgba(20, 118, 153, .22);
}

.audience-content h3 {
  margin-bottom: 12px;
}

.audience-content > p {
  margin: 0 0 20px;
  color: #aaa8b2;
  line-height: 1.65;
}

.audience-content ul {
  gap: 10px;
}

.pricing-grid--premium .price-card {
  min-height: 360px;
}

.pricing-grid--premium .price-card strong {
  margin: 12px 0 18px;
  font-size: 20px;
  color: #d9d4e5;
  background: none;
  -webkit-text-fill-color: initial;
}

.pricing-grid--premium .price-card p {
  margin-bottom: auto;
}

.pricing-grid--premium .price-card .button {
  margin-top: 30px;
}

.final-cta--waveform {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(104, 74, 166, .22);
  border-radius: 22px;
  width: min(var(--container), calc(100% - 64px));
  margin: 30px auto 0;
  padding: 64px 32px;
  background:
    linear-gradient(90deg, rgba(50, 12, 68, .18), rgba(7, 14, 24, .82) 42%, rgba(8, 31, 48, .2));
}

.cta-wave {
  position: absolute;
  top: 50%;
  width: 43%;
  height: 170px;
  transform: translateY(-50%);
  opacity: .85;
}

.cta-wave--left { left: 0; }
.cta-wave--right { right: 0; }

.final-cta--waveform .final-cta-inner {
  position: relative;
  z-index: 2;
}

.final-cta--waveform h2 {
  font-size: clamp(38px, 4.5vw, 65px);
}

@media (max-width: 1280px) {
  .steps-grid--seven {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps-grid--seven .step-card:nth-child(5),
  .steps-grid--seven .step-card:nth-child(6),
  .steps-grid--seven .step-card:nth-child(7) {
    min-height: 210px;
  }

  .features-grid--expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .steps-grid--seven,
  .features-grid--expanded {
    grid-template-columns: 1fr;
  }

  .steps-grid--seven .step-card {
    min-height: auto;
  }

  .audience-grid--premium .audience-card {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 25px 20px;
    gap: 18px;
  }

  .audience-side-icon {
    width: 78px;
    height: 112px;
    font-size: 40px;
  }

  .final-cta--waveform {
    width: calc(100% - 36px);
    padding: 56px 20px;
  }

  .cta-wave {
    width: 55%;
    opacity: .46;
  }
}

@media (max-width: 520px) {
  .audience-grid--premium .audience-card {
    grid-template-columns: 1fr;
  }

  .audience-side-icon {
    width: 72px;
    height: 72px;
  }

  .cta-wave {
    width: 75%;
    opacity: .3;
  }
}



/* =========================================================
   V12 — hero information and How It Works based on reference.
   Hero image and See the App in Action remain unchanged.
   ========================================================= */

.hero-copy--studio {
  max-width: 650px;
}

.hero-capabilities {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: min(650px, 100%);
}

.hero-capabilities > span {
  min-height: 49px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(91, 105, 181, .42);
  border-radius: 7px;
  color: #e9e5f1;
  background: linear-gradient(145deg, rgba(8, 11, 22, .86), rgba(8, 14, 22, .64));
  box-shadow: inset 0 0 18px rgba(64, 38, 121, .06);
}

.hero-capabilities svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: url("#capabilityGradient");
  stroke: #c05cff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(58, 205, 255, .20));
}

.hero-capabilities > span:nth-child(even) svg {
  stroke: #26d6ff;
}

.hero-capabilities strong {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
}

.hero--studio .hero-actions {
  margin-top: 17px;
}

.hero-benefits--reference {
  width: min(780px, 100%);
  padding-top: 21px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.hero-benefits--reference article {
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 8px;
}

.benefit-icon--plain {
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.benefit-icon--plain svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #b14cff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 5px rgba(179, 69, 255, .28))
    drop-shadow(0 0 6px rgba(31, 205, 255, .16));
}

.hero-benefits--reference article:nth-child(even) .benefit-icon--plain svg {
  stroke: #23cfff;
}

.hero-benefits--reference strong {
  font-size: 11px;
  line-height: 1.25;
}

.hero-benefits--reference small {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.35;
}

.how-compact {
  padding-top: 28px;
  padding-bottom: 66px;
  border-top: 1px solid rgba(124, 62, 191, .16);
}

.section-heading--compact {
  margin-bottom: 16px;
}

.section-heading--compact .section-kicker,
.section-heading--compact p {
  display: none;
}

.section-heading--compact h2 {
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #e8a9ff, #b45cff 55%, #36d6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.steps-grid--reference {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

.steps-grid--reference .step-card--reference {
  position: relative;
  min-height: 206px;
  padding: 16px 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 9px;
  border: 1px solid rgba(84, 88, 146, .35);
  background:
    radial-gradient(circle at 50% 0%, rgba(63, 45, 121, .15), transparent 48%),
    linear-gradient(150deg, rgba(13, 16, 31, .96), rgba(8, 13, 23, .96));
  box-shadow: inset 0 0 22px rgba(38, 43, 88, .08);
}

.steps-grid--reference .step-card--reference:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 42%;
  right: -15px;
  width: 16px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(122, 71, 214, .75) 0 3px,
    transparent 3px 6px
  );
}

.step-number--circle {
  position: absolute;
  top: 13px;
  left: 12px;
  width: 21px;
  height: 21px;
  margin: 0 !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(203, 115, 255, .58);
  border-radius: 50%;
  color: #e6c3ff !important;
  background: rgba(82, 42, 125, .18);
  font-size: 10px !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(166, 74, 255, .14);
}

.step-icon-reference {
  width: 58px;
  height: 58px;
  margin: 6px 0 12px;
  display: grid;
  place-items: center;
}

.step-icon-reference svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: #24cfff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 6px rgba(31, 203, 255, .25))
    drop-shadow(0 0 12px rgba(149, 70, 255, .18));
}

.step-card--reference:nth-child(2n) .step-icon-reference svg,
.step-card--reference:nth-child(3) .step-icon-reference svg {
  stroke: #9e55ff;
}

.steps-grid--reference .step-card--reference h3 {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
}

.steps-grid--reference .step-card--reference p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: #a9a5b2;
}

@media (max-width: 1280px) {
  .hero-capabilities {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
  }

  .steps-grid--reference {
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
}

@media (max-width: 980px) {
  .hero-capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-capabilities > span:nth-child(4),
  .hero-capabilities > span:nth-child(5) {
    min-width: 0;
  }

  .hero-benefits--reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }
}

@media (max-width: 620px) {
  .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-benefits--reference {
    grid-template-columns: 1fr;
  }
}


/* V13 — automatic slideshow progress in See the App in Action. */
.app-showcase .app-tab {
  position: relative;
  overflow: hidden;
}

.app-showcase .app-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #b64fff, #6c5fff 58%, #24ceff);
  box-shadow: 0 0 8px rgba(64, 196, 255, .38);
  opacity: 0;
}

.app-showcase.slideshow-tick .app-tab.active::after {
  opacity: 1;
  animation: appSlideProgress 3s linear forwards;
}

@keyframes appSlideProgress {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-showcase.slideshow-tick .app-tab.active::after {
    animation: none;
    width: 100%;
  }
}


/* V15 — screenshot and synchronized information panel as two separate blocks. */
.app-showcase > .app-preview {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  gap: clamp(10px, 1vw, 14px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.app-showcase .app-preview-image {
  position: relative; width:100%; min-width:0; overflow:hidden;
  border:1px solid rgba(47,211,255,.72); border-radius:20px;
  background:radial-gradient(circle at 50% 25%,rgba(102,53,157,.18),transparent 42%),#080911;
  box-shadow:0 0 0 1px rgba(158,69,255,.20),0 18px 42px rgba(0,0,0,.28);
}
.app-showcase .app-preview-image > img {
  display:block !important; width:100% !important; height:auto !important;
  min-height:0 !important; max-width:100% !important; aspect-ratio:16/9 !important;
  object-fit:contain !important; border-radius:19px;
  transition:opacity .22s ease, transform .22s ease;
}
.app-showcase .preview-caption {
  position:static !important; inset:auto !important; width:100% !important; min-width:0 !important;
  margin:0 !important; padding:clamp(14px,1.2vw,20px) clamp(16px,1.45vw,24px) !important;
  display:grid !important; grid-template-columns:minmax(190px,.52fr) minmax(0,1.48fr) !important;
  align-items:center !important; gap:clamp(18px,1.8vw,34px) !important;
  border:1px solid rgba(181,78,255,.62) !important; border-radius:18px !important;
  background:linear-gradient(110deg,rgba(10,8,20,.98),rgba(7,12,22,.98)) !important;
  backdrop-filter:none !important;
  box-shadow:inset 0 0 26px rgba(101,42,158,.06),0 12px 30px rgba(0,0,0,.22);
}
.app-showcase .preview-caption-title { min-width:0; }
.app-showcase .preview-caption span { display:block; color:#26d7ff; font-size:clamp(10px,.8vw,13px) !important; font-weight:800; letter-spacing:.16em; }
.app-showcase .preview-caption h3 { margin:7px 0 0 !important; color:#fff; font-size:clamp(20px,1.65vw,30px) !important; line-height:1.08; }
.app-showcase .preview-caption p { display:block !important; margin:0 !important; color:#aaa8b3; font-size:clamp(12px,1.02vw,17px) !important; line-height:1.55; }
.app-showcase > .app-tabs { align-self:stretch !important; height:var(--app-preview-height,auto) !important; }
@container (max-width:760px){
 .app-showcase .preview-caption{grid-template-columns:1fr !important;gap:9px !important;padding:11px 13px !important}
 .app-showcase .preview-caption h3{font-size:16px !important}
 .app-showcase .preview-caption p{display:block !important;font-size:10px !important;line-height:1.4}
}
@container (max-width:520px){
 .app-showcase > .app-preview{gap:7px !important}
 .app-showcase .app-preview-image,.app-showcase .app-preview-image > img{border-radius:12px !important}
 .app-showcase .preview-caption{border-radius:12px !important;padding:8px 9px !important;gap:5px !important}
 .app-showcase .preview-caption span{font-size:7px !important}
 .app-showcase .preview-caption h3{margin-top:3px !important;font-size:12px !important}
 .app-showcase .preview-caption p{font-size:8px !important}
}


/* V16 — move and slightly compress the desktop Hero studio image.
   This keeps the neon sign away from the headline without changing mobile layout. */
@media (min-width: 981px) {
  .hero-studio-image {
    width: min(66vw, 1120px) !important;
    right: max(-18px, calc((100vw - 1700px) / 2)) !important;
    transform: translateX(34px) scale(.97) !important;
    transform-origin: right center !important;
  }

  .hero-studio-image img {
    object-position: right center !important;
  }

  .hero-studio-overlay {
    background:
      linear-gradient(
        90deg,
        #040409 0%,
        rgba(4, 4, 9, .995) 30%,
        rgba(4, 4, 9, .90) 42%,
        rgba(4, 4, 9, .48) 54%,
        rgba(4, 4, 9, .10) 70%,
        rgba(4, 4, 9, .08) 84%,
        rgba(4, 4, 9, .40) 100%
      ),
      linear-gradient(
        180deg,
        rgba(4, 4, 9, .36),
        transparent 30%,
        transparent 72%,
        rgba(4, 4, 9, .80)
      ) !important;
  }
}

@media (min-width: 981px) and (max-width: 1260px) {
  .hero-studio-image {
    width: 69vw !important;
    transform: translateX(28px) scale(.96) !important;
  }
}


/* V17 — crop the left neon-sign area from the desktop Hero image.
   The app monitor remains visible on the right, while no image content sits under the headline. */
@media (min-width: 981px) {
  .hero-studio-image {
    left: 40.5% !important;
    right: 0 !important;
    width: auto !important;
    top: 28px !important;
    bottom: 24px !important;
    overflow: hidden !important;
    transform: none !important;
    place-items: stretch !important;
  }

  .hero-studio-image img {
    width: 116% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 78% center !important;
    transform: translateX(-2%) !important;
    clip-path: inset(0 0 0 13%) !important;
  }

  .hero-studio-overlay {
    background:
      linear-gradient(
        90deg,
        #040409 0%,
        #040409 34%,
        rgba(4, 4, 9, .995) 39%,
        rgba(4, 4, 9, .94) 44%,
        rgba(4, 4, 9, .58) 50%,
        rgba(4, 4, 9, .14) 61%,
        rgba(4, 4, 9, .07) 82%,
        rgba(4, 4, 9, .38) 100%
      ),
      linear-gradient(
        180deg,
        rgba(4, 4, 9, .34),
        transparent 30%,
        transparent 72%,
        rgba(4, 4, 9, .82)
      ) !important;
  }
}

@media (min-width: 981px) and (max-width: 1260px) {
  .hero-studio-image {
    left: 43% !important;
  }

  .hero-studio-image img {
    width: 122% !important;
    object-position: 81% center !important;
    clip-path: inset(0 0 0 17%) !important;
  }
}


/* V18 — final desktop Hero crop matching the approved preview.
   Reuse the existing studio image, but show only the monitor/right studio area. */
@media (min-width: 981px) {
  .hero--studio { overflow: hidden !important; }
  .hero-copy--studio { position: relative !important; z-index: 5 !important; max-width: 610px !important; }
  .hero-studio-image {
    left: 39.5% !important;
    right: -1.5% !important;
    top: 18px !important;
    bottom: 18px !important;
    width: auto !important;
    overflow: hidden !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  .hero-studio-image img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 132% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero-studio-overlay {
    z-index: 2 !important;
    background:
      linear-gradient(90deg,
        #040409 0%,
        #040409 35%,
        rgba(4,4,9,.995) 39%,
        rgba(4,4,9,.88) 44%,
        rgba(4,4,9,.38) 50%,
        rgba(4,4,9,.06) 59%,
        rgba(4,4,9,.03) 86%,
        rgba(4,4,9,.34) 100%),
      linear-gradient(180deg,rgba(4,4,9,.28),transparent 28%,transparent 72%,rgba(4,4,9,.78)) !important;
  }
}
@media (min-width: 981px) and (max-width: 1260px) {
  .hero-studio-image { left: 42% !important; right: -3% !important; }
  .hero-studio-image img { width: 140% !important; }
  .hero-copy--studio { max-width: 540px !important; }
}


/* V19 — Hero matched to the approved reference image.
   Existing studio artwork is cropped and positioned as a separate right-side visual. */
@media (min-width: 981px) {
  .hero--studio {
    min-height: 790px !important;
    padding-top: 54px !important;
    padding-bottom: 48px !important;
    grid-template-columns: minmax(470px, 0.82fr) minmax(650px, 1.38fr) !important;
    gap: 28px 34px !important;
    background: #040409 !important;
  }

  .hero-copy--studio {
    max-width: 560px !important;
    z-index: 5 !important;
  }

  .hero-copy--studio .eyebrow {
    display: none !important;
  }

  .hero--studio h1 {
    margin: 0 0 26px !important;
    max-width: 545px !important;
    font-size: clamp(56px, 4.45vw, 76px) !important;
    line-height: 1.02 !important;
  }

  .hero--studio .hero-lead {
    max-width: 535px !important;
    font-size: clamp(16px, 1.18vw, 20px) !important;
    line-height: 1.65 !important;
  }

  .hero-studio-image {
    left: 38.5% !important;
    right: 1.8% !important;
    top: 56px !important;
    bottom: 70px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  .hero-studio-image img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
    filter: saturate(1.02) contrast(1.04) brightness(.96) !important;
  }

  .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        #040409 0%,
        #040409 34%,
        rgba(4,4,9,.99) 37.5%,
        rgba(4,4,9,.72) 40.5%,
        rgba(4,4,9,.18) 44%,
        transparent 49%,
        transparent 91%,
        rgba(4,4,9,.20) 100%),
      linear-gradient(180deg,
        rgba(4,4,9,.16) 0%,
        transparent 18%,
        transparent 78%,
        rgba(4,4,9,.72) 100%) !important;
  }

  .hero-capabilities {
    margin-top: 25px !important;
    width: min(555px, 100%) !important;
  }

  .hero--studio .hero-actions {
    margin-top: 18px !important;
  }

  .hero-benefits--reference {
    width: min(760px, 100%) !important;
    padding-top: 20px !important;
  }
}

@media (min-width: 981px) and (max-width: 1260px) {
  .hero--studio {
    grid-template-columns: minmax(420px, .9fr) minmax(540px, 1.1fr) !important;
  }

  .hero-copy--studio {
    max-width: 500px !important;
  }

  .hero--studio h1 {
    max-width: 500px !important;
    font-size: clamp(50px, 5vw, 65px) !important;
  }

  .hero-studio-image {
    left: 40% !important;
    right: 0 !important;
    top: 64px !important;
    bottom: 80px !important;
  }
}

/* =========================
   V20 — responsive layout stabilization
   Fixes:
   1) hero content scales down more cleanly on smaller desktop/laptop widths,
   2) capability chips keep text inside, including “Full arrangement”,
   3) How It Works cards stay centered instead of drifting right.
   ========================= */

.hero--studio {
  gap: clamp(24px, 3vw, 42px);
}

.hero-copy--studio {
  max-width: min(640px, 100%);
}

.hero-capabilities {
  width: min(660px, 100%);
  gap: clamp(6px, 0.8vw, 8px);
}

.hero-capabilities > span {
  min-width: 0;
  min-height: clamp(46px, 4vw, 52px);
  padding: clamp(6px, 0.7vw, 8px) clamp(7px, 0.75vw, 10px);
  grid-template-columns: clamp(22px, 2vw, 28px) minmax(0, 1fr);
  gap: clamp(5px, 0.55vw, 7px);
}

.hero-capabilities svg {
  width: clamp(21px, 1.9vw, 27px);
  height: clamp(21px, 1.9vw, 27px);
}

.hero-capabilities strong {
  display: block;
  min-width: 0;
  font-size: clamp(9px, 0.68vw + 5.8px, 10px);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.hero-benefits--reference {
  width: min(820px, 100%);
}

.steps-grid--reference {
  justify-items: stretch;
  align-items: stretch;
}

@media (max-width: 1400px) {
  .hero--studio {
    grid-template-columns: minmax(380px, 0.92fr) minmax(440px, 1.08fr);
    padding-inline: clamp(24px, 3vw, 42px);
  }

  .hero-studio-image {
    width: min(68vw, 1080px);
    right: max(0px, calc((100vw - 1560px) / 2));
  }

  .hero-studio-overlay {
    background:
      linear-gradient(90deg, #040409 0%, rgba(4, 4, 9, .985) 30%, rgba(4, 4, 9, .78) 44%, rgba(4, 4, 9, .18) 66%, rgba(4, 4, 9, .10) 82%, rgba(4, 4, 9, .42) 100%),
      linear-gradient(180deg, rgba(4, 4, 9, .34), transparent 30%, transparent 72%, rgba(4, 4, 9, .8));
  }

  .hero--studio h1 {
    font-size: clamp(46px, 4.8vw, 68px);
  }
}

@media (max-width: 1220px) {
  .hero--studio {
    grid-template-columns: minmax(340px, 0.95fr) minmax(380px, 1.02fr);
    gap: 22px 24px;
  }

  .hero-studio-image {
    width: min(63vw, 920px);
  }

  .hero-capabilities {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero-capabilities > span {
    min-height: 44px;
    padding: 6px 7px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 5px;
  }

  .hero-capabilities svg {
    width: 20px;
    height: 20px;
  }

  .hero-capabilities strong {
    font-size: 8.6px;
    line-height: 1.1;
  }

  .steps-grid--reference {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding-bottom: 0;
  }

  .steps-grid--reference .step-card--reference {
    grid-column: span 2;
    min-height: 188px;
    padding: 14px 10px 14px;
  }

  .steps-grid--reference .step-card--reference:not(:last-child)::after {
    display: none;
  }

  .steps-grid--reference .step-card--reference:nth-child(7) {
    grid-column: 3 / span 2;
  }
}

@media (max-width: 1040px) {
  .hero--studio {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 28px;
    min-height: auto;
    padding: 48px 22px 42px;
  }

  .hero-copy--studio {
    max-width: 760px;
  }

  .hero-studio-image {
    position: relative;
    z-index: 0;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 0 auto;
    opacity: 1;
  }

  .hero-studio-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero-studio-overlay {
    background:
      linear-gradient(180deg, rgba(4,4,9,.08), rgba(4,4,9,.12) 45%, rgba(4,4,9,.68) 100%),
      radial-gradient(circle at 18% 22%, rgba(140, 56, 198, .18), transparent 19rem);
  }

  .hero-capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-capabilities > span {
    min-height: 48px;
    padding: 7px 9px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
  }

  .hero-capabilities svg {
    width: 24px;
    height: 24px;
  }

  .hero-capabilities strong {
    font-size: 10px;
    line-height: 1.14;
  }

  .hero-benefits--reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .steps-grid--reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .steps-grid--reference .step-card--reference,
  .steps-grid--reference .step-card--reference:nth-child(7) {
    grid-column: auto;
    min-height: 182px;
  }
}

@media (max-width: 680px) {
  .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-benefits--reference {
    grid-template-columns: 1fr;
  }

  .steps-grid--reference {
    grid-template-columns: 1fr;
  }

  .steps-grid--reference .step-card--reference {
    min-height: auto;
    padding: 18px 14px 16px;
  }
}

/* =========================================================
   V21 — definitive responsive breakpoint fix
   One rule only:
   - 981px and above: desktop hero
   - 980px and below: stacked responsive hero
   This block intentionally overrides older V16–V20 rules.
   ========================================================= */

@media (min-width: 981px) {
  .hero--studio {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 48px) !important;
    min-height: calc(100vh - 108px) !important;
    padding: clamp(48px, 6vw, 90px) clamp(28px, 5vw, 78px) clamp(48px, 5vw, 76px) !important;
    overflow: hidden !important;
  }

  .hero-copy--studio {
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 660px !important;
    min-width: 0 !important;
  }

  .hero-studio-image {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(68vw, 1120px) !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }

  .hero-studio-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center right !important;
    transform: none !important;
  }

  .hero-studio-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(90deg,
        #040409 0%,
        rgba(4,4,9,.995) 28%,
        rgba(4,4,9,.93) 38%,
        rgba(4,4,9,.48) 52%,
        rgba(4,4,9,.10) 72%,
        rgba(4,4,9,.20) 100%),
      linear-gradient(180deg, rgba(4,4,9,.18), transparent 35%, transparent 70%, rgba(4,4,9,.78)) !important;
  }

  .hero-benefits--reference {
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: min(820px, 100%) !important;
    margin: 0 !important;
  }

  .hero-capabilities {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    min-height: 86px !important;
  }

  .hero--studio {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    gap: 24px !important;
    min-height: 0 !important;
    padding: 34px 20px 40px !important;
    overflow: visible !important;
  }

  .hero-copy--studio {
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  .hero--studio h1 {
    margin-top: 0 !important;
    font-size: clamp(42px, 8vw, 68px) !important;
    line-height: .98 !important;
    overflow: visible !important;
  }

  .hero-lead {
    max-width: 700px !important;
    font-size: clamp(16px, 2.2vw, 20px) !important;
  }

  .hero-capabilities {
    width: 100% !important;
    max-width: 700px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 9px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .hero-capabilities strong {
    font-size: 10px !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-actions {
    flex-wrap: wrap !important;
  }

  .hero-studio-image {
    position: relative !important;
    z-index: 2 !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 900px !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .hero-studio-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center right !important;
    transform: none !important;
  }

  .hero-studio-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      radial-gradient(circle at 18% 20%, rgba(143, 59, 219, .18), transparent 18rem),
      linear-gradient(180deg, rgba(4,4,9,.04), rgba(4,4,9,.10) 50%, rgba(4,4,9,.45) 100%) !important;
    pointer-events: none !important;
  }

  .hero-benefits--reference {
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .steps-grid--reference {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .steps-grid--reference .step-card--reference,
  .steps-grid--reference .step-card--reference:nth-child(7) {
    grid-column: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 184px !important;
  }

  .steps-grid--reference .step-card--reference:nth-child(7) {
    grid-column: 1 / -1 !important;
    width: min(50%, 370px) !important;
    justify-self: center !important;
  }

  .steps-grid--reference .step-card--reference:not(:last-child)::after {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .hero--studio {
    padding: 28px 14px 34px !important;
  }

  .hero--studio h1 {
    font-size: clamp(38px, 12vw, 56px) !important;
  }

  .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-benefits--reference {
    grid-template-columns: 1fr !important;
  }

  .steps-grid--reference {
    grid-template-columns: 1fr !important;
  }

  .steps-grid--reference .step-card--reference:nth-child(7) {
    grid-column: auto !important;
    width: 100% !important;
  }
}

/* =========================================================
   V22 — desktop hero matched to the compact reference layout.
   No content changes outside the hero and responsive stability.
   ========================================================= */

@media (min-width: 981px) {
  .hero--studio {
    display: grid !important;
    grid-template-columns: minmax(390px, 40%) minmax(0, 60%) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 18px 30px !important;
    min-height: 610px !important;
    padding: 24px clamp(28px, 3.2vw, 54px) 20px !important;
    overflow: hidden !important;
  }

  .hero-copy--studio {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }

  .hero--studio .section-kicker,
  .hero--studio .eyebrow,
  .hero--studio .hero-badge {
    margin-bottom: 12px !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
  }

  .hero--studio h1 {
    margin: 0 !important;
    max-width: 500px !important;
    font-size: clamp(42px, 3.55vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  .hero-lead {
    max-width: 500px !important;
    margin: 18px 0 0 !important;
    font-size: clamp(15px, 1.15vw, 18px) !important;
    line-height: 1.55 !important;
  }

  .hero-capabilities {
    width: 100% !important;
    max-width: 520px !important;
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 6px 7px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 5px !important;
    border-radius: 7px !important;
  }

  .hero-capabilities svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-capabilities strong {
    font-size: 8.4px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .hero-actions {
    margin-top: 15px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .hero-actions .button,
  .hero-actions a,
  .hero-actions button {
    min-height: 48px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
  }

  .hero-studio-image {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: 560px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .hero-studio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% center !important;
    filter: brightness(1.08) contrast(1.03) saturate(1.03) !important;
  }

  .hero-studio-overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg,
        #040409 0%,
        rgba(4,4,9,.92) 5%,
        rgba(4,4,9,.42) 14%,
        rgba(4,4,9,.08) 28%,
        rgba(4,4,9,.02) 78%,
        rgba(4,4,9,.18) 100%),
      linear-gradient(180deg, rgba(4,4,9,.06), transparent 35%, transparent 74%, rgba(4,4,9,.50)) !important;
  }

  .hero-benefits--reference {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding-top: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-self: end !important;
  }

  .hero-benefits--reference article {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .benefit-icon--plain,
  .benefit-icon--plain svg {
    width: 23px !important;
    height: 23px !important;
  }

  .hero-benefits--reference strong {
    font-size: 9.6px !important;
    line-height: 1.15 !important;
  }

  .hero-benefits--reference small {
    font-size: 8px !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 981px) and (max-width: 1220px) {
  .hero--studio {
    grid-template-columns: minmax(350px, 42%) minmax(0, 58%) !important;
    min-height: 570px !important;
    padding-inline: 24px !important;
  }

  .hero--studio h1 {
    font-size: clamp(38px, 4.2vw, 50px) !important;
  }

  .hero-studio-image {
    height: 520px !important;
  }

  .hero-capabilities strong {
    font-size: 7.8px !important;
  }
}


/* === V23 hero full neon fix === */
.hero--studio {
  position: relative !important;
  overflow: hidden !important;
  width: min(var(--container), calc(100% - 48px)) !important;
  min-height: calc(100svh - var(--header-height)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  align-items: start !important;
  padding: clamp(28px, 4.2vw, 48px) clamp(18px, 3vw, 36px) 26px !important;
}
.hero--studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(4,5,10,.20);
}
.hero-studio-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-studio-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: saturate(1.02) brightness(.92) !important;
}
.hero-studio-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(5,6,11,.94) 0%,
      rgba(5,6,11,.90) 17%,
      rgba(5,6,11,.76) 27%,
      rgba(5,6,11,.36) 35%,
      rgba(5,6,11,.14) 42%,
      rgba(5,6,11,.10) 57%,
      rgba(5,6,11,.12) 74%,
      rgba(5,6,11,.24) 100%),
    radial-gradient(circle at 18% 46%, rgba(5,6,11,.10) 0 15%, rgba(5,6,11,0) 26%),
    linear-gradient(180deg, rgba(5,6,11,.14) 0%, rgba(5,6,11,.08) 38%, rgba(5,6,11,.28) 100%) !important;
}
.hero-copy--studio,
.hero-benefits--reference {
  position: relative !important;
  z-index: 2 !important;
}
.hero-copy--studio {
  max-width: 540px !important;
  width: 100% !important;
  padding-top: 6px !important;
}
.hero--studio .eyebrow {
  min-height: 32px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
}
.hero--studio h1 {
  margin: 18px 0 18px !important;
  max-width: 10.3ch !important;
  font-size: clamp(38px, 5.6vw, 66px) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
}
.hero--studio .hero-lead {
  max-width: 550px !important;
  font-size: clamp(15px, 1.45vw, 20px) !important;
  line-height: 1.58 !important;
}
.hero-capabilities {
  margin-top: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  max-width: 560px !important;
}
.hero-capabilities > span {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 8px 9px !important;
  gap: 6px !important;
  border: 1px solid rgba(126, 92, 228, .34) !important;
  border-radius: 10px !important;
  background: rgba(8,10,18,.50) !important;
  backdrop-filter: blur(8px) !important;
}
.hero-capabilities svg {
  width: 18px !important;
  height: 18px !important;
}
.hero-capabilities strong {
  font-size: 10px !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}
.hero--studio .hero-actions {
  margin-top: 20px !important;
  gap: 12px !important;
}
.hero--studio .button--large {
  min-height: 46px !important;
  padding-inline: 22px !important;
}
.hero-benefits--reference {
  grid-column: 1 / 2 !important;
  max-width: 560px !important;
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.hero-benefits--reference article {
  min-width: 0 !important;
  gap: 8px !important;
  padding: 0 !important;
}
.hero-benefits--reference article div strong {
  font-size: 14px !important;
  line-height: 1.18 !important;
}
.hero-benefits--reference article div small {
  font-size: 11px !important;
  line-height: 1.28 !important;
}
.hero-benefits--reference .benefit-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
}
.hero-benefits--reference .benefit-icon svg {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 1380px) {
  .hero--studio {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
    width: min(var(--container), calc(100% - 36px)) !important;
    padding-inline: 16px !important;
  }
  .hero-studio-image img { object-position: 57% center !important; }
  .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        rgba(5,6,11,.95) 0%,
        rgba(5,6,11,.92) 19%,
        rgba(5,6,11,.78) 29%,
        rgba(5,6,11,.40) 37%,
        rgba(5,6,11,.14) 43%,
        rgba(5,6,11,.10) 58%,
        rgba(5,6,11,.15) 76%,
        rgba(5,6,11,.24) 100%) !important;
  }
}

@media (max-width: 1240px) {
  .hero--studio {
    grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
    gap: 18px !important;
    padding-top: 24px !important;
  }
  .hero-studio-image img { object-position: 60% center !important; }
  .hero--studio h1 { font-size: clamp(36px, 4.8vw, 56px) !important; }
  .hero-capabilities { max-width: 520px !important; }
  .hero-capabilities strong { font-size: 9.5px !important; }
  .hero-benefits--reference { max-width: 520px !important; }
}

@media (max-width: 1100px) {
  .hero--studio {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-bottom: 26px !important;
  }
  .hero-copy--studio,
  .hero-benefits--reference {
    max-width: 620px !important;
  }
  .hero-studio-image img {
    object-position: 68% center !important;
    filter: saturate(1) brightness(.82) !important;
  }
  .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        rgba(5,6,11,.92) 0%,
        rgba(5,6,11,.88) 34%,
        rgba(5,6,11,.48) 47%,
        rgba(5,6,11,.18) 58%,
        rgba(5,6,11,.12) 74%,
        rgba(5,6,11,.20) 100%),
      linear-gradient(180deg, rgba(5,6,11,.10), rgba(5,6,11,.30)) !important;
  }
  .hero-benefits--reference {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 12px !important;
  }
}

@media (max-width: 820px) {
  .hero--studio {
    width: min(var(--container), calc(100% - 24px)) !important;
    padding: 20px 12px 22px !important;
  }
  .hero-studio-image img {
    object-position: 72% center !important;
    filter: saturate(1) brightness(.72) !important;
  }
  .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        rgba(5,6,11,.94) 0%,
        rgba(5,6,11,.92) 55%,
        rgba(5,6,11,.56) 70%,
        rgba(5,6,11,.18) 82%,
        rgba(5,6,11,.12) 100%) !important,
      linear-gradient(180deg, rgba(5,6,11,.20), rgba(5,6,11,.45)) !important;
  }
  .hero--studio h1 {
    max-width: 9ch !important;
    font-size: clamp(34px, 8.5vw, 52px) !important;
  }
  .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
  .hero-benefits--reference {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
}

/* =====================================================
   V24 — HERO rebuilt to match the accepted reference
   Full studio image, neon preserved, no black dead zone.
   ===================================================== */

@media (min-width: 1101px) {
  .hero--studio {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100svh - var(--header-height)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(30px, 4.2vw, 54px) clamp(30px, 4vw, 64px) clamp(24px, 3vw, 36px) !important;
    display: grid !important;
    grid-template-columns: minmax(430px, 35%) minmax(0, 65%) !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(24px, 3vw, 46px) !important;
    row-gap: 16px !important;
    align-items: start !important;
    background: #030409 !important;
  }

  .hero--studio::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: rgba(3,4,9,.06) !important;
    pointer-events: none !important;
  }

  .hero-studio-image {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 18% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .hero-studio-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 50% center !important;
    opacity: 1 !important;
    filter: brightness(.96) saturate(1.03) contrast(1.02) !important;
    transform: none !important;
  }

  .hero-studio-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,4,9,.98) 0%,
        rgba(3,4,9,.97) 18%,
        rgba(3,4,9,.91) 27%,
        rgba(3,4,9,.72) 34%,
        rgba(3,4,9,.34) 42%,
        rgba(3,4,9,.10) 53%,
        rgba(3,4,9,.04) 72%,
        rgba(3,4,9,.12) 100%),
      linear-gradient(180deg,
        rgba(3,4,9,.12) 0%,
        rgba(3,4,9,.02) 48%,
        rgba(3,4,9,.30) 100%) !important;
  }

  .hero-copy--studio {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 560px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero--studio .eyebrow {
    margin: 0 0 18px !important;
    min-height: 31px !important;
    padding: 0 14px !important;
    font-size: 10px !important;
  }

  .hero--studio h1 {
    margin: 0 0 18px !important;
    max-width: 10.8ch !important;
    font-size: clamp(48px, 4.45vw, 70px) !important;
    line-height: .98 !important;
    letter-spacing: -.062em !important;
  }

  .hero--studio .hero-lead {
    max-width: 525px !important;
    margin: 0 !important;
    font-size: clamp(16px, 1.28vw, 20px) !important;
    line-height: 1.55 !important;
  }

  .hero-capabilities {
    width: 100% !important;
    max-width: 560px !important;
    margin: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 7px 8px !important;
    grid-template-columns: 20px minmax(0,1fr) !important;
    gap: 6px !important;
    background: rgba(5,8,16,.64) !important;
    backdrop-filter: blur(8px) !important;
  }

  .hero-capabilities svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-capabilities strong {
    min-width: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero--studio .hero-actions {
    margin: 18px 0 0 !important;
    gap: 12px !important;
  }

  .hero--studio .button--large {
    min-height: 48px !important;
    padding: 0 22px !important;
  }

  .hero-benefits--reference {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 590px !important;
    margin: 0 !important;
    padding-top: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
    border-top: 1px solid rgba(122, 81, 183, .20) !important;
  }

  .hero-benefits--reference article {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .hero-benefits--reference article div strong {
    font-size: 13px !important;
    line-height: 1.14 !important;
  }

  .hero-benefits--reference article div small {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .hero-benefits--reference .benefit-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .hero--studio {
    grid-template-columns: minmax(395px, 38%) minmax(0, 62%) !important;
    padding-inline: 28px !important;
  }

  .hero-studio-image {
    left: 21% !important;
  }

  .hero--studio h1 {
    font-size: clamp(44px, 4.15vw, 58px) !important;
  }

  .hero-capabilities,
  .hero-copy--studio {
    max-width: 520px !important;
  }

  .hero-capabilities strong {
    font-size: 8.8px !important;
  }
}

@media (max-width: 1100px) {
  .hero--studio {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    display: block !important;
    padding: 34px 24px 30px !important;
    background: #030409 !important;
  }

  .hero-studio-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  .hero-studio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 70% center !important;
    filter: brightness(.74) saturate(1.02) !important;
    transform: none !important;
  }

  .hero-studio-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(90deg,
        rgba(3,4,9,.97) 0%,
        rgba(3,4,9,.96) 48%,
        rgba(3,4,9,.72) 64%,
        rgba(3,4,9,.30) 82%,
        rgba(3,4,9,.14) 100%),
      linear-gradient(180deg, rgba(3,4,9,.15), rgba(3,4,9,.42)) !important;
  }

  .hero-copy--studio,
  .hero-benefits--reference {
    position: relative !important;
    z-index: 2 !important;
    max-width: 620px !important;
  }
}

/* =========================================================
   V25 — FINAL STABLE HERO SYSTEM
   One coherent responsive system only:
   desktop >= 1200px, tablet 800–1199px, mobile <= 799px.
   Full image, no hard vertical cut, no layout jumping.
   ========================================================= */

/* Shared foundation */
.hero.hero--studio {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - var(--header-height)) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  background: #04050a !important;
}

.hero.hero--studio .hero-studio-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

.hero.hero--studio .hero-studio-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 1 !important;
  filter: saturate(1.04) brightness(.93) contrast(1.02) !important;
}

.hero.hero--studio .hero-studio-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(3,4,9,.98) 0%,
      rgba(3,4,9,.96) 18%,
      rgba(3,4,9,.88) 26%,
      rgba(3,4,9,.67) 34%,
      rgba(3,4,9,.30) 43%,
      rgba(3,4,9,.08) 53%,
      rgba(3,4,9,.03) 72%,
      rgba(3,4,9,.13) 100%),
    linear-gradient(180deg,
      rgba(3,4,9,.20) 0%,
      rgba(3,4,9,.02) 35%,
      rgba(3,4,9,.05) 70%,
      rgba(3,4,9,.42) 100%) !important;
}

.hero.hero--studio::before,
.hero.hero--studio::after {
  content: none !important;
  display: none !important;
}

.hero.hero--studio .hero-copy--studio,
.hero.hero--studio .hero-benefits--reference {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
}

/* DESKTOP — accepted reference composition */
@media (min-width: 1200px) {
  .hero.hero--studio {
    grid-template-columns: minmax(470px, 39%) minmax(0, 61%) !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    column-gap: 0 !important;
    padding: clamp(30px, 4vh, 54px) clamp(34px, 3.2vw, 62px) clamp(24px, 3vh, 38px) !important;
  }

  .hero.hero--studio .hero-copy--studio {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: min(100%, 570px) !important;
    max-width: 570px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero.hero--studio .eyebrow {
    display: inline-flex !important;
    min-height: 30px !important;
    margin: 0 0 18px !important;
    padding: 0 14px !important;
    font-size: 10px !important;
  }

  .hero.hero--studio h1 {
    max-width: 9.5ch !important;
    margin: 0 0 22px !important;
    font-size: clamp(50px, 4.55vw, 74px) !important;
    line-height: .96 !important;
    letter-spacing: -.062em !important;
  }

  .hero.hero--studio .hero-lead {
    max-width: 530px !important;
    margin: 0 !important;
    font-size: clamp(16px, 1.28vw, 20px) !important;
    line-height: 1.58 !important;
  }

  .hero.hero--studio .hero-capabilities {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 26px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .hero.hero--studio .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 7px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 6px !important;
    border-radius: 10px !important;
    background: rgba(8,10,18,.55) !important;
    backdrop-filter: blur(8px) !important;
  }

  .hero.hero--studio .hero-capabilities svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 10px !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero.hero--studio .hero-actions {
    margin: 20px 0 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .hero.hero--studio .hero-actions .button {
    min-height: 48px !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    margin: 22px 0 0 !important;
    padding: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 13px !important;
    border-top: 1px solid rgba(142,92,238,.20) !important;
  }

  .hero.hero--studio .hero-benefits--reference article {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .hero.hero--studio .hero-benefits--reference strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .hero.hero--studio .hero-benefits--reference small {
    font-size: 10px !important;
    line-height: 1.28 !important;
  }
}

/* TABLET / SMALL LAPTOP — same composition, smoothly scaled */
@media (min-width: 800px) and (max-width: 1199px) {
  .hero.hero--studio {
    grid-template-columns: minmax(390px, 46%) minmax(0, 54%) !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    padding: 28px 28px 26px !important;
  }

  .hero.hero--studio .hero-studio-image img {
    object-position: 60% center !important;
    filter: saturate(1.02) brightness(.88) contrast(1.02) !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        rgba(3,4,9,.98) 0%,
        rgba(3,4,9,.96) 24%,
        rgba(3,4,9,.88) 36%,
        rgba(3,4,9,.58) 47%,
        rgba(3,4,9,.20) 58%,
        rgba(3,4,9,.06) 75%,
        rgba(3,4,9,.14) 100%),
      linear-gradient(180deg, rgba(3,4,9,.18), rgba(3,4,9,.36)) !important;
  }

  .hero.hero--studio .hero-copy--studio {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero.hero--studio .eyebrow {
    margin-bottom: 14px !important;
  }

  .hero.hero--studio h1 {
    max-width: 9.5ch !important;
    margin: 0 0 18px !important;
    font-size: clamp(42px, 5.2vw, 60px) !important;
    line-height: .97 !important;
  }

  .hero.hero--studio .hero-lead {
    max-width: 470px !important;
    font-size: clamp(15px, 1.65vw, 18px) !important;
    line-height: 1.55 !important;
  }

  .hero.hero--studio .hero-capabilities {
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    margin-top: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .hero.hero--studio .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 7px 5px !important;
    grid-template-columns: 17px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .hero.hero--studio .hero-capabilities svg {
    width: 17px !important;
    height: 17px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 8.8px !important;
    line-height: 1.1 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hero.hero--studio .hero-actions {
    margin-top: 17px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .hero.hero--studio .hero-actions .button {
    min-height: 45px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    margin: 18px 0 0 !important;
    padding-top: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px 18px !important;
    border-top: 1px solid rgba(142,92,238,.20) !important;
  }

  .hero.hero--studio .hero-benefits--reference article {
    min-width: 0 !important;
  }
}

/* MOBILE — intentional vertical composition, no overlap */
@media (max-width: 799px) {
  .hero.hero--studio {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    min-height: auto !important;
    padding: 28px 18px 28px !important;
    row-gap: 22px !important;
  }

  .hero.hero--studio .hero-studio-image {
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(111,74,195,.42) !important;
  }

  .hero.hero--studio .hero-studio-image img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: saturate(1) brightness(.92) !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    background: linear-gradient(180deg, rgba(3,4,9,.12), rgba(3,4,9,.32)) !important;
  }

  .hero.hero--studio .hero-copy--studio {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero.hero--studio .eyebrow {
    margin-bottom: 14px !important;
  }

  .hero.hero--studio h1 {
    max-width: 10ch !important;
    margin: 0 0 18px !important;
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: .98 !important;
  }

  .hero.hero--studio .hero-lead {
    max-width: 620px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero.hero--studio .hero-capabilities {
    width: 100% !important;
    max-width: none !important;
    margin-top: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .hero.hero--studio .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    grid-template-columns: 22px minmax(0,1fr) !important;
    gap: 8px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  .hero.hero--studio .hero-actions {
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero.hero--studio .hero-actions .button {
    width: 100% !important;
    min-height: 48px !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
    border-top: 1px solid rgba(142,92,238,.20) !important;
  }
}

@media (max-width: 480px) {
  .hero.hero--studio {
    padding-inline: 14px !important;
  }

  .hero.hero--studio .hero-capabilities,
  .hero.hero--studio .hero-benefits--reference {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================
   V26 — clean hero using the exact full reference image
   The image is NEVER cropped on the left. It is scaled down
   proportionally and shifted right, so the full neon remains
   visible beside the copy instead of underneath it.
   ========================================================== */
.hero.hero--studio {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: min(100%, 1672px) !important;
  min-height: 0 !important;
  aspect-ratio: 1672 / 941 !important;
  margin: 0 auto !important;
  padding: clamp(30px, 3.8vw, 62px) clamp(34px, 3.8vw, 64px) clamp(22px, 2.4vw, 38px) !important;
  display: grid !important;
  grid-template-columns: minmax(430px, 39%) minmax(0, 61%) !important;
  grid-template-rows: 1fr auto !important;
  align-items: center !important;
  background: #030409 !important;
}

.hero.hero--studio .hero-studio-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  transform: none !important;
}

.hero.hero--studio .hero-studio-image img {
  display: block !important;
  width: 92% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  filter: saturate(1.03) brightness(.94) contrast(1.02) !important;
}

.hero.hero--studio .hero-studio-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(3,4,9,.99) 0%,
      rgba(3,4,9,.98) 17%,
      rgba(3,4,9,.94) 25%,
      rgba(3,4,9,.77) 32%,
      rgba(3,4,9,.36) 38%,
      rgba(3,4,9,.10) 45%,
      rgba(3,4,9,.02) 56%,
      rgba(3,4,9,.02) 82%,
      rgba(3,4,9,.10) 100%),
    linear-gradient(180deg,
      rgba(3,4,9,.10) 0%,
      rgba(3,4,9,.00) 48%,
      rgba(3,4,9,.20) 78%,
      rgba(3,4,9,.48) 100%) !important;
}

.hero.hero--studio::before,
.hero.hero--studio::after {
  content: none !important;
  display: none !important;
}

.hero.hero--studio .hero-copy--studio {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: min(100%, 565px) !important;
  max-width: 565px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

.hero.hero--studio .eyebrow {
  margin: 0 0 18px !important;
}

.hero.hero--studio h1 {
  max-width: 9.6ch !important;
  margin: 0 0 20px !important;
  font-size: clamp(48px, 4.65vw, 74px) !important;
  line-height: .965 !important;
  letter-spacing: -.06em !important;
}

.hero.hero--studio .hero-lead {
  max-width: 535px !important;
  margin: 0 !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  line-height: 1.55 !important;
}

.hero.hero--studio .hero-capabilities {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin: 24px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 8px !important;
}

.hero.hero--studio .hero-capabilities > span {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 7px !important;
  grid-template-columns: 20px minmax(0,1fr) !important;
  gap: 6px !important;
}

.hero.hero--studio .hero-capabilities strong {
  font-size: 10px !important;
  line-height: 1.12 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.hero.hero--studio .hero-actions {
  margin: 20px 0 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

.hero.hero--studio .hero-benefits--reference {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  margin: 20px 0 0 !important;
  padding: 17px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 13px !important;
  border-top: 1px solid rgba(142,92,238,.20) !important;
}

@media (min-width: 1200px) and (max-width: 1450px) {
  .hero.hero--studio {
    grid-template-columns: minmax(420px, 41%) minmax(0, 59%) !important;
    padding-inline: 34px !important;
  }

  .hero.hero--studio .hero-studio-image img {
    width: 90% !important;
  }

  .hero.hero--studio h1 {
    font-size: clamp(44px, 4.35vw, 64px) !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .hero.hero--studio {
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 760px !important;
    grid-template-columns: minmax(390px, 45%) minmax(0, 55%) !important;
    padding: 30px 28px 26px !important;
  }

  .hero.hero--studio .hero-studio-image img {
    width: 86% !important;
    object-fit: contain !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        rgba(3,4,9,.99) 0%,
        rgba(3,4,9,.98) 24%,
        rgba(3,4,9,.91) 34%,
        rgba(3,4,9,.68) 43%,
        rgba(3,4,9,.28) 51%,
        rgba(3,4,9,.08) 62%,
        rgba(3,4,9,.03) 100%),
      linear-gradient(180deg, rgba(3,4,9,.12), rgba(3,4,9,.36)) !important;
  }

  .hero.hero--studio h1 {
    font-size: clamp(40px, 5.1vw, 58px) !important;
  }

  .hero.hero--studio .hero-capabilities {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 8.8px !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: 500px !important;
  }
}

@media (max-width: 899px) {
  .hero.hero--studio {
    width: 100% !important;
    aspect-ratio: auto !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 22px !important;
    padding: 28px 18px 26px !important;
  }

  .hero.hero--studio .hero-copy--studio {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .hero.hero--studio .hero-studio-image {
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1672 / 941 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(111,74,195,.35) !important;
    background: #030409 !important;
  }

  .hero.hero--studio .hero-studio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: saturate(1.02) brightness(.96) !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    display: none !important;
  }

  .hero.hero--studio h1 {
    max-width: 10ch !important;
    font-size: clamp(38px, 10vw, 56px) !important;
  }

  .hero.hero--studio .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: none !important;
  }

  .hero.hero--studio .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero.hero--studio .hero-actions .button {
    width: 100% !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 520px) {
  .hero.hero--studio .hero-capabilities,
  .hero.hero--studio .hero-benefits--reference {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   V27 — CLEAN HERO LAYOUT
   One authoritative responsive system. This block deliberately
   overrides all older hero experiments without changing the rest
   of the website.
   ========================================================= */

.hero.hero--studio {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(650px, 51vw, 820px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(52px, 4vw, 76px) clamp(34px, 3.2vw, 62px) 36px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #03040a !important;
  box-sizing: border-box !important;
}

.hero.hero--studio .hero-studio-image {
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: min(72vw, 1180px) !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.hero.hero--studio .hero-studio-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  opacity: 1 !important;
  filter: brightness(.76) saturate(.94) contrast(1.03) !important;
}

/* Darken the text area smoothly. No hard vertical cut. */
.hero.hero--studio .hero-studio-overlay {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(3,4,10,1) 0%,
      rgba(3,4,10,.99) 24%,
      rgba(3,4,10,.94) 34%,
      rgba(3,4,10,.68) 43%,
      rgba(3,4,10,.20) 55%,
      rgba(3,4,10,0) 66%),
    linear-gradient(180deg,
      rgba(3,4,10,.08) 0%,
      rgba(3,4,10,0) 58%,
      rgba(3,4,10,.86) 100%) !important;
}

.hero.hero--studio::before,
.hero.hero--studio::after {
  content: none !important;
  display: none !important;
}

.hero.hero--studio .hero-copy--studio {
  position: relative !important;
  z-index: 3 !important;
  width: min(39%, 590px) !important;
  max-width: 590px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.hero.hero--studio .eyebrow {
  margin: 0 0 28px !important;
}

.hero.hero--studio h1 {
  width: 100% !important;
  max-width: 590px !important;
  margin: 0 0 26px !important;
  font-size: clamp(48px, 4.45vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

.hero.hero--studio .hero-lead {
  max-width: 560px !important;
  margin: 0 0 24px !important;
  font-size: clamp(17px, 1.25vw, 21px) !important;
  line-height: 1.55 !important;
}

.hero.hero--studio .hero-capabilities {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
}

.hero.hero--studio .hero-capabilities > span {
  min-width: 0 !important;
  padding: 9px 6px !important;
}

.hero.hero--studio .hero-capabilities strong {
  font-size: 11px !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
}

.hero.hero--studio .hero-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  margin: 0 !important;
}

.hero.hero--studio .hero-actions .button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.hero.hero--studio .hero-benefits--reference {
  position: absolute !important;
  z-index: 3 !important;
  left: clamp(34px, 3.2vw, 62px) !important;
  bottom: 34px !important;
  width: min(39%, 590px) !important;
  max-width: 590px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid rgba(150, 83, 255, .25) !important;
  transform: none !important;
}

.hero.hero--studio .hero-benefits--reference article {
  min-width: 0 !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

.hero.hero--studio .hero-benefits--reference strong {
  font-size: 13px !important;
  line-height: 1.13 !important;
}

.hero.hero--studio .hero-benefits--reference small {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

/* Compact desktop / large tablet: still two columns, but never clip the title. */
@media (max-width: 1180px) and (min-width: 901px) {
  .hero.hero--studio {
    min-height: 700px !important;
    padding: 46px 34px 30px !important;
  }
  .hero.hero--studio .hero-studio-image {
    width: 68vw !important;
    top: 56px !important;
  }
  .hero.hero--studio .hero-copy--studio {
    width: 43% !important;
  }
  .hero.hero--studio h1 {
    font-size: clamp(43px, 5.2vw, 58px) !important;
  }
  .hero.hero--studio .hero-lead {
    font-size: 16px !important;
  }
  .hero.hero--studio .hero-benefits--reference {
    left: 34px !important;
    width: 43% !important;
    bottom: 28px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 14px !important;
  }
}

/* Tablet and mobile: normal document flow. Nothing is absolutely cropped. */
@media (max-width: 900px) {
  .hero.hero--studio {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 38px 26px 0 !important;
    overflow: hidden !important;
  }

  .hero.hero--studio .hero-copy--studio {
    order: 1 !important;
    width: 100% !important;
    max-width: 680px !important;
  }

  .hero.hero--studio h1 {
    max-width: 650px !important;
    font-size: clamp(42px, 8.2vw, 62px) !important;
    line-height: 1 !important;
  }

  .hero.hero--studio .hero-capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 620px !important;
  }

  .hero.hero--studio .hero-actions {
    flex-wrap: wrap !important;
  }

  .hero.hero--studio .hero-studio-image {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: calc(100% + 52px) !important;
    margin: 28px -26px 0 !important;
  }

  .hero.hero--studio .hero-studio-image img {
    width: 100% !important;
    filter: brightness(.84) saturate(.95) !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    display: none !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    order: 3 !important;
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: calc(100% + 52px) !important;
    max-width: none !important;
    margin: 0 -26px !important;
    padding: 24px 26px 30px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: linear-gradient(180deg, rgba(3,4,10,.35), #03040a 38%) !important;
  }
}

@media (max-width: 560px) {
  .hero.hero--studio {
    padding: 30px 18px 0 !important;
  }
  .hero.hero--studio h1 {
    font-size: clamp(38px, 12vw, 52px) !important;
  }
  .hero.hero--studio .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .hero.hero--studio .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .hero.hero--studio .hero-actions .button {
    width: 100% !important;
  }
  .hero.hero--studio .hero-studio-image {
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
  }
  .hero.hero--studio .hero-benefits--reference {
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =========================================================
   V28 — focused hero corrections
   1. Keep every capability label inside its frame.
   2. Move the four product highlights closer to the buttons.
   No image, headline or downstream section geometry changes.
   ========================================================= */

@media (min-width: 1200px) {
  .hero.hero--studio .hero-capabilities {
    width: min(100%, 570px) !important;
    max-width: 570px !important;
    gap: 7px !important;
  }

  .hero.hero--studio .hero-capabilities > span {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    padding: 8px 5px !important;
    overflow: hidden !important;
  }

  .hero.hero--studio .hero-capabilities svg {
    width: 18px !important;
    height: 18px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 9.4px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero.hero--studio .hero-capabilities > span:nth-child(4) strong {
    font-size: 9.1px !important;
    letter-spacing: -0.035em !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    bottom: 86px !important;
    padding-top: 16px !important;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .hero.hero--studio .hero-capabilities > span {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    column-gap: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    overflow: hidden !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 8.5px !important;
    letter-spacing: -0.025em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero.hero--studio .hero-capabilities > span:nth-child(4) strong {
    font-size: 8.2px !important;
    letter-spacing: -0.04em !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    bottom: 66px !important;
  }
}

/* =========================================================
   V29 — FLUID HERO LAYOUT
   The desktop composition is kept as one stable layout.
   No absolute positioning for copy/highlights, no fixed hero height.
   Only the photograph is layered behind the normal document flow.
   ========================================================= */

.hero.hero--studio {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 38%) minmax(0, 62%) !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: clamp(36px, 3.4vw, 58px) clamp(32px, 3.2vw, 62px) clamp(30px, 2.8vw, 48px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #03040a !important;
}

.hero.hero--studio .hero-studio-image {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 0 0 auto !important;
  width: 74% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
  pointer-events: none !important;
}

.hero.hero--studio .hero-studio-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: right center !important;
  transform: none !important;
  filter: brightness(.82) saturate(.96) contrast(1.02) !important;
}

.hero.hero--studio .hero-studio-overlay {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      #03040a 0%,
      rgba(3,4,10,.995) 24%,
      rgba(3,4,10,.94) 31%,
      rgba(3,4,10,.72) 38%,
      rgba(3,4,10,.34) 45%,
      rgba(3,4,10,.08) 54%,
      rgba(3,4,10,0) 65%),
    linear-gradient(180deg,
      rgba(3,4,10,.08) 0%,
      rgba(3,4,10,0) 58%,
      rgba(3,4,10,.52) 100%) !important;
}

.hero.hero--studio .hero-copy--studio {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 590px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.hero.hero--studio .eyebrow { margin: 0 0 20px !important; }

.hero.hero--studio h1 {
  width: 100% !important;
  max-width: 590px !important;
  margin: 0 0 22px !important;
  font-size: clamp(46px, 4.35vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance !important;
}

.hero.hero--studio .hero-lead {
  max-width: 550px !important;
  margin: 0 0 22px !important;
  font-size: clamp(16px, 1.18vw, 20px) !important;
  line-height: 1.52 !important;
}

.hero.hero--studio .hero-capabilities {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 570px !important;
  margin: 0 0 20px !important;
  gap: 7px !important;
}

.hero.hero--studio .hero-capabilities > span {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 7px 5px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 5px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hero.hero--studio .hero-capabilities svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.hero.hero--studio .hero-capabilities strong {
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: clamp(8.6px, .66vw, 10.4px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.hero.hero--studio .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

.hero.hero--studio .hero-actions .button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.hero.hero--studio .hero-benefits--reference {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 590px !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  border-top: 1px solid rgba(150,83,255,.24) !important;
  transform: none !important;
  background: transparent !important;
}

.hero.hero--studio .hero-benefits--reference article {
  min-width: 0 !important;
  gap: 7px !important;
  align-items: flex-start !important;
}

.hero.hero--studio .hero-benefits--reference strong {
  font-size: clamp(11px, .78vw, 13px) !important;
  line-height: 1.12 !important;
}

.hero.hero--studio .hero-benefits--reference small {
  font-size: clamp(8.5px, .62vw, 10px) !important;
  line-height: 1.24 !important;
}

/* Medium desktop: preserve the same composition and simply tighten it. */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero.hero--studio {
    grid-template-columns: minmax(390px, 44%) minmax(0, 56%) !important;
    padding: 34px 28px 30px !important;
  }

  .hero.hero--studio .hero-studio-image {
    width: 67% !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        #03040a 0%,
        rgba(3,4,10,.995) 31%,
        rgba(3,4,10,.92) 39%,
        rgba(3,4,10,.66) 47%,
        rgba(3,4,10,.24) 56%,
        rgba(3,4,10,0) 68%),
      linear-gradient(180deg, rgba(3,4,10,.08), rgba(3,4,10,.48)) !important;
  }

  .hero.hero--studio h1 {
    font-size: clamp(42px, 5.15vw, 58px) !important;
  }

  .hero.hero--studio .hero-capabilities {
    gap: 5px !important;
  }

  .hero.hero--studio .hero-capabilities > span {
    grid-template-columns: 16px minmax(0,1fr) !important;
    column-gap: 4px !important;
    padding-inline: 4px !important;
  }

  .hero.hero--studio .hero-capabilities svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 8.2px !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: 470px !important;
    row-gap: 11px !important;
  }
}

/* Mobile/tablet: clean stack in normal flow; no clipping and no overlap. */
@media (max-width: 900px) {
  .hero.hero--studio {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 34px 22px 0 !important;
    overflow: hidden !important;
  }

  .hero.hero--studio .hero-copy--studio {
    order: 1 !important;
    width: 100% !important;
    max-width: 680px !important;
  }

  .hero.hero--studio h1 {
    max-width: 650px !important;
    font-size: clamp(40px, 8.8vw, 60px) !important;
    line-height: 1 !important;
  }

  .hero.hero--studio .hero-capabilities {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    max-width: 620px !important;
  }

  .hero.hero--studio .hero-capabilities strong {
    font-size: 9.5px !important;
  }

  .hero.hero--studio .hero-studio-image {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: calc(100% + 44px) !important;
    height: auto !important;
    margin: 12px -22px 0 !important;
    overflow: hidden !important;
    aspect-ratio: 1664 / 1024 !important;
  }

  .hero.hero--studio .hero-studio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: brightness(.9) saturate(.98) !important;
  }

  .hero.hero--studio .hero-studio-overlay {
    display: none !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    order: 3 !important;
    width: calc(100% + 44px) !important;
    max-width: none !important;
    margin: 0 -22px !important;
    padding: 20px 22px 28px !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    background: #03040a !important;
  }
}

@media (max-width: 560px) {
  .hero.hero--studio {
    padding: 28px 16px 0 !important;
  }

  .hero.hero--studio h1 {
    font-size: clamp(36px, 12vw, 50px) !important;
  }

  .hero.hero--studio .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .hero.hero--studio .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero.hero--studio .hero-actions .button {
    width: 100% !important;
  }

  .hero.hero--studio .hero-studio-image {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .hero.hero--studio .hero-benefits--reference {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================================
   V34 — SCALED HERO STAGE
   Desktop V32 remains intact at >=1200px.
   Between 850px and 1199px the complete Hero composition is
   scaled as one scene, so internal positions never collide.
   Below 850px a controlled mobile flow is used.
   ========================================================= */

html {
  scroll-padding-top: var(--header-height);
}

.hero-viewport {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background: #03040a;
}

.hero-stage {
  transform-origin: top center;
}

/* Header switches before navigation can squeeze. */
@media (max-width: 1199px) {
  .site-header {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(12px, 2vw, 24px);
    padding-inline: clamp(18px, 3vw, 34px);
    overflow-x: clip;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    max-width: 100vw;
    padding: 28px;
    flex-direction: column;
    background: rgba(5,5,10,.97);
    border-bottom: 1px solid rgba(151,77,221,.18);
    overflow-x: hidden;
  }

  .main-nav.open { display: flex; }
  .nav-toggle { display: block; justify-self: end; }
  .header-cta { display: none; }
}

@media (min-width: 1200px) {
  .hero.hero--studio.hero-stage {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(540px, 37.2vw, 590px) !important;
    min-height: 0 !important;
    max-height: 590px !important;
    margin: 0 !important;
    padding: 18px clamp(32px, 3.2vw, 52px) 22px !important;
    overflow: hidden !important;
    background: #03040a !important;
    transform: none !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-image {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 0 0 auto !important;
    width: 60% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    filter: brightness(.82) saturate(.96) contrast(1.02) !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-overlay {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        #03040a 0%,
        rgba(3,4,10,1) 27%,
        rgba(3,4,10,.97) 34%,
        rgba(3,4,10,.82) 40%,
        rgba(3,4,10,.52) 46%,
        rgba(3,4,10,.18) 53%,
        rgba(3,4,10,.03) 61%,
        rgba(3,4,10,.06) 86%,
        rgba(3,4,10,.22) 100%),
      linear-gradient(180deg,
        rgba(3,4,10,.16) 0%,
        transparent 24%,
        transparent 76%,
        rgba(3,4,10,.64) 100%) !important;
  }

  .hero.hero--studio.hero-stage .hero-copy--studio {
    position: relative !important;
    z-index: 3 !important;
    width: 40% !important;
    max-width: 600px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero.hero--studio.hero-stage .eyebrow {
    margin: 0 0 24px !important;
    min-height: 30px !important;
    padding-inline: 14px !important;
    font-size: 10px !important;
  }

  .hero.hero--studio.hero-stage h1 {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    margin: 0 0 22px !important;
    font-size: clamp(42px, 3.1vw, 50px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.052em !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .hero.hero--studio.hero-stage .hero-lead {
    max-width: 535px !important;
    margin: 0 0 28px !important;
    font-size: clamp(15px, 1.04vw, 16.5px) !important;
    line-height: 1.5 !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 6px 5px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 0 0 26px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions .button {
    min-width: 0 !important;
    min-height: 48px !important;
    padding-inline: 22px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference {
    position: absolute !important;
    z-index: 3 !important;
    left: clamp(32px, 3.2vw, 52px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 22px !important;
    width: 40% !important;
    max-width: 600px !important;
    margin: 0 !important;
    padding: 15px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
    border-top: 1px solid rgba(150,83,255,.24) !important;
    transform: none !important;
    background: transparent !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article {
    min-width: 0 !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    gap: 7px !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference strong {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference small {
    font-size: 8.7px !important;
    line-height: 1.24 !important;
  }
}

/* One fixed 1200 × 540 design scene, uniformly scaled by script. */
@media (min-width: 850px) and (max-width: 1199px) {
  .hero-viewport {
    --hero-scale: .8;
    position: relative;
    height: calc(540px * var(--hero-scale));
    overflow: hidden;
  }

  .hero.hero--studio.hero-stage {
    position: absolute !important;
    isolation: isolate !important;
    display: block !important;
    top: 0 !important;
    left: 50% !important;
    width: 1200px !important;
    max-width: none !important;
    height: 540px !important;
    min-height: 540px !important;
    max-height: 540px !important;
    margin: 0 0 0 -600px !important;
    padding: 18px 38px 22px !important;
    overflow: hidden !important;
    background: #03040a !important;
    transform: scale(var(--hero-scale)) !important;
    transform-origin: top center !important;
    will-change: transform;
  }

  .hero.hero--studio.hero-stage .hero-studio-image {
    order: initial !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 720px !important;
    height: 540px !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: hidden !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    filter: brightness(.82) saturate(.96) contrast(1.02) !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-overlay {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        #03040a 0%,
        rgba(3,4,10,1) 27%,
        rgba(3,4,10,.97) 34%,
        rgba(3,4,10,.82) 40%,
        rgba(3,4,10,.52) 46%,
        rgba(3,4,10,.18) 53%,
        rgba(3,4,10,.03) 61%,
        rgba(3,4,10,.06) 86%,
        rgba(3,4,10,.22) 100%),
      linear-gradient(180deg,
        rgba(3,4,10,.16) 0%,
        transparent 24%,
        transparent 76%,
        rgba(3,4,10,.64) 100%) !important;
  }

  .hero.hero--studio.hero-stage .hero-copy--studio {
    order: initial !important;
    position: relative !important;
    z-index: 3 !important;
    width: 480px !important;
    max-width: 480px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero.hero--studio.hero-stage .eyebrow {
    margin: 0 0 22px !important;
    min-height: 30px !important;
    padding-inline: 14px !important;
    font-size: 10px !important;
  }

  .hero.hero--studio.hero-stage h1 {
    width: 480px !important;
    max-width: 480px !important;
    height: auto !important;
    margin: 0 0 20px !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
    letter-spacing: -.052em !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .hero.hero--studio.hero-stage h1 br {
    display: block !important;
  }

  .hero.hero--studio.hero-stage .hero-lead {
    width: 455px !important;
    max-width: 455px !important;
    margin: 0 0 24px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    width: 480px !important;
    max-width: 480px !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 6px 5px !important;
    overflow: hidden !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities strong {
    font-size: 8.8px !important;
    line-height: 1.08 !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions .button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding-inline: 20px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference {
    order: initial !important;
    position: absolute !important;
    z-index: 3 !important;
    left: 38px !important;
    right: auto !important;
    top: auto !important;
    bottom: 22px !important;
    width: 480px !important;
    max-width: 480px !important;
    margin: 0 !important;
    padding: 15px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
    border-top: 1px solid rgba(150,83,255,.24) !important;
    transform: none !important;
    background: transparent !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article {
    min-width: 0 !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    gap: 7px !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference strong {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference small {
    font-size: 8.7px !important;
    line-height: 1.24 !important;
  }
}

/* Controlled mobile composition only after the scaled scene reaches its limit. */
@media (max-width: 849px) {
  .hero-viewport {
    height: auto !important;
    overflow: visible;
  }

  .hero.hero--studio.hero-stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(28px, 5vw, 40px) clamp(16px, 4vw, 28px) 0 !important;
    overflow: hidden !important;
    background: #03040a !important;
    transform: none !important;
  }

  .hero.hero--studio.hero-stage .hero-copy--studio {
    order: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero.hero--studio.hero-stage .eyebrow {
    margin-bottom: 24px !important;
  }

  .hero.hero--studio.hero-stage h1 {
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    margin: 0 0 24px !important;
    font-size: clamp(38px, 8.4vw, 58px) !important;
    line-height: 1.02 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .hero.hero--studio.hero-stage h1 br {
    display: none !important;
  }

  .hero.hero--studio.hero-stage .hero-lead {
    max-width: 620px !important;
    margin-bottom: 30px !important;
    font-size: clamp(15px, 2.2vw, 18px) !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    width: 100% !important;
    max-width: 650px !important;
    gap: 8px !important;
    margin: 0 0 28px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities > span {
    min-width: 0 !important;
    min-height: 48px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 26px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions .button {
    width: auto !important;
    min-width: min(100%, 210px) !important;
    max-width: 100% !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference {
    order: 2 !important;
    position: relative !important;
    z-index: 3 !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 0 22px !important;
    padding: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 16px !important;
    border-top: 1px solid rgba(150,83,255,.24) !important;
    background: transparent !important;
    transform: none !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article {
    min-width: 0 !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-image {
    order: 3 !important;
    position: relative !important;
    z-index: 0 !important;
    inset: auto !important;
    width: calc(100% + 2 * clamp(16px, 4vw, 28px)) !important;
    height: auto !important;
    margin: 0 calc(-1 * clamp(16px, 4vw, 28px)) !important;
    aspect-ratio: 1664 / 1024 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-image img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
    filter: brightness(.86) saturate(.97) !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-overlay {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .site-header {
    padding-inline: 16px;
  }

  .brand {
    min-width: 0;
  }

  .brand-mark {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero.hero--studio.hero-stage .hero-actions .button {
    width: 100% !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   V35 — HEADER COPY + HERO BENEFIT BAR + 7-STEP WORKFLOW
   Built on locked V34 scaled-scene behaviour. The Hero scale,
   stage dimensions and ResizeObserver logic remain unchanged.
   ========================================================= */

/* Longer header labels: switch to hamburger before they can squeeze. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding-inline: clamp(22px, 3vw, 38px);
    overflow-x: clip;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    max-width: 100vw;
    padding: 28px;
    flex-direction: column;
    background: rgba(5,5,10,.97);
    border-bottom: 1px solid rgba(151,77,221,.18);
    overflow-x: hidden;
  }

  .main-nav.open { display: flex; }
  .nav-toggle { display: block; justify-self: end; }
  .header-cta { display: none; }
}

@media (min-width: 1280px) {
  .main-nav {
    gap: clamp(24px, 2.25vw, 38px);
    white-space: nowrap;
  }
}

/* Full-width product-highlight bar inside the locked V34 Hero scene. */
@media (min-width: 1200px) {
  .hero.hero--studio.hero-stage .hero-benefits--reference {
    left: clamp(10px, .8vw, 14px) !important;
    right: clamp(10px, .8vw, 14px) !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 82px !important;
    padding: 14px 20px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: center !important;
    border: 1px solid rgba(78, 102, 157, .46) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 22% 0%, rgba(71, 50, 143, .11), transparent 34%),
      linear-gradient(145deg, rgba(7, 13, 24, .92), rgba(5, 11, 20, .91)) !important;
    box-shadow: inset 0 0 24px rgba(45, 66, 121, .08) !important;
    backdrop-filter: blur(8px);
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article {
    position: relative !important;
    min-height: 54px !important;
    padding: 0 22px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article:first-child {
    padding-left: 2px !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article:last-child {
    padding-right: 2px !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    bottom: 3px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(111, 124, 168, .58), transparent);
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference .benefit-icon--plain {
    width: 40px !important;
    height: 40px !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference .benefit-icon--plain svg {
    width: 38px !important;
    height: 38px !important;
    stroke-width: 2.2 !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference strong {
    font-size: 12.5px !important;
    line-height: 1.18 !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference small {
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.34 !important;
    color: #bbb7c5 !important;
  }
}

@media (min-width: 850px) and (max-width: 1199px) {
  .hero.hero--studio.hero-stage .hero-benefits--reference {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 82px !important;
    padding: 14px 20px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: center !important;
    border: 1px solid rgba(78, 102, 157, .46) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 22% 0%, rgba(71, 50, 143, .11), transparent 34%),
      linear-gradient(145deg, rgba(7, 13, 24, .92), rgba(5, 11, 20, .91)) !important;
    box-shadow: inset 0 0 24px rgba(45, 66, 121, .08) !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article {
    position: relative !important;
    min-height: 54px !important;
    padding: 0 22px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article:first-child { padding-left: 2px !important; }
  .hero.hero--studio.hero-stage .hero-benefits--reference article:last-child { padding-right: 2px !important; }

  .hero.hero--studio.hero-stage .hero-benefits--reference article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    bottom: 3px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(111, 124, 168, .58), transparent);
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference .benefit-icon--plain {
    width: 40px !important;
    height: 40px !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference .benefit-icon--plain svg {
    width: 38px !important;
    height: 38px !important;
    stroke-width: 2.2 !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference strong {
    font-size: 12.5px !important;
    line-height: 1.18 !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference small {
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.34 !important;
    color: #bbb7c5 !important;
  }
}

/* Mobile keeps the V34 flow, but uses the same framed visual language. */
@media (max-width: 849px) {
  .hero.hero--studio.hero-stage .hero-benefits--reference {
    padding: 16px !important;
    gap: 0 !important;
    border: 1px solid rgba(78, 102, 157, .46) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(7, 13, 24, .94), rgba(5, 11, 20, .93)) !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference article {
    position: relative !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    align-items: center !important;
  }

  .hero.hero--studio.hero-stage .hero-benefits--reference .benefit-icon--plain,
  .hero.hero--studio.hero-stage .hero-benefits--reference .benefit-icon--plain svg {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Compact workflow directly below the Hero, matching the supplied reference. */
.how-compact {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px clamp(8px, 2vw, 30px) 34px !important;
  border-top: 1px solid rgba(122, 58, 187, .22) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 30, 132, .16), transparent 32%),
    linear-gradient(90deg, #080710, #07101f 52%, #070c18) !important;
}

.section-heading--compact {
  margin: 0 auto 6px !important;
}

.section-heading--compact h2 {
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #ec8cff, #bd5bff 58%, #4bcfff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.steps-grid--reference {
  width: min(1440px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.steps-grid--reference .step-card--reference {
  min-width: 0 !important;
  min-height: 154px !important;
  padding: 12px 9px 11px !important;
  border-radius: 10px !important;
  border-color: rgba(76, 86, 139, .48) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(64, 42, 123, .18), transparent 47%),
    linear-gradient(150deg, rgba(12, 15, 29, .98), rgba(7, 12, 22, .98)) !important;
}

.steps-grid--reference .step-card--reference:not(:last-child)::after {
  top: 49% !important;
  right: -13px !important;
  width: 14px !important;
  background: repeating-linear-gradient(90deg, rgba(132, 69, 218, .86) 0 3px, transparent 3px 6px) !important;
}

.step-number--circle {
  top: 10px !important;
  left: 10px !important;
  width: 21px !important;
  height: 21px !important;
}

.step-icon-reference {
  width: 50px !important;
  height: 50px !important;
  margin: 2px 0 8px !important;
}

.step-icon-reference svg {
  width: 46px !important;
  height: 46px !important;
  stroke-width: 2.15 !important;
}

.steps-grid--reference .step-card--reference h3 {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
}

.steps-grid--reference .step-card--reference p {
  font-size: 9.5px !important;
  line-height: 1.38 !important;
}

@media (min-width: 850px) and (max-width: 1199px) {
  .how-compact {
    padding-inline: 7px !important;
  }

  .steps-grid--reference {
    gap: 10px !important;
  }

  .steps-grid--reference .step-card--reference {
    min-height: 150px !important;
    padding-inline: 7px !important;
  }

  .steps-grid--reference .step-card--reference h3 {
    font-size: 10.8px !important;
  }

  .steps-grid--reference .step-card--reference p {
    font-size: 8.8px !important;
  }
}

@media (max-width: 849px) {
  .how-compact {
    padding: 22px clamp(14px, 4vw, 24px) 38px !important;
  }

  .section-heading--compact {
    margin-bottom: 14px !important;
  }

  .steps-grid--reference {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .steps-grid--reference .step-card--reference {
    min-height: 164px !important;
  }

  .steps-grid--reference .step-card--reference:not(:last-child)::after {
    display: none !important;
  }

  .steps-grid--reference .step-card--reference:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 520px) {
  .steps-grid--reference {
    grid-template-columns: 1fr !important;
  }

  .steps-grid--reference .step-card--reference:last-child {
    grid-column: auto !important;
  }
}

/* V35 workflow grid reset: neutralize historical V21/V22 card spans. */
@media (min-width: 850px) {
  .steps-grid--reference .step-card--reference,
  .steps-grid--reference .step-card--reference:nth-child(7) {
    grid-column: auto !important;
    width: auto !important;
    justify-self: stretch !important;
  }

  .steps-grid--reference .step-card--reference:not(:last-child)::after {
    display: block !important;
  }
}


/* =========================================================
   V36 — HERO CTA CLEANUP + PRODUCT HIGHLIGHTS BELOW HERO
   Built on locked V34/V35 scaled-scene behaviour.
   The Hero stage dimensions, scaling logic and breakpoints remain unchanged.
   ========================================================= */

/* Product-highlight bar now lives in normal document flow below Hero. */
.post-hero-benefits-wrap {
  width: 100%;
  margin: 0;
  padding: 12px clamp(8px, 2vw, 30px) 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 30, 132, .12), transparent 32%),
    linear-gradient(90deg, #080710, #07101f 52%, #070c18);
}

.post-hero-benefits {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: center !important;
  border: 1px solid rgba(78, 102, 157, .46) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(71, 50, 143, .11), transparent 34%),
    linear-gradient(145deg, rgba(7, 13, 24, .94), rgba(5, 11, 20, .93)) !important;
  box-shadow: inset 0 0 24px rgba(45, 66, 121, .08) !important;
  backdrop-filter: blur(8px);
}

.post-hero-benefits article {
  position: relative !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
}

.post-hero-benefits article:first-child {
  padding-left: 2px !important;
}

.post-hero-benefits article:last-child {
  padding-right: 2px !important;
}

.post-hero-benefits article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(111, 124, 168, .58), transparent);
}

.post-hero-benefits .benefit-icon--plain,
.post-hero-benefits .benefit-icon--plain svg {
  width: 40px !important;
  height: 40px !important;
}

.post-hero-benefits .benefit-icon--plain svg {
  stroke-width: 2.2 !important;
}

.post-hero-benefits strong {
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.18 !important;
}

.post-hero-benefits small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  line-height: 1.34 !important;
  color: #bbb7c5 !important;
}

@media (max-width: 999px) {
  .post-hero-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 0 !important;
  }

  .post-hero-benefits article {
    min-height: 68px !important;
    padding: 8px 18px !important;
  }

  .post-hero-benefits article:nth-child(2)::after {
    display: none;
  }

  .post-hero-benefits article:nth-child(-n+2) {
    border-bottom: 1px solid rgba(111, 124, 168, .28);
  }
}

@media (max-width: 599px) {
  .post-hero-benefits-wrap {
    padding-inline: 14px;
  }

  .post-hero-benefits {
    grid-template-columns: 1fr !important;
    padding: 8px 14px !important;
  }

  .post-hero-benefits article {
    min-height: 66px !important;
    padding: 10px 4px !important;
  }

  .post-hero-benefits article:not(:last-child) {
    border-bottom: 1px solid rgba(111, 124, 168, .28);
  }

  .post-hero-benefits article::after {
    display: none !important;
  }
}


/* =========================================================
   V37 — HERO CONTENT ORDER + SPACING ONLY
   Layout reference copied without changing V34 scaling logic:
   badge → headline → description → CTA → capability chips.
   ========================================================= */


/* =========================================================
   V38 — APPROVED HERO LEFT-SIDE LAYOUT
   Scope locked to the left Hero copy only.
   V34 Hero scaling, right-side artwork, header, the strip below
   Hero and all following sections remain unchanged.
   ========================================================= */

/* Preserve the approved three-line headline while the V34 desktop scene scales. */
@media (min-width: 850px) {
  .hero.hero--studio.hero-stage h1 > span {
    display: block;
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .hero.hero--studio.hero-stage .hero-copy--studio {
    width: 43% !important;
    max-width: 640px !important;
  }

  .hero.hero--studio.hero-stage .eyebrow {
    margin: 0 0 24px !important;
  }

  .hero.hero--studio.hero-stage h1 {
    max-width: 640px !important;
    margin: 0 0 30px !important;
    font-size: clamp(48px, 3.65vw, 56px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.055em !important;
  }

  .hero.hero--studio.hero-stage .hero-lead {
    max-width: 545px !important;
    margin: 0 0 42px !important;
    font-size: clamp(15px, 1.04vw, 16.5px) !important;
    line-height: 1.5 !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    margin: 0 0 22px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    width: min(100%, 570px) !important;
    max-width: 570px !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities > span {
    min-height: 50px !important;
    padding: 7px 5px !important;
  }
}

/* The 1200 × 540 V34 scene remains fixed and is still scaled only by script.js. */
@media (min-width: 850px) and (max-width: 1199px) {
  .hero.hero--studio.hero-stage .hero-copy--studio {
    width: 520px !important;
    max-width: 520px !important;
  }

  .hero.hero--studio.hero-stage .eyebrow {
    display: inline-flex !important;
    margin: 0 0 24px !important;
  }

  .hero.hero--studio.hero-stage h1 {
    width: 520px !important;
    max-width: 520px !important;
    margin: 0 0 28px !important;
    font-size: 46px !important;
    line-height: 1.01 !important;
    letter-spacing: -.055em !important;
  }

  .hero.hero--studio.hero-stage .hero-lead {
    width: 495px !important;
    max-width: 495px !important;
    margin: 0 0 40px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    margin: 0 0 22px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    width: 520px !important;
    max-width: 520px !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities > span {
    min-height: 50px !important;
    padding-block: 7px !important;
  }
}

@media (max-width: 849px) {
  .hero.hero--studio.hero-stage .eyebrow {
    margin-bottom: 24px !important;
  }

  .hero.hero--studio.hero-stage h1 {
    margin-bottom: 30px !important;
    font-size: clamp(42px, 9vw, 62px) !important;
    line-height: 1.01 !important;
  }

  .hero.hero--studio.hero-stage h1 > span {
    display: inline;
    white-space: normal;
  }

  .hero.hero--studio.hero-stage h1 > span + span::before {
    content: " ";
  }

  .hero.hero--studio.hero-stage .hero-lead {
    margin-bottom: 38px !important;
  }

  .hero.hero--studio.hero-stage .hero-actions {
    margin-bottom: 22px !important;
  }

  .hero.hero--studio.hero-stage .hero-capabilities {
    margin-bottom: 30px !important;
  }
}

/* =========================================================
   V39 — EVEN HERO VERTICAL RHYTHM
   The complete left-side Hero stack is distributed as one
   balanced composition. The top and bottom breathing room are
   equal, and every gap between the five content groups is equal.
   V34 scaling and all non-left-Hero elements remain untouched.
   ========================================================= */

@media (min-width: 850px) {
  .hero.hero--studio.hero-stage .hero-copy--studio {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
    top: 2.5px !important;
  }

  .hero.hero--studio.hero-stage .eyebrow,
  .hero.hero--studio.hero-stage h1,
  .hero.hero--studio.hero-stage .hero-lead,
  .hero.hero--studio.hero-stage .hero-actions,
  .hero.hero--studio.hero-stage .hero-capabilities {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


@media (max-width: 849px) {
  .hero.hero--studio.hero-stage .hero-copy--studio {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding-bottom: clamp(28px, 5vw, 40px) !important;
  }

  .hero.hero--studio.hero-stage .eyebrow,
  .hero.hero--studio.hero-stage h1,
  .hero.hero--studio.hero-stage .hero-lead,
  .hero.hero--studio.hero-stage .hero-actions,
  .hero.hero--studio.hero-stage .hero-capabilities {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   V40 — INTERACTIVE CARD HOVER GLOW
   Adds a restrained desktop-only motion and neon hover state
   to the main content cards. Hero, layout, responsive rules,
   colours and JavaScript remain unchanged.
   ========================================================= */

.step-card,
.feature-card,
.audience-card,
.price-card {
  isolation: isolate;
  translate: 0 0;
  will-change: translate;
  transition:
    opacity .75s ease,
    transform .75s ease,
    translate .28s cubic-bezier(.2, .72, .24, 1),
    border-color .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.step-card::before,
.feature-card::before,
.audience-card::before,
.price-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    135deg,
    rgba(184, 83, 255, .96) 0%,
    rgba(124, 89, 255, .84) 52%,
    rgba(42, 210, 255, .88) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .28s ease;
}

.step-card .step-icon-reference,
.feature-card .feature-icon,
.audience-card .audience-side-icon,
.price-card .popular-badge {
  transition:
    transform .28s cubic-bezier(.2, .72, .24, 1),
    filter .28s ease,
    box-shadow .28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .step-card.reveal.is-visible:hover,
  .feature-card.reveal.is-visible:hover,
  .audience-card.reveal.is-visible:hover,
  .price-card.reveal.is-visible:hover {
    translate: 0 -6px;
    border-color: rgba(153, 91, 255, .72);
    box-shadow:
      0 24px 52px rgba(82, 35, 151, .30),
      0 8px 26px rgba(35, 136, 190, .14),
      0 0 34px rgba(151, 72, 255, .16);
    filter: brightness(1.035);
  }

  .step-card.reveal.is-visible:hover::before,
  .feature-card.reveal.is-visible:hover::before,
  .audience-card.reveal.is-visible:hover::before,
  .price-card.reveal.is-visible:hover::before {
    opacity: 1;
  }

  .step-card.reveal.is-visible:hover .step-icon-reference,
  .feature-card.reveal.is-visible:hover .feature-icon,
  .audience-card.reveal.is-visible:hover .audience-side-icon {
    transform: translateY(-2px) scale(1.035);
    filter: brightness(1.12) saturate(1.08);
  }

  .feature-card.reveal.is-visible:hover .feature-icon,
  .audience-card.reveal.is-visible:hover .audience-side-icon {
    box-shadow:
      inset 0 0 22px rgba(124, 66, 211, .18),
      0 0 24px rgba(153, 72, 255, .20);
  }

  .price-card--featured.reveal.is-visible:hover {
    box-shadow:
      0 34px 72px rgba(105, 42, 184, .38),
      0 10px 30px rgba(33, 153, 206, .16),
      0 0 40px rgba(158, 75, 255, .20);
  }

  .price-card--featured.reveal.is-visible:hover .popular-badge {
    transform: translateX(-50%) translateY(-2px) scale(1.025);
    filter: brightness(1.1) saturate(1.06);
    box-shadow: 0 0 24px rgba(124, 84, 255, .36);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-card,
  .feature-card,
  .audience-card,
  .price-card,
  .step-card .step-icon-reference,
  .feature-card .feature-icon,
  .audience-card .audience-side-icon,
  .price-card .popular-badge {
    transition-duration: .01ms !important;
  }

  .step-card.reveal.is-visible:hover,
  .feature-card.reveal.is-visible:hover,
  .audience-card.reveal.is-visible:hover,
  .price-card.reveal.is-visible:hover {
    translate: 0 0 !important;
  }
}

/* =========================================================
   V41 — PRICING HOVER LAYER + BUTTON FEEDBACK FIX
   Keeps the Most Popular badge above the animated card border
   and adds clear, polished hover feedback to pricing buttons.
   ========================================================= */

/* The animated ::before border belongs below the badge. */
.price-card .popular-badge {
  z-index: 6;
  isolation: isolate;
}

/* Keep pricing controls above the decorative glow layer. */
.price-card .button {
  position: relative;
  z-index: 4;
  transition:
    transform .22s cubic-bezier(.2, .72, .24, 1),
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .price-card .button--outline:hover,
  .price-card .button--outline:focus-visible {
    color: #0a0b12;
    background: rgba(255, 255, 255, .97);
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
      0 12px 28px rgba(109, 71, 194, .28),
      0 0 22px rgba(255, 255, 255, .16);
    filter: brightness(1.04);
    transform: translateY(-2px);
  }

  .price-card .button--primary:hover,
  .price-card .button--primary:focus-visible {
    border-color: rgba(113, 224, 255, .55);
    box-shadow:
      0 16px 36px rgba(127, 64, 230, .42),
      0 0 28px rgba(52, 181, 255, .26);
    filter: brightness(1.10) saturate(1.08);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-card .button {
    transition-duration: .01ms !important;
  }

  .price-card .button:hover,
  .price-card .button:focus-visible {
    transform: none !important;
  }
}

/* =========================================================
   V42 — MOVING FROM-IDEA-TO-MIDI MARQUEE
   Replaces the static product-highlight bar above 7-Step Workflow.
   Hero, workflow cards, layout scaling and JavaScript remain unchanged.
   ========================================================= */

.post-hero-marquee {
  width: 100%;
  min-height: 118px;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(111, 70, 161, .20);
  border-bottom: 1px solid rgba(59, 109, 145, .18);
  background:
    radial-gradient(circle at 18% 50%, rgba(108, 31, 133, .11), transparent 34%),
    radial-gradient(circle at 82% 50%, rgba(17, 85, 112, .10), transparent 34%),
    linear-gradient(90deg, #07070d, #0b0913 45%, #071017);
  color: rgba(225, 211, 240, .29);
  font-size: clamp(23px, 2.35vw, 36px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
}

.post-hero-marquee .workflow-track {
  width: max-content;
  display: flex;
  flex: 0 0 auto;
  animation: workflow-marquee 34s linear infinite;
  will-change: transform;
}

.post-hero-marquee .workflow-group {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 34px clamp(42px, 5.4vw, 84px) 34px 0;
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.8vw, 48px);
}

.post-hero-marquee span {
  flex: 0 0 auto;
  text-shadow: 0 0 22px rgba(149, 72, 218, .035);
}

.post-hero-marquee i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: rgba(172, 76, 232, .50);
  box-shadow: 0 0 16px rgba(167, 69, 237, .20);
}

@media (hover: hover) and (pointer: fine) {
  .post-hero-marquee:hover .workflow-track {
    animation-play-state: paused;
  }
}

@media (max-width: 760px) {
  .post-hero-marquee {
    min-height: 92px;
    font-size: clamp(18px, 5vw, 24px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  .post-hero-marquee .workflow-track {
    animation-duration: 27s;
  }

  .post-hero-marquee .workflow-group {
    padding: 26px 44px 26px 0;
    gap: 25px;
  }

  .post-hero-marquee i {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-hero-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .post-hero-marquee .workflow-track {
    animation: none !important;
  }

  .post-hero-marquee .workflow-group[aria-hidden="true"] {
    display: none;
  }
}

/* =========================================================
   V43 — NEW HERO ARTWORK + MORE BREATHING ROOM
   Replaces the Hero artwork with the approved updated product
   visual and gives the balanced V39 left-side composition more
   vertical room on desktop. V34 medium-screen scaling, the V42
   marquee and every section below remain unchanged.
   ========================================================= */

@media (min-width: 1200px) {
  .hero.hero--studio.hero-stage {
    height: clamp(540px, 42vw, 660px) !important;
    max-height: 660px !important;
    padding-top: clamp(24px, 2vw, 34px) !important;
    padding-bottom: clamp(26px, 2.25vw, 38px) !important;
    padding-left: clamp(42px, 3.8vw, 72px) !important;
    padding-right: clamp(42px, 3.8vw, 72px) !important;
  }

  .hero.hero--studio.hero-stage .hero-copy--studio {
    top: 0 !important;
  }
}

@media (max-width: 849px) {
  .hero.hero--studio.hero-stage .hero-copy--studio {
    gap: 28px !important;
    padding-bottom: clamp(34px, 6vw, 48px) !important;
  }
}

/* =========================================================
   V44 — SPACED POST-HERO MARQUEE
   Hero remains pixel-identical to V43. Only the transition below
   Hero is refined: a slimmer marquee with clear breathing room
   above it and before the 7-Step Workflow section.
   ========================================================= */

.post-hero-marquee {
  min-height: 86px;
  margin: 28px 0 24px;
}

.post-hero-marquee .workflow-group {
  padding-top: 22px;
  padding-bottom: 22px;
}

@media (max-width: 760px) {
  .post-hero-marquee {
    min-height: 70px;
    margin-top: 18px;
    margin-bottom: 20px;
  }

  .post-hero-marquee .workflow-group {
    padding-top: 17px;
    padding-bottom: 17px;
  }
}

/* =========================================================
   V45 — EXPANDED HERO / MARQUEE / WORKFLOW SPACING
   The V44 marquee itself remains unchanged. Only the two
   transition gaps are increased by exactly 20px on desktop:
   Hero → marquee: 28px → 48px
   Marquee → 7-Step Workflow section: 24px → 44px
   ========================================================= */

.post-hero-marquee {
  margin-top: 48px;
  margin-bottom: 44px;
}

@media (max-width: 760px) {
  .post-hero-marquee {
    margin-top: 38px;
    margin-bottom: 40px;
  }
}

/* =========================================================
   V46 — VALUE ASSURANCE STRIP AFTER FOR EVERY MUSICIAN
   Four concise product-value messages placed between the
   audience and pricing sections. HTML/CSS only; responsive.
   ========================================================= */

.value-assurance-wrap {
  width: min(var(--container), calc(100% - 64px));
  margin: clamp(-56px, -4vw, -34px) auto 0;
  position: relative;
  z-index: 2;
}

.value-assurance-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 clamp(18px, 2vw, 32px);
  border: 1px solid rgba(93, 105, 191, .24);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(13, 10, 28, .94), rgba(6, 15, 25, .96)),
    rgba(7, 9, 17, .96);
  box-shadow:
    0 20px 70px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .025);
  overflow: hidden;
}

.value-assurance-item {
  min-width: 0;
  min-height: 126px;
  padding: 24px clamp(18px, 2.2vw, 34px);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  position: relative;
}

.value-assurance-item + .value-assurance-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  width: 1px;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(133, 92, 220, .32), transparent);
}

.value-assurance-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(177, 82, 255, .42);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(78, 34, 125, .32), rgba(17, 28, 58, .52));
  box-shadow: 0 0 26px rgba(144, 62, 225, .13);
}

.value-assurance-item:nth-child(even) .value-assurance-icon {
  border-color: rgba(74, 119, 255, .40);
  background: linear-gradient(145deg, rgba(55, 43, 132, .30), rgba(17, 37, 64, .52));
}

.value-assurance-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: #c767ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(190, 82, 255, .30));
}

.value-assurance-item:nth-child(even) .value-assurance-icon svg {
  stroke: #6a7dff;
}

.value-assurance-item h3 {
  margin: 0 0 8px;
  color: #f5f1fb;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.28;
  letter-spacing: -.01em;
}

.value-assurance-item p {
  margin: 0;
  color: #a8a5b2;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .value-assurance-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-assurance-item:nth-child(3)::before {
    display: none;
  }

  .value-assurance-item:nth-child(n+3)::after {
    content: "";
    position: absolute;
    left: 12%;
    top: 0;
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(133, 92, 220, .26), transparent);
  }
}

@media (max-width: 620px) {
  .value-assurance-wrap {
    width: calc(100% - 36px);
    margin-top: -28px;
  }

  .value-assurance-bar {
    grid-template-columns: 1fr;
    padding: 8px 18px;
  }

  .value-assurance-item {
    min-height: 102px;
    padding: 20px 4px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
  }

  .value-assurance-item + .value-assurance-item::before {
    display: none;
  }

  .value-assurance-item:nth-child(n+2)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(133, 92, 220, .28), transparent);
  }

  .value-assurance-icon {
    width: 48px;
    height: 48px;
  }

  .value-assurance-item h3 {
    font-size: 15px;
  }

  .value-assurance-item p {
    font-size: 13px;
  }
}

/* V47 header/footer refresh */
.site-footer {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  padding: 56px 0 34px;
  display: block;
  color: #9996a3;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(138, 73, 191, .14);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-weight: 700;
}

.footer-brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.footer-brand strong {
  font-size: 18px;
  font-weight: 800;
}

.footer-brand small {
  font-size: 12px;
  letter-spacing: .18em;
  color: #9c97a9;
}

.footer-cta {
  white-space: nowrap;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 32px;
}

.footer-column h3 {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e8e6ee;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: #9996a3;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
}

.site-footer > p {
  margin: 30px 0 0;
  padding-top: 30px;
  text-align: center;
  border-top: 1px solid rgba(138, 73, 191, .14);
  font-size: 13px;
}

@media (max-width: 900px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .site-footer {
    width: min(var(--container), calc(100% - 40px));
    padding: 44px 0 30px;
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-top {
    padding-bottom: 24px;
  }

  .footer-brand strong {
    font-size: 17px;
  }

  .footer-cta {
    width: 100%;
    justify-content: center;
  }
}

/* V48 linked subpages */
.subpage-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(139, 62, 211, .12), transparent 28rem),
    radial-gradient(circle at 85% 30%, rgba(23, 152, 223, .08), transparent 32rem),
    #05060b;
}

.subpage-main {
  min-height: 70vh;
  padding-top: 118px;
}

.subpage-hero {
  width: min(1040px, calc(100% - 64px));
  margin: 0 auto;
  padding: 94px 0 72px;
  text-align: center;
}

.subpage-hero h1 {
  max-width: 920px;
  margin: 22px auto 24px;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -.055em;
  background: linear-gradient(100deg, #f6dcff, #c46cff 46%, #37a9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subpage-hero > p {
  max-width: 760px;
  margin: 0 auto;
  color: #aaa7b2;
  font-size: 19px;
  line-height: 1.7;
}

.subpage-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.subpage-content {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto 90px;
  padding: 54px;
  border: 1px solid rgba(146, 69, 210, .18);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(17, 14, 28, .9), rgba(5, 10, 18, .94));
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

.subpage-heading {
  max-width: 720px;
  margin-bottom: 34px;
}

.subpage-heading h2 {
  margin: 14px 0 10px;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -.04em;
}

.subpage-heading p {
  margin: 0;
  color: #9996a3;
  line-height: 1.65;
}

.subpage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.subpage-card {
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(145, 72, 204, .24);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(21, 16, 31, .88), rgba(7, 12, 21, .92));
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.subpage-card:hover {
  transform: translateY(-5px);
  border-color: rgba(93, 173, 255, .7);
  box-shadow: 0 20px 52px rgba(91, 44, 180, .26);
}

.subpage-card > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(177, 93, 255, .55);
  border-radius: 50%;
  color: #c982ff;
  font-size: 12px;
  font-weight: 800;
}

.subpage-card h2 {
  margin: 22px 0 12px;
  font-size: 21px;
}

.subpage-card p,
.subpage-anchor-block p {
  margin: 0;
  color: #9895a1;
  line-height: 1.65;
}

.subpage-anchor-block {
  margin-top: 24px;
  padding: 30px;
  border: 1px solid rgba(46, 158, 226, .22);
  border-radius: 20px;
  background: rgba(6, 12, 21, .72);
  scroll-margin-top: 130px;
}

.subpage-anchor-block h2 {
  margin: 0 0 10px;
}

@media (max-width: 980px) {
  .subpage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subpage-content { padding: 38px; }
}

@media (max-width: 640px) {
  .subpage-main { padding-top: 92px; }
  .subpage-hero { width: calc(100% - 40px); padding: 68px 0 52px; }
  .subpage-hero > p { font-size: 17px; }
  .subpage-content { width: calc(100% - 40px); padding: 24px; margin-bottom: 60px; }
  .subpage-grid { grid-template-columns: 1fr; }
  .subpage-card { min-height: auto; }
  .subpage-actions { flex-direction: column; }
  .subpage-actions .button { width: 100%; justify-content: center; }
}

/* V49 explicit Home navigation and active page state */
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: #fff;
  position: relative;
}

.main-nav a.active::after,
.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #b647ff, #2ccfff);
  box-shadow: 0 0 12px rgba(150, 78, 255, .65);
}

@media (max-width: 900px) {
  .main-nav a.active::after,
  .main-nav a[aria-current="page"]::after {
    left: 0;
    bottom: -5px;
    transform: none;
  }
}

/* =========================================================
   V52 — PROFESSIONAL TRANSITION RHYTHM
   Requested direction after review:
   - GAP 3 stays as in the good previous version
   - GAP 1 should be smaller than GAP 2
   Recommended hierarchy:
     GAP 1 (Hero -> marquee) = 36px
     GAP 2 (marquee -> workflow) = 48px
     GAP 3 stays larger (unchanged from V49 pattern)
   ========================================================= */

.post-hero-marquee {
  margin-top: 36px !important;   /* GAP 1 */
  margin-bottom: 0 !important;
}

.how-compact {
  padding-top: 48px !important;  /* GAP 2 */
  /* keep original stronger transition below the workflow */
  padding-bottom: 34px !important;
}

/* GAP 3 intentionally untouched in spirit: keep stronger lower separation */
.app-action {
  padding-top: clamp(76px, 7vw, 110px) !important;
}

@media (max-width: 760px) {
  .post-hero-marquee {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }

  .how-compact {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }

  .app-action {
    padding-top: 56px !important;
  }
}

/* =========================================================
   V53 — MARQUEE FLUSH TO HERO
   User request:
   - the moving marquee should sit directly at the bottom of the Hero
   - no gap between Hero and marquee
   - keep the lower spacing rhythm unchanged
   ========================================================= */

.post-hero-marquee {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  .post-hero-marquee {
    margin-top: 0 !important;
  }
}

/* =========================================================
   V54 — FULL FEATURES SUBPAGE
   ========================================================= */
.features-page-main { padding-top: 96px; overflow: hidden; }
.features-page-hero {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(50px, 6vw, 100px);
  padding: 82px 0 72px;
}
.features-page-hero-copy h1 {
  margin: 24px 0 24px;
  max-width: 760px;
  font-size: clamp(48px, 5.2vw, 82px);
  line-height: .98;
  letter-spacing: -.055em;
  background: linear-gradient(105deg, #fae8ff 5%, #d071ff 46%, #4d93ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.features-page-hero-copy > p { max-width: 700px; color: #aaa7b2; font-size: 19px; line-height: 1.7; }
.features-page-hero-visual { position: relative; padding: 12px; border-radius: 26px; border: 1px solid rgba(129,74,207,.45); background: linear-gradient(145deg,rgba(62,27,91,.18),rgba(8,15,25,.9)); box-shadow: 0 35px 90px rgba(0,0,0,.45), 0 0 55px rgba(114,48,177,.16); }
.features-page-hero-visual::before { content:""; position:absolute; inset:14% 5% -8%; background:radial-gradient(circle,rgba(110,54,199,.35),transparent 66%); filter:blur(35px); z-index:-1; }
.features-page-hero-visual img { display:block; width:100%; border-radius:17px; }
.features-hero-proof { margin-top: 34px; display:flex; flex-wrap:wrap; gap:10px; }
.features-hero-proof span { padding:10px 13px; border:1px solid rgba(92,81,145,.42); border-radius:10px; background:rgba(11,13,24,.72); color:#c6c2cf; font-size:12px; font-weight:600; }

.feature-control-statement,
.connected-project-section,
.control-depth-section,
.export-package-section,
.feature-comparison-section,
.features-faq-section,
.features-final-cta { width:min(var(--container), calc(100% - 64px)); margin:0 auto; }
.feature-control-statement { padding:100px clamp(34px,6vw,92px); text-align:center; border:1px solid rgba(124,66,180,.25); border-radius:30px; background:radial-gradient(circle at 50% 0,rgba(122,46,171,.2),transparent 38%),linear-gradient(145deg,#0c0a14,#080c14); }
.feature-control-statement h2,.features-section-heading h2,.export-package-copy h2,.features-final-cta h2 { margin:20px 0; font-size:clamp(38px,4.5vw,66px); line-height:1.02; letter-spacing:-.045em; }
.feature-control-statement > p { max-width:880px; margin:0 auto; color:#aaa7b2; font-size:18px; line-height:1.7; }
.control-statement-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }
.control-statement-grid article { padding:25px 20px; border:1px solid rgba(92,79,141,.35); border-radius:16px; background:rgba(9,12,22,.78); }
.control-statement-grid strong { display:block; color:#fff; font-size:19px; margin-bottom:8px; }
.control-statement-grid span { color:#9f9ba9; font-size:13px; line-height:1.5; }

.features-deep-dive { padding:130px 0 40px; }
.features-section-heading { width:min(920px,calc(100% - 40px)); margin:0 auto 70px; text-align:center; }
.features-section-heading p { color:#aaa7b2; font-size:18px; line-height:1.7; }
.feature-detail { width:min(var(--container),calc(100% - 64px)); margin:0 auto 42px; display:grid; grid-template-columns:1fr 1.12fr; min-height:520px; border:1px solid rgba(88,71,139,.34); border-radius:28px; overflow:hidden; background:linear-gradient(145deg,rgba(13,11,22,.98),rgba(7,13,22,.98)); box-shadow:0 24px 60px rgba(0,0,0,.25); }
.feature-detail--image-left .feature-detail-media { order:-1; }
.feature-detail-copy { padding:clamp(40px,5vw,76px); display:flex; flex-direction:column; justify-content:center; }
.feature-detail-number { color:#b65cff; font-size:13px; font-weight:800; letter-spacing:.18em; }
.feature-detail-copy h3 { margin:16px 0; font-size:clamp(32px,3.3vw,50px); letter-spacing:-.035em; }
.feature-detail-lead { color:#c4c0cb; font-size:18px; line-height:1.65; }
.feature-detail-copy ul { margin:24px 0 28px; padding:0; list-style:none; display:grid; gap:12px; }
.feature-detail-copy li { position:relative; padding-left:24px; color:#9f9ba9; line-height:1.5; }
.feature-detail-copy li::before { content:"✓"; position:absolute; left:0; color:#38d7ff; }
.feature-result { padding:18px 20px; border-left:3px solid #a74fff; background:rgba(104,47,159,.1); border-radius:0 12px 12px 0; }
.feature-result strong,.feature-result span { display:block; }
.feature-result strong { color:#d885ff; font-size:12px; text-transform:uppercase; letter-spacing:.13em; margin-bottom:7px; }
.feature-result span { color:#d3cfda; line-height:1.5; }
.feature-detail-media { min-width:0; display:flex; align-items:center; padding:clamp(22px,3vw,44px); background:radial-gradient(circle at 50% 50%,rgba(79,54,177,.24),transparent 58%),#070b13; }
.feature-detail-media img { width:100%; border-radius:16px; border:1px solid rgba(86,89,151,.42); box-shadow:0 24px 50px rgba(0,0,0,.45); }

.connected-project-section,.control-depth-section,.feature-comparison-section,.features-faq-section { padding:120px 0; }
.connected-project-flow { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; }
.connected-project-flow span { padding:18px 22px; border:1px solid rgba(116,68,190,.46); border-radius:14px; color:#fff; font-weight:700; background:#0b0d18; }
.connected-project-flow i { color:#ac54ff; font-style:normal; font-size:24px; }
.connected-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:45px; }
.connected-benefits article { padding:30px; border:1px solid rgba(86,75,132,.3); border-radius:18px; background:rgba(9,11,20,.72); }
.connected-benefits h3 { margin:0 0 10px; font-size:19px; }
.connected-benefits p { color:#9996a3; line-height:1.6; }
.control-depth-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.control-depth-grid article { padding:50px; border:1px solid rgba(101,74,151,.4); border-radius:24px; background:linear-gradient(145deg,rgba(44,17,67,.35),rgba(7,13,22,.94)); }
.control-depth-grid article:last-child { background:linear-gradient(145deg,rgba(14,40,72,.45),rgba(7,13,22,.94)); }
.control-depth-grid > article > span { color:#c566ff; font-size:12px; letter-spacing:.15em; font-weight:800; }
.control-depth-grid h3 { font-size:30px; margin:18px 0; }
.control-depth-grid p,.control-depth-grid li { color:#a6a2ae; line-height:1.6; }

.export-package-section { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; padding:90px clamp(30px,6vw,90px); border:1px solid rgba(70,99,153,.36); border-radius:30px; background:radial-gradient(circle at 85% 50%,rgba(32,110,152,.18),transparent 36%),#090b13; }
.export-package-copy p { color:#aaa7b2; font-size:17px; line-height:1.7; }
.daw-list { display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 16px; }
.daw-list span { padding:9px 12px; border:1px solid rgba(69,122,171,.38); border-radius:9px; color:#c9c6cf; font-size:12px; }
.export-package-copy small { color:#777481; }
.export-file-tree { margin:0; padding:32px; border:1px solid rgba(125,73,195,.42); border-radius:18px; color:#d9d4e2; background:#05070d; font:600 16px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace; box-shadow:0 0 45px rgba(104,48,183,.12); }
.comparison-table { border:1px solid rgba(103,77,153,.34); border-radius:22px; overflow:hidden; }
.comparison-row { display:grid; grid-template-columns:1fr 1fr; }
.comparison-row span { padding:21px 28px; border-bottom:1px solid rgba(93,72,137,.22); color:#aaa7b2; }
.comparison-row span+span { border-left:1px solid rgba(93,72,137,.22); color:#eeeaf3; background:rgba(88,38,130,.08); }
.comparison-row:last-child span { border-bottom:0; }
.comparison-head { font-weight:800; background:rgba(104,47,159,.18); }
.comparison-head span { color:#fff; }
.features-faq-section details { max-width:960px; margin:0 auto 12px; border:1px solid rgba(91,73,134,.33); border-radius:14px; background:#0a0c14; }
.features-faq-section summary { cursor:pointer; padding:22px 24px; color:#eeeaf2; font-weight:700; }
.features-faq-section details p { margin:0; padding:0 24px 23px; color:#9e9aa6; line-height:1.65; }
.features-final-cta { margin-bottom:90px; padding:100px 30px; text-align:center; border-radius:30px; border:1px solid rgba(133,66,192,.38); background:radial-gradient(circle at 50% 0,rgba(125,45,179,.27),transparent 48%),#090a12; }
.features-final-cta p { max-width:760px; margin:0 auto 34px; color:#aaa7b2; font-size:18px; line-height:1.7; }

@media (max-width:1100px) {
  .features-page-hero { grid-template-columns:1fr; min-height:auto; }
  .features-page-hero-visual { max-width:900px; }
  .feature-detail { grid-template-columns:1fr; }
  .feature-detail--image-left .feature-detail-media { order:0; }
  .feature-detail-media { min-height:360px; }
  .export-package-section { grid-template-columns:1fr; }
}
@media (max-width:800px) {
  .features-page-main { padding-top:82px; }
  .features-page-hero,.feature-detail,.feature-control-statement,.connected-project-section,.control-depth-section,.export-package-section,.feature-comparison-section,.features-faq-section,.features-final-cta { width:calc(100% - 40px); }
  .features-page-hero { padding:58px 0; gap:36px; }
  .features-page-hero-copy h1 { font-size:clamp(44px,12vw,64px); }
  .control-statement-grid,.connected-benefits,.control-depth-grid { grid-template-columns:1fr; }
  .feature-detail-copy { padding:34px 25px; }
  .feature-detail-media { padding:16px; min-height:auto; }
  .connected-project-section,.control-depth-section,.feature-comparison-section,.features-faq-section { padding:80px 0; }
  .export-package-section { padding:48px 24px; }
  .comparison-row span { padding:17px 14px; font-size:13px; }
}
@media (max-width:520px) {
  .features-hero-proof { display:grid; grid-template-columns:1fr 1fr; }
  .feature-control-statement { padding:65px 22px; }
  .connected-project-flow { flex-direction:column; }
  .connected-project-flow i { transform:rotate(90deg); }
  .comparison-row { grid-template-columns:1fr; }
  .comparison-row span+span { border-left:0; border-top:1px solid rgba(93,72,137,.22); }
  .export-file-tree { padding:22px 17px; font-size:13px; overflow:auto; }
}

/* =========================================================
   V55 — REDUCE FEATURES HERO TOP SPACING FROM HEADER
   User request: the gap under the header on features.html is too large.
   ========================================================= */
.features-page-main {
  padding-top: 42px !important;
}

.features-page-hero {
  padding-top: 38px !important;
}

@media (max-width: 760px) {
  .features-page-main {
    padding-top: 34px !important;
  }

  .features-page-hero {
    padding-top: 34px !important;
    padding-bottom: 52px !important;
  }
}

/* =========================================================
   V56 — FULL WORKFLOW SUBPAGE
   ========================================================= */
.workflow-page-main { padding-top: 42px; overflow: hidden; }
.workflow-page-hero {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  min-height: 650px;
  padding: 42px 0 68px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr);
  align-items: center;
  gap: clamp(48px,6vw,96px);
}
.workflow-page-hero-copy h1 {
  margin: 22px 0 24px;
  max-width: 760px;
  font-size: clamp(50px,5.1vw,82px);
  line-height: .98;
  letter-spacing: -.055em;
  background: linear-gradient(105deg,#fae8ff 5%,#d071ff 47%,#4d93ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.workflow-page-hero-copy > p { max-width:690px;color:#aaa7b2;font-size:19px;line-height:1.7; }
.workflow-page-hero-visual { position:relative;padding:12px;border:1px solid rgba(129,74,207,.45);border-radius:26px;background:linear-gradient(145deg,rgba(62,27,91,.18),rgba(8,15,25,.9));box-shadow:0 35px 90px rgba(0,0,0,.45),0 0 55px rgba(114,48,177,.16); }
.workflow-page-hero-visual::before { content:"";position:absolute;inset:14% 5% -8%;background:radial-gradient(circle,rgba(110,54,199,.34),transparent 66%);filter:blur(35px);z-index:-1; }
.workflow-page-hero-visual img { display:block;width:100%;border-radius:17px; }
.workflow-hero-proof { margin-top:32px;display:flex;flex-wrap:wrap;gap:10px; }
.workflow-hero-proof span { padding:10px 13px;border:1px solid rgba(92,81,145,.42);border-radius:10px;background:rgba(11,13,24,.72);color:#c6c2cf;font-size:12px;font-weight:600; }

.workflow-intro-statement,
.workflow-connected-project,
.workflow-example-project,
.workflow-output-section,
.workflow-faq-section,
.workflow-seven-section {
  width:min(var(--container),calc(100% - 64px));
  margin:0 auto;
}
.workflow-intro-statement { padding:92px clamp(28px,5vw,72px);text-align:center;border:1px solid rgba(94,66,142,.28);border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(117,46,165,.18),transparent 42%),linear-gradient(145deg,rgba(15,10,25,.96),rgba(7,12,21,.96)); }
.workflow-intro-statement h2 { max-width:980px;margin:18px auto;font-size:clamp(38px,4vw,64px);line-height:1.04;letter-spacing:-.045em;color:#f1eaf8; }
.workflow-intro-statement > p { max-width:780px;margin:0 auto;color:#aaa7b2;font-size:18px;line-height:1.7; }
.workflow-mode-grid { max-width:900px;margin:42px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left; }
.workflow-mode-grid article { padding:26px;border:1px solid rgba(105,77,156,.36);border-radius:18px;background:rgba(8,11,20,.72); }
.workflow-mode-grid strong { font-size:20px;color:#fff; }
.workflow-mode-grid p { margin:10px 0 0;color:#aaa7b2;line-height:1.6; }

.workflow-seven-section { padding:120px 0 20px; }
.workflow-seven-section .subpage-heading { max-width:900px;margin:0 auto 64px;text-align:center; }
.workflow-timeline { display:grid;gap:28px; }
.workflow-step-detail { display:grid;grid-template-columns:minmax(0,.84fr) minmax(520px,1.16fr);align-items:center;gap:clamp(42px,6vw,88px);padding:42px;border:1px solid rgba(83,65,126,.28);border-radius:28px;background:radial-gradient(circle at 0 0,rgba(113,48,163,.12),transparent 35%),linear-gradient(145deg,rgba(11,11,20,.96),rgba(7,12,21,.96)); }
.workflow-step-detail--reverse .workflow-step-copy { order:2; }
.workflow-step-detail--reverse .workflow-step-visual { order:1; }
.workflow-step-index { display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;margin-bottom:18px;border:1px solid rgba(185,91,255,.6);border-radius:50%;color:#d989ff;font-weight:800;box-shadow:0 0 24px rgba(164,69,231,.14); }
.workflow-step-copy h3 { margin:16px 0;font-size:clamp(34px,3vw,52px);line-height:1.05;letter-spacing:-.04em;color:#f3edf8; }
.workflow-step-copy > p { color:#aaa7b2;font-size:17px;line-height:1.7; }
.workflow-step-copy ul { margin:24px 0;padding:0;list-style:none;display:grid;gap:11px;color:#c9c5d0; }
.workflow-step-copy li::before { content:"✓";margin-right:10px;color:#39ccff; }
.workflow-result { display:block;margin-top:25px;padding:16px 18px;border-left:3px solid #a94bff;border-radius:0 10px 10px 0;background:rgba(94,36,136,.12);color:#e7d7f5;line-height:1.5; }
.workflow-step-visual { position:relative;padding:10px;border:1px solid rgba(76,106,165,.37);border-radius:22px;background:#080b14;box-shadow:0 24px 65px rgba(0,0,0,.38); }
.workflow-step-visual img { display:block;width:100%;border-radius:14px; }
.workflow-step-visual--abstract { min-height:390px;display:grid;place-items:center;background:radial-gradient(circle,rgba(141,58,212,.22),transparent 50%),linear-gradient(145deg,#0c0916,#07111d); }
.mood-orbit { position:relative;width:300px;height:300px;border:1px solid rgba(168,76,232,.4);border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 55px rgba(114,44,170,.16),0 0 50px rgba(39,143,210,.08); }
.mood-orbit::before,.mood-orbit::after { content:"";position:absolute;border:1px solid rgba(62,184,239,.22);border-radius:50%; }
.mood-orbit::before { inset:38px; }.mood-orbit::after { inset:82px; }
.mood-orbit strong { color:#fff;font-size:30px;letter-spacing:.12em; }
.mood-orbit span { position:absolute;padding:9px 12px;border:1px solid rgba(119,80,166,.42);border-radius:10px;background:#0b0e18;color:#c9c4d2;font-size:12px; }
.mood-orbit span:nth-child(1){top:-15px;left:96px}.mood-orbit span:nth-child(2){right:-34px;top:126px}.mood-orbit span:nth-child(3){bottom:-15px;left:113px}.mood-orbit span:nth-child(4){left:-34px;top:126px}

.workflow-connected-project { margin-top:110px;padding:70px;border:1px solid rgba(84,78,145,.32);border-radius:28px;background:radial-gradient(circle at 50% 100%,rgba(26,125,165,.12),transparent 45%),linear-gradient(145deg,#0c0917,#07111b); }
.workflow-connected-project h2 { margin:18px 0;font-size:clamp(38px,4vw,62px);letter-spacing:-.045em;color:#f1eaf8; }
.workflow-connected-project > div:first-child p { max-width:850px;color:#aaa7b2;font-size:18px;line-height:1.7; }
.workflow-connection-map { margin-top:40px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px; }
.workflow-connection-map span { padding:14px 17px;border:1px solid rgba(103,87,163,.42);border-radius:12px;background:rgba(10,12,22,.8);color:#e6e1eb;font-weight:700; }
.workflow-connection-map i { color:#a64ef0;font-style:normal;font-size:22px; }

.workflow-example-project { padding:120px 0 30px; }
.workflow-example-project .subpage-heading { max-width:900px;margin:0 auto 52px;text-align:center; }
.workflow-example-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.workflow-example-grid article { padding:30px;border:1px solid rgba(88,73,141,.32);border-radius:20px;background:linear-gradient(145deg,rgba(17,12,27,.95),rgba(7,13,22,.95)); }
.workflow-example-grid span { color:#b65cff;font-weight:900; }.workflow-example-grid strong { display:block;margin:18px 0 10px;color:#fff;font-size:20px; }.workflow-example-grid p { margin:0;color:#aaa7b2;line-height:1.6; }

.workflow-output-section { margin-top:90px;padding:60px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:60px;border:1px solid rgba(81,73,134,.3);border-radius:28px;background:linear-gradient(145deg,rgba(15,10,24,.96),rgba(6,12,20,.96)); }
.workflow-output-copy h2 { margin:18px 0;font-size:clamp(38px,4vw,62px);line-height:1.04;letter-spacing:-.045em;color:#f3ecf8; }.workflow-output-copy p { color:#aaa7b2;font-size:17px;line-height:1.7; }.workflow-output-copy ul { margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px; }.workflow-output-copy li { padding:12px;border:1px solid rgba(89,78,146,.35);border-radius:10px;background:#0a0d17;color:#cfcad5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.workflow-output-visual { padding:10px;border:1px solid rgba(75,101,158,.38);border-radius:22px;background:#070b13; }.workflow-output-visual img { display:block;width:100%;border-radius:14px; }

.workflow-faq-section { padding:120px 0 40px; }.workflow-faq-section .subpage-heading { text-align:center;margin-bottom:45px; }

@media (max-width:1050px) {
  .workflow-page-hero,.workflow-step-detail,.workflow-output-section { grid-template-columns:1fr; }
  .workflow-step-detail--reverse .workflow-step-copy,.workflow-step-detail--reverse .workflow-step-visual { order:initial; }
  .workflow-page-hero-visual { max-width:900px; }
  .workflow-example-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .workflow-page-main { padding-top:34px; }
  .workflow-page-hero,.workflow-intro-statement,.workflow-connected-project,.workflow-example-project,.workflow-output-section,.workflow-faq-section,.workflow-seven-section { width:calc(100% - 40px); }
  .workflow-page-hero { min-height:auto;padding:34px 0 54px;gap:34px; }
  .workflow-page-hero-copy h1 { font-size:clamp(44px,12vw,64px); }
  .workflow-mode-grid,.workflow-example-grid { grid-template-columns:1fr; }
  .workflow-intro-statement { padding:58px 24px; }
  .workflow-seven-section { padding-top:78px; }
  .workflow-step-detail { padding:26px;gap:30px; }
  .workflow-connected-project,.workflow-output-section { padding:34px 24px; }
  .workflow-output-copy ul { grid-template-columns:1fr; }
  .mood-orbit { width:230px;height:230px; }
  .mood-orbit span:nth-child(1){left:62px}.mood-orbit span:nth-child(2){right:-24px;top:92px}.mood-orbit span:nth-child(3){left:78px}.mood-orbit span:nth-child(4){left:-24px;top:92px}
}

/* =========================================================
   V57 — COMPLETE LINKED SUBPAGES + QUIET FOOTER
   Features content remains unchanged. Shared page system below
   supports Inside the App, Who It's For, Pricing, Early Access,
   FAQ / Support, About / Vision and the legal pages.
   ========================================================= */
.footer-top--brand-only { justify-content: flex-start !important; }
.site-footer--no-cta .footer-top { min-height: auto; }

.expanded-page-main { padding-top: 64px; overflow: hidden; }
.expanded-hero {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  min-height: 580px;
  padding: 54px 0 72px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr);
  align-items: center;
  gap: clamp(48px,6vw,96px);
}
.expanded-hero--centred { grid-template-columns: 1fr; min-height: 440px; text-align: center; }
.expanded-hero--centred > div { max-width: 980px; margin: 0 auto; }
.expanded-hero h1,.legal-hero h1 {
  margin: 22px 0 24px;
  font-size: clamp(48px,5.3vw,82px);
  line-height: .98;
  letter-spacing: -.055em;
  background: linear-gradient(105deg,#fae8ff 5%,#d071ff 48%,#4d93ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.expanded-hero p,.expanded-intro p,.vision-statement p,.future-outlook p,.why-tool-section>div>p { color:#aaa7b2;font-size:18px;line-height:1.72; }
.expanded-hero-media,.panel-tour-item img { border:1px solid rgba(129,74,207,.42);border-radius:24px;background:#090b15;box-shadow:0 30px 85px rgba(0,0,0,.45),0 0 48px rgba(104,45,180,.14); }
.expanded-hero-media { padding:12px; }
.expanded-hero-media img { width:100%;display:block;border-radius:16px; }
.expanded-intro,.vision-statement,.future-outlook {
  width:min(1040px,calc(100% - 64px));margin:0 auto;padding:90px 0;text-align:center;
}
.expanded-intro h2,.vision-statement h2,.future-outlook h2,.why-tool-section h2,.support-section h2,.pricing-principles h2 {
  margin:18px 0 20px;font-size:clamp(38px,4vw,62px);line-height:1.05;letter-spacing:-.045em;color:#f1edf5;
}
.panel-tour { width:min(var(--container),calc(100% - 64px));margin:0 auto;display:grid;gap:28px;padding-bottom:90px; }
.panel-tour-item { display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:center;padding:34px;border:1px solid rgba(101,70,151,.3);border-radius:26px;background:linear-gradient(145deg,rgba(23,15,38,.88),rgba(6,12,23,.94)); }
.panel-tour-item--reverse { grid-template-columns:1.28fr .72fr; }
.panel-tour-item--reverse>div { order:2; }.panel-tour-item--reverse>img { order:1; }
.panel-tour-item>div>span,.audience-detail-grid article>span,.early-access-grid article>span,.vision-principles article>span { color:#b864ff;font-weight:800;letter-spacing:.1em; }
.panel-tour-item h2,.audience-detail-grid h2,.early-access-grid h2,.vision-principles h2 { margin:12px 0;font-size:30px;color:#f4f0f8; }
.panel-tour-item p,.panel-tour-item li,.audience-detail-grid p,.audience-detail-grid li,.early-access-grid p,.vision-principles p { color:#aaa7b2;line-height:1.65; }
.panel-tour-item ul,.audience-detail-grid ul { padding-left:20px; }
.panel-tour-item img { width:100%;padding:8px; }
.expanded-value-grid { width:min(var(--container),calc(100% - 64px));margin:0 auto 90px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.expanded-value-grid article,.early-access-grid article,.vision-principles article,.support-answer-grid article { padding:28px;border:1px solid rgba(91,73,142,.35);border-radius:18px;background:linear-gradient(145deg,rgba(19,13,31,.86),rgba(6,13,23,.9)); }
.expanded-value-grid h3 { margin:0 0 10px;color:#f0edf5; }.expanded-value-grid p { margin:0;color:#9f9ba8;line-height:1.6; }
.expanded-faq { width:min(1100px,calc(100% - 64px));margin:0 auto;padding:70px 0 100px; }
.expanded-final-cta { width:min(var(--container),calc(100% - 64px));margin:0 auto 90px;padding:75px 42px;text-align:center;border:1px solid rgba(133,66,199,.36);border-radius:28px;background:radial-gradient(circle at 50% 100%,rgba(109,46,190,.24),transparent 55%),#080a12; }
.expanded-final-cta h2 { max-width:900px;margin:18px auto 30px;font-size:clamp(38px,4.5vw,68px);line-height:1.04;letter-spacing:-.05em; }

.audience-hero-visual { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.audience-hero-visual>div { min-height:150px;padding:28px;border:1px solid rgba(119,70,184,.4);border-radius:20px;background:linear-gradient(145deg,rgba(53,25,82,.42),rgba(5,15,27,.92));display:flex;flex-direction:column;justify-content:flex-end; }
.audience-hero-visual strong { font-size:23px;color:#f3eef8; }.audience-hero-visual span { margin-top:8px;color:#aaa7b2; }
.audience-detail-grid { width:min(var(--container),calc(100% - 64px));margin:0 auto 90px;display:grid;grid-template-columns:1fr 1fr;gap:22px; }
.audience-detail-grid article { padding:36px;border:1px solid rgba(101,70,151,.34);border-radius:24px;background:linear-gradient(145deg,rgba(27,15,43,.88),rgba(5,13,23,.94)); }
.audience-detail-grid article:last-child { grid-column:1/-1; }.audience-detail-grid strong { display:block;margin-top:20px;color:#d9b5ff; }
.use-case-section,.why-tool-section,.pricing-principles { padding:90px 0; }

.pricing-page-grid { width:min(var(--container),calc(100% - 64px));margin:0 auto 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch; }
.pricing-page-grid article { padding:38px;border:1px solid rgba(103,63,153,.42);border-radius:24px;background:linear-gradient(155deg,rgba(25,14,40,.9),rgba(6,14,24,.96));display:flex;flex-direction:column; }
.pricing-page-grid article.featured { transform:translateY(-12px);border-color:rgba(160,70,244,.8);box-shadow:0 25px 70px rgba(104,45,179,.25); }
.pricing-page-grid span { color:#b967ff;font-size:12px;font-weight:800;letter-spacing:.12em; }.pricing-page-grid h2 { margin:14px 0;font-size:34px; }.pricing-page-grid strong { font-size:28px;background:linear-gradient(90deg,#b768ff,#4f93ff);-webkit-background-clip:text;background-clip:text;color:transparent; }
.pricing-page-grid p,.pricing-page-grid li { color:#aaa7b2;line-height:1.6; }.pricing-page-grid ul { padding-left:20px;margin-bottom:32px; }.pricing-page-grid .button { margin-top:auto; }
.comparison-section { width:min(1200px,calc(100% - 64px));margin:0 auto;padding:80px 0; }
.comparison-table { border:1px solid rgba(99,72,143,.36);border-radius:20px;overflow:hidden; }
.comparison-row { display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:10px;padding:18px 24px;border-bottom:1px solid rgba(99,72,143,.18);color:#aaa7b2; }
.comparison-row:last-child { border-bottom:0; }.comparison-head { background:rgba(94,39,137,.18);color:#f3eff7; }.comparison-row b { font-weight:600;color:#cec8d6; }

.early-access-hero { align-items:start; }.early-signup-panel { margin-top:30px;padding:24px;border:1px solid rgba(121,69,184,.45);border-radius:20px;background:rgba(8,10,19,.8); }
.early-signup-form label { display:block;margin-bottom:10px;color:#ddd7e5;font-weight:700; }.early-signup-form>div { display:grid;grid-template-columns:1fr auto;gap:12px; }.early-signup-form input { min-width:0;padding:14px 16px;border:1px solid rgba(100,75,151,.48);border-radius:10px;background:#070912;color:#fff; }.early-signup-panel small { color:#827e8b; }
.early-access-benefit-stack { display:grid;gap:16px; }.early-access-benefit-stack article { padding:28px;border:1px solid rgba(117,65,178,.38);border-radius:20px;background:linear-gradient(145deg,rgba(35,18,54,.65),rgba(5,14,24,.92)); }.early-access-benefit-stack strong { color:#f3eef8;font-size:22px; }.early-access-benefit-stack p { margin-bottom:0;color:#aaa7b2;line-height:1.6; }
.early-access-grid,.vision-principles { width:min(var(--container),calc(100% - 64px));margin:0 auto 90px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }
.roadmap-section { width:min(var(--container),calc(100% - 64px));margin:0 auto;padding:80px 0; }.roadmap-line { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }.roadmap-line article { padding:26px;border-top:2px solid #9e4eea;background:rgba(14,12,24,.7); }.roadmap-line span { color:#a857ee;font-weight:800; }.roadmap-line strong { display:block;margin:14px 0;color:#eee9f3; }.roadmap-line p { color:#9995a2;line-height:1.55; }

.support-topic-grid { width:min(var(--container),calc(100% - 64px));margin:0 auto 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }.support-topic-grid a { padding:24px;border:1px solid rgba(99,69,151,.36);border-radius:16px;background:rgba(11,12,22,.82); }.support-topic-grid strong { display:block;color:#eeeaf3; }.support-topic-grid span { display:block;margin-top:8px;color:#97939f;font-size:14px; }
.support-section { width:min(1100px,calc(100% - 64px));margin:0 auto;padding:65px 0;border-top:1px solid rgba(106,71,151,.18); }.support-answer-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px; }.support-answer-grid h3 { margin-top:0;color:#f1edf5; }.support-answer-grid p,.support-section>p { color:#aaa7b2;line-height:1.65; }.daw-name-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0; }.daw-name-grid span { padding:18px;text-align:center;border:1px solid rgba(73,111,167,.38);border-radius:12px;color:#d8d3df;background:#080c16; }.support-note { font-size:14px; }

.vision-symbol { min-height:430px;border:1px solid rgba(120,70,184,.4);border-radius:28px;background:radial-gradient(circle,rgba(112,48,188,.25),transparent 55%),#080a12;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }.vision-symbol img { width:180px;filter:drop-shadow(0 0 30px rgba(122,59,215,.5)); }.vision-symbol strong { margin-top:24px;font-size:26px;line-height:1.4; }.vision-principles { grid-template-columns:repeat(3,1fr); }.why-tool-section { width:min(var(--container),calc(100% - 64px));margin:0 auto; }.why-tool-section>.expanded-value-grid { width:100%;margin-top:50px; }

.legal-page-main { padding-top:80px; }.legal-hero,.legal-content { width:min(1000px,calc(100% - 64px));margin:0 auto; }.legal-hero { padding:80px 0 60px; }.legal-hero p,.legal-content p { color:#aaa7b2;line-height:1.7; }.legal-content { padding-bottom:100px; }.legal-content article { padding:30px 0;border-top:1px solid rgba(101,72,145,.22); }.legal-content h2 { color:#eeeaf3; }

@media(max-width:1000px){
 .expanded-hero,.panel-tour-item,.panel-tour-item--reverse { grid-template-columns:1fr; }
 .panel-tour-item--reverse>div,.panel-tour-item--reverse>img { order:initial; }
 .expanded-value-grid,.roadmap-line { grid-template-columns:1fr 1fr; }
 .pricing-page-grid { grid-template-columns:1fr; }.pricing-page-grid article.featured { transform:none; }
 .support-topic-grid,.support-answer-grid,.vision-principles { grid-template-columns:1fr 1fr; }
}
@media(max-width:700px){
 .expanded-page-main { padding-top:34px; }
 .expanded-hero { width:calc(100% - 40px);min-height:auto;padding:40px 0 58px;grid-template-columns:1fr;gap:34px; }
 .expanded-hero h1,.legal-hero h1 { font-size:clamp(43px,12vw,62px); }
 .expanded-intro,.vision-statement,.future-outlook,.panel-tour,.expanded-value-grid,.audience-detail-grid,.pricing-page-grid,.comparison-section,.early-access-grid,.roadmap-section,.support-topic-grid,.support-section,.vision-principles,.why-tool-section,.expanded-faq,.expanded-final-cta { width:calc(100% - 40px); }
 .panel-tour-item { padding:24px;gap:25px; }.expanded-value-grid,.audience-detail-grid,.early-access-grid,.vision-principles,.support-topic-grid,.support-answer-grid,.roadmap-line,.daw-name-grid { grid-template-columns:1fr; }
 .audience-detail-grid article:last-child { grid-column:auto; }.comparison-row { grid-template-columns:1.3fr repeat(3,.8fr);padding:14px 10px;font-size:11px; }
 .early-signup-form>div { grid-template-columns:1fr; }.audience-hero-visual { grid-template-columns:1fr; }
 .legal-page-main { padding-top:40px; }.legal-hero,.legal-content { width:calc(100% - 40px); }
}


/* =========================================================
   V59 — Features export section visual redesign
   Two export windows with tree layout in each panel.
   ========================================================= */
.export-package-section {
  grid-template-columns: .95fr 1.25fr;
  gap: 54px;
  align-items: center;
}
.export-package-visual { display:flex; flex-direction:column; gap:20px; }
.export-package-label {
  display:flex; align-items:center; gap:12px; color:#c59bff; font-weight:700;
  font-size:15px; letter-spacing:.01em; margin-left:4px;
}
.export-package-cube {
  width:16px; height:16px; display:inline-block; border:1.5px solid rgba(197,155,255,.95);
  border-radius:3px; transform:rotate(45deg); box-shadow:0 0 16px rgba(155,97,255,.18);
}
.export-panel-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;
}
.export-panel {
  background:rgba(5,7,13,.86);
  border:1px solid rgba(102,79,165,.38);
  border-radius:26px;
  padding:22px 24px 24px;
  box-shadow:0 0 45px rgba(104,48,183,.08);
}
.export-panel-core { border-color:rgba(172,94,255,.34); }
.export-panel-arrangement { border-color:rgba(64,137,255,.34); }
.export-panel-header {
  display:flex; align-items:center; gap:16px; padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.export-panel-icon {
  width:50px; height:50px; border-radius:14px; position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}
.export-panel-icon::before, .export-panel-icon::after { content:""; position:absolute; }
.export-panel-icon-core::before {
  left:16px; top:12px; width:18px; height:24px; border:2px solid #cf85ff; border-radius:3px;
  box-shadow:0 0 18px rgba(207,133,255,.18);
}
.export-panel-icon-core::after {
  left:28px; top:12px; width:0; height:0; border-left:8px solid #cf85ff; border-top:8px solid transparent;
}
.export-panel-icon-arrangement::before {
  left:13px; top:14px; width:22px; height:14px; border:2px solid #41a2ff; transform:skewY(-15deg);
  box-shadow:0 0 18px rgba(65,162,255,.16);
}
.export-panel-icon-arrangement::after {
  left:16px; top:24px; width:22px; height:14px; border:2px solid #41a2ff; transform:skewY(-15deg);
}
.export-panel h3 { margin:0 0 5px; font-size:18px; letter-spacing:.16em; }
.export-panel-core h3, .export-tree-root-core, .export-tree-core .folder-name, .export-tree-core .file-icon, .export-tree-core .tree-branch { color:#c979ff; }
.export-panel-arrangement h3, .export-tree-root-arrangement, .export-tree-arrangement .folder-name, .export-tree-arrangement .file-icon, .export-tree-arrangement .tree-branch { color:#4ea5ff; }
.export-panel p { margin:0; color:#9d9aa7; font-size:16px; }
.export-tree-root {
  display:flex; align-items:center; gap:10px; font:600 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  margin-bottom:10px;
}
.export-tree-root .tree-caret { color:#ffffff; opacity:.95; font-size:14px; }
.export-tree-root .folder-icon { filter:saturate(0) brightness(1.8); opacity:.95; font-size:15px; }
.export-tree-list { list-style:none; margin:0; padding:0 0 0 24px; }
.export-tree-list li {
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  font:500 14px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#dad5e2;
}
.export-tree-list .file-name { color:#ddd7e5; }
.export-tree-list .file-icon { font-size:14px; filter:saturate(0) brightness(1.8); }
@media (max-width: 1200px) {
  .export-package-section { grid-template-columns:1fr; }
  .export-panel-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .export-package-label { font-size:14px; }
  .export-panel { padding:18px 18px 20px; border-radius:22px; }
  .export-panel-header { gap:12px; padding-bottom:14px; margin-bottom:14px; }
  .export-panel-icon { width:42px; height:42px; border-radius:12px; }
  .export-panel h3 { font-size:16px; }
  .export-panel p { font-size:14px; }
  .export-tree-root { font-size:13px; }
  .export-tree-list { padding-left:16px; overflow:auto; }
  .export-tree-list li { font-size:12px; }
}


/* V60 — shorten visible export filenames and improve fit */
.export-tree-list li { 
  font-size: 13px; 
  line-height: 1.78; 
  gap: 8px; 
}
.export-tree-list .file-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.export-panel { overflow: hidden; }
@media (min-width: 1201px) {
  .export-panel-grid { gap:18px; }
  .export-panel { padding:20px 20px 22px; }
}
@media (max-width: 760px) {
  .export-tree-list li { font-size: 11.5px; }
}

/* =========================================================
   V61 — wider Full Arrangement panel + colourful DAW icons
   ========================================================= */
.export-package-section {
  grid-template-columns: .82fr 1.38fr !important;
  gap: 46px !important;
}
.export-panel-grid {
  grid-template-columns: minmax(300px, .82fr) minmax(390px, 1.18fr) !important;
  gap: 20px !important;
}
.export-panel-arrangement {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
.export-tree-arrangement li {
  font-size: 12.4px !important;
  gap: 7px !important;
}
.export-tree-arrangement .file-name {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.daw-list--icons span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}
.daw-list--icons img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
  filter: drop-shadow(0 0 7px rgba(98, 127, 255, .16));
}
@media (max-width: 1280px) {
  .export-package-section {
    grid-template-columns: 1fr !important;
  }
  .export-panel-grid {
    grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr) !important;
  }
}
@media (max-width: 900px) {
  .export-panel-grid {
    grid-template-columns: 1fr !important;
  }
  .export-tree-arrangement li {
    font-size: 12px !important;
  }
}


/* V62 — DAW icons arranged as 4 on top, 3 on bottom */
.daw-list--icons {
  display: grid !important;
  grid-template-columns: repeat(4, max-content);
  gap: 10px;
  justify-content: start;
  align-items: start;
}
.daw-list--icons span {
  min-width: 0;
  font-size: 11.5px;
  padding: 9px 11px;
}
@media (max-width: 1100px) {
  .daw-list--icons {
    grid-template-columns: repeat(3, max-content) !important;
  }
}
@media (max-width: 760px) {
  .daw-list--icons {
    grid-template-columns: repeat(2, max-content) !important;
  }
}


/* V63 home marketing export package section */
.hero.hero--studio.hero-stage .hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.export-showcase-home {
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 76px);
}

.export-showcase-shell {
  width:min(var(--container), calc(100% - 64px));
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.08fr);
  grid-template-areas:
    "copy visual"
    "features benefits"
    "note workflow";
  gap: clamp(18px, 2.4vw, 28px) clamp(34px, 4.2vw, 54px);
  align-items:start;
  padding: clamp(28px, 3vw, 40px);
  border:1px solid rgba(93, 110, 168, .35);
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% 16%, rgba(38, 163, 255, .16), transparent 26%),
    radial-gradient(circle at 8% 10%, rgba(190, 88, 255, .14), transparent 24%),
    linear-gradient(145deg, rgba(10, 12, 21, .97), rgba(5, 10, 19, .98));
  box-shadow: 0 26px 70px rgba(3, 5, 14, .44);
}


.export-showcase-heading {
  max-width: 980px;
  margin-bottom: 42px;
}

.export-showcase-heading p {
  max-width: 860px;
}

.export-showcase-copy {
  grid-area: copy;
  display:flex;
  flex-direction:column;
  gap: 24px;
  justify-content:flex-start;
}

.export-showcase-copy .section-kicker,
.export-showcase-title {
  display:inline-flex;
  align-self:flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  border:1px solid rgba(178, 103, 255, .44);
  background: rgba(34, 16, 56, .34);
  color:#d889ff;
  font-size: 14px;
  letter-spacing: .16em;
  font-weight:800;
}

.export-showcase-copy h2 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: .96;
  letter-spacing: -.05em;
  color:#f5f1f9;
}

.export-showcase-copy h2 span,
.export-showcase-copy h2 strong {
  background: linear-gradient(90deg, #ef8cff 0%, #7a9dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.export-showcase-copy p {
  margin:0;
  color:#b4b0bd;
  font-size: clamp(17px, 1.2vw, 21px);
  line-height:1.68;
  max-width: 520px;
}

.export-showcase-feature-grid {
  grid-area: features;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.export-showcase-feature-grid article {
  padding: 16px 14px;
  border-radius: 18px;
  border:1px solid rgba(88, 103, 170, .34);
  background: linear-gradient(180deg, rgba(14, 16, 29, .82), rgba(8, 11, 22, .9));
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 120px;
}

.export-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1;
  font-size: 20px;
  color:#e0a3ff;
  background: rgba(29, 22, 52, .7);
  border:1px solid rgba(174, 103, 255, .35);
  box-shadow: inset 0 0 18px rgba(173, 76, 255, .08);
}

.export-showcase-feature-grid strong {
  color:#f2edf7;
  font-size: 17px;
  line-height:1.35;
  font-weight:600;
}

.export-showcase-note {
  grid-area: note;
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 20px 20px;
  border-radius: 20px;
  border:1px solid rgba(151, 87, 228, .35);
  background: linear-gradient(180deg, rgba(25, 15, 40, .68), rgba(10, 11, 23, .95));
}

.export-showcase-note span {
  color:#d885ff;
  font-size: 24px;
  line-height:1;
  margin-top: 3px;
}

.export-showcase-note p {
  font-size: 16px;
  line-height:1.6;
  color:#ece9f5;
}

.export-showcase-visual {
  grid-area: visual;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.export-showcase-title {
  display:none;
}

.export-showcase-panel-grid {
  display:grid;
  grid-template-columns: minmax(260px, .9fr) minmax(370px, 1.1fr);
  gap: 18px;
  align-items:stretch;
  grid-template-areas: "core arrangement";
}

.export-box,
.export-workflow-bar,
.export-showcase-badges span {
  border:1px solid rgba(92, 108, 169, .36);
  background: linear-gradient(180deg, rgba(10, 13, 25, .96), rgba(7, 10, 19, .98));
  border-radius: 24px;
}

.export-box {
  padding: 20px 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 16px 40px rgba(6, 9, 18, .2);
}

.export-box--core { border-color: rgba(191, 105, 255, .38); grid-area: core; display:flex; flex-direction:column; }
.export-box--arrangement { border-color: rgba(54, 165, 255, .38); grid-area: arrangement; display:flex; flex-direction:column; }
.export-box--benefits { border-color: rgba(143, 154, 189, .28); grid-area: benefits; align-self:start; }

.export-box-head {
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items:start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.export-box-head--compact {
  grid-template-columns: auto 1fr;
}
.export-box-head--simple {
  grid-template-columns: auto 1fr;
}

.export-folder-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  position:relative;
  background: rgba(14, 18, 32, .88);
  border:1px solid rgba(255,255,255,.08);
}
.export-folder-icon::before,
.export-folder-icon::after {
  content:"";
  position:absolute;
  left: 10px;
  right:10px;
  border-radius: 4px 4px 6px 6px;
}
.export-folder-icon::before {
  top: 10px;
  height: 8px;
  left: 12px;
  right: 20px;
  border-radius: 5px 5px 0 0;
}
.export-folder-icon::after {
  top: 15px;
  bottom: 10px;
}
.export-folder-icon--core::before,
.export-folder-icon--core::after { background: linear-gradient(180deg, #df92ff, #994bff); }
.export-folder-icon--arrangement::before,
.export-folder-icon--arrangement::after { background: linear-gradient(180deg, #60d8ff, #2f8dff); }
.export-folder-icon--meta::before,
.export-folder-icon--meta::after { background: linear-gradient(180deg, #edf2ff, #9ca4b8); }

.export-box-head h3 {
  margin:0;
  font-size: clamp(21px, 1.55vw, 29px);
  line-height:1.06;
  letter-spacing: .045em;
  text-transform: lowercase;
}
.export-box--core h3,
.export-box--benefits h3 { color:#d98cff; }
.export-box--arrangement h3 { color:#48b0ff; }
.export-box-head p {
  margin:6px 0 0;
  color:#b3aeba;
  font-size: 15px;
  line-height:1.5;
}

.export-count-pill {
  white-space:nowrap;
  align-self:start;
  margin-top: 2px;
  padding: 7px 12px;
  border-radius: 999px;
  border:1px solid rgba(192, 105, 255, .35);
  color:#f2e7ff;
  font-size: 12px;
  font-weight:700;
  letter-spacing:.08em;
  background: rgba(67, 30, 101, .38);
}
.export-count-pill--blue {
  border-color: rgba(65, 167, 255, .36);
  background: rgba(9, 64, 110, .38);
}

.export-file-list {
  list-style:none;
  margin:0;
  padding: 0;
  display:grid;
  gap: 7px;
}
.export-file-list li {
  position:relative;
  padding-left: 28px;
  color:#edf0f7;
  font-size: 13px;
  line-height:1.36;
  word-break: break-word;
}
.export-file-list li::before {
  position:absolute;
  left:0;
  top:0;
  line-height:1.2;
  font-size: 17px;
}
.export-file-list--core li::before { content:"♪"; color:#dc8eff; }
.export-file-list--arrangement li::before { content:"♪"; color:#46c1ff; }
.export-file-list--arrangement li { word-break: normal; overflow-wrap: anywhere; }
.export-file-list__more {
  color:#bfc6d8 !important;
  font-style:italic;
}
.export-file-list__more::before {
  content:"+" !important;
  color:#9aa7c9 !important;
  font-size:15px !important;
}

.export-box-footer {
  margin-top: 14px;
  padding: 15px 16px;
  border-radius: 18px;
  color:#dddcec;
  font-size: 14px;
  line-height:1.55;
  background: linear-gradient(180deg, rgba(23, 17, 39, .8), rgba(9, 12, 24, .96));
  border:1px solid rgba(109, 120, 174, .2);
}
.export-box--arrangement .export-box-footer {
  background: linear-gradient(180deg, rgba(9, 27, 44, .8), rgba(9, 12, 24, .96));
}

.export-benefit-list {
  list-style:none;
  margin: 14px 0 0;
  padding:0;
  display:grid;
  gap: 12px;
}
.export-benefit-list--wide {
  margin-top: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
.export-benefit-list li {
  position:relative;
  padding-left: 28px;
  color:#ece8f6;
  font-size: 15px;
  line-height:1.45;
}
.export-benefit-list li::before {
  content:"◉";
  position:absolute;
  left:0;
  top:0;
  color:#d47bff;
  font-size: 14px;
}
.export-box--benefits-wide h3 {
  margin:0 0 12px;
  font-size: 22px;
  letter-spacing: .08em;
}
.export-box--benefits-wide .export-benefit-list li {
  font-size: 14px;
}
.export-box-footer {
  margin-top: auto;
}

.export-box--benefits {
  padding: 18px 20px 18px;
}

.export-box--benefits-wide {
  width: 100%;
}

.export-workflow-bar {
  grid-area: workflow;
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items:center;
  padding: 18px 22px;
  margin-top: 0;
}
.export-workflow-kicker {
  color:#d78bff;
  font-size: 15px;
  font-weight:800;
  letter-spacing: .12em;
  white-space:nowrap;
}
.export-workflow-steps {
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items:start;
}
.export-workflow-steps i {
  color:#6f7a95;
  font-style:normal;
  align-self:center;
  font-size: 22px;
}
.export-workflow-steps span {
  display:grid;
  gap: 6px;
}
.export-workflow-steps strong {
  color:#f3eef8;
  font-size: 14px;
}
.export-workflow-steps small {
  color:#a7a3b0;
  font-size: 12px;
  line-height:1.45;
}

.export-showcase-badges {
  width:min(var(--container), calc(100% - 64px));
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.export-showcase-badges span {
  min-height: 66px;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  color:#f0edf7;
  font-size: 15px;
  text-align:center;
}
.export-showcase-badges span i {
  font-style:normal;
  color:#d985ff;
  font-size: 16px;
}
.export-showcase-badges img {
  width: 20px;
  height: 20px;
  object-fit:contain;
}

@media (max-width: 1280px) {
  .export-showcase-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "features"
      "note"
      "visual"
      "benefits"
      "workflow";
  }
  .export-showcase-copy p { max-width: none; }
}

@media (max-width: 1120px) {
  .export-showcase-panel-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "core arrangement";
  }
  .export-workflow-bar { grid-template-columns: 1fr; }
  .export-workflow-steps { grid-template-columns: 1fr; gap: 10px; }
  .export-workflow-steps i { display:none; }
  .export-showcase-badges { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .export-showcase-shell,
  .export-showcase-badges { width: calc(100% - 40px); }
  .export-showcase-shell { padding: 24px 20px; }
  .export-showcase-feature-grid { grid-template-columns: 1fr 1fr; }
  .export-showcase-panel-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "core"
      "arrangement";
  }
  .export-box-head { grid-template-columns: auto 1fr; }
  .export-count-pill { grid-column: 2; justify-self:start; }
  .export-benefit-list--wide { grid-template-columns: 1fr 1fr; }
  .export-showcase-badges { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero.hero--studio.hero-stage .hero-actions { flex-direction:column; align-items:stretch; }
  .export-showcase-copy h2 { font-size: 40px; }
  .export-showcase-copy p { font-size: 16px; }
  .export-showcase-feature-grid { grid-template-columns: 1fr; }
  .export-benefit-list--wide { grid-template-columns: 1fr; }
  .export-showcase-badges { grid-template-columns: 1fr; }
}

/* =========================================================
   V69 — HOME SECTION RHYTHM: 150PX BETWEEN MAIN SECTIONS
   Desktop rule: 75px bottom + 75px top = 150px total.
   ========================================================= */
@media (min-width: 761px) {
  #how-it-works,
  #app-action,
  #export-package,
  #features,
  #musicians,
  #pricing {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  .value-assurance-wrap {
    margin: 0 auto !important;
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  #early-access {
    margin-top: 75px !important;
  }
}

@media (max-width: 760px) {
  #how-it-works,
  #app-action,
  #export-package,
  #features,
  #musicians,
  #pricing {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .value-assurance-wrap {
    margin: 0 auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  #early-access {
    margin-top: 48px !important;
  }
}


/* =========================================================
   V70 — Contact and Support pages
   Scoped styles for the two mailto form pages only.
   ========================================================= */
.contact-page-main {
  padding: 74px 0 40px;
  overflow: hidden;
}

.contact-page-hero {
  width: min(1040px, calc(100% - 64px));
  margin: 0 auto;
  padding: 38px 0 66px;
  text-align: center;
}

.contact-page-hero h1 {
  margin: 22px 0 24px;
  font-size: clamp(50px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.055em;
  background: linear-gradient(105deg, #fae8ff 5%, #d071ff 48%, #4d93ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-page-hero p {
  max-width: 820px;
  margin: 0 auto;
  color: #aaa7b2;
  font-size: 18px;
  line-height: 1.72;
}

.contact-page-layout {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto 92px;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 28px;
  align-items: stretch;
}

.contact-info-panel,
.contact-form-panel {
  border: 1px solid rgba(111, 75, 165, .36);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(22, 14, 37, .93), rgba(6, 12, 23, .96));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .36), 0 0 42px rgba(99, 45, 168, .10);
}

.contact-info-panel {
  position: relative;
  overflow: hidden;
  padding: 38px;
}

.contact-info-panel::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -110px;
  right: -100px;
  border-radius: 50%;
  background: rgba(83, 88, 255, .18);
  filter: blur(42px);
  pointer-events: none;
}

.contact-info-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(52, 190, 255, .48);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(123, 55, 215, .24), rgba(34, 157, 198, .16));
  box-shadow: 0 0 28px rgba(73, 140, 255, .16);
}

.contact-info-icon span {
  width: 25px;
  height: 18px;
  position: relative;
  border: 2px solid #8bdcff;
  border-radius: 3px;
}

.contact-info-icon span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 12px;
  height: 8px;
  border-left: 2px solid #d699ff;
  border-bottom: 2px solid #d699ff;
  transform: rotate(-45deg);
}

.contact-panel-label,
.contact-form-heading > span {
  color: #ba75ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
}

.contact-info-panel h2,
.contact-form-heading h2 {
  margin: 13px 0 16px;
  color: #f1edf5;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.contact-info-panel > p,
.contact-form-heading p {
  margin: 0;
  color: #a9a5b1;
  line-height: 1.7;
}

.contact-info-panel ul {
  margin: 30px 0;
  padding: 0;
  display: grid;
  gap: 15px;
  list-style: none;
}

.contact-info-panel li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #d8d3df;
  line-height: 1.5;
}

.contact-info-panel li span {
  color: #53d8ff;
  font-weight: 800;
}

.contact-direct-email {
  padding: 20px;
  border: 1px solid rgba(63, 141, 205, .32);
  border-radius: 14px;
  background: rgba(7, 11, 21, .72);
}

.contact-direct-email small {
  display: block;
  margin-bottom: 7px;
  color: #8d8998;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-direct-email a {
  color: #75dfff;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contact-direct-email a:hover,
.contact-direct-email a:focus-visible {
  color: #fff;
}

.contact-response-note {
  margin-top: 22px;
  padding-top: 22px;
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(121, 77, 166, .2);
}

.contact-response-note strong {
  color: #e7e2ec;
}

.contact-response-note span {
  color: #8f8b98;
  font-size: 14px;
  line-height: 1.55;
}

.contact-form-panel {
  padding: 40px;
}

.contact-form-heading {
  margin-bottom: 30px;
}

.contact-form-heading h2 {
  font-size: clamp(30px, 3vw, 44px);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-field {
  display: grid;
  gap: 9px;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-field label {
  color: #ddd7e5;
  font-size: 14px;
  font-weight: 700;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(100, 75, 151, .48);
  border-radius: 10px;
  outline: none;
  background: #070912;
  color: #fff;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-field input {
  min-height: 52px;
  padding: 0 16px;
}

.contact-field textarea {
  min-height: 190px;
  padding: 15px 16px;
  resize: vertical;
  line-height: 1.55;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #686473;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(49, 202, 255, .78);
  background: #080b15;
  box-shadow: 0 0 0 3px rgba(52, 160, 255, .11), 0 0 22px rgba(106, 57, 205, .10);
}

.contact-form-actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-form-actions .button {
  border: 0;
}

.contact-form-status {
  min-height: 22px;
  margin: 0;
  color: #8ddfff;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .contact-page-layout {
    grid-template-columns: 1fr;
  }

  .contact-info-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
  }

  .contact-info-panel > *:not(.contact-info-icon) {
    grid-column: 2;
  }

  .contact-info-icon {
    grid-row: 1 / span 7;
  }
}

@media (max-width: 700px) {
  .contact-page-main {
    padding-top: 34px;
  }

  .contact-page-hero,
  .contact-page-layout {
    width: calc(100% - 40px);
  }

  .contact-page-hero {
    padding: 40px 0 52px;
  }

  .contact-page-hero h1 {
    font-size: clamp(43px, 12vw, 62px);
  }

  .contact-page-layout {
    margin-bottom: 64px;
    gap: 20px;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 25px;
    border-radius: 20px;
  }

  .contact-info-panel {
    display: block;
  }

  .contact-info-icon {
    margin-bottom: 26px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-field--full {
    grid-column: auto;
  }

  .contact-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form-actions .button {
    width: 100%;
  }
}

/* =========================================================
   V72 — Unified and centred FAQ sections
   Keeps every FAQ visually consistent with the Features FAQ.
   ========================================================= */

.features-faq-section,
.workflow-faq-section,
.expanded-faq,
#troubleshooting.support-section {
  width: min(1100px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  padding-bottom: 100px;
}

.features-faq-section .features-section-heading,
.workflow-faq-section .subpage-heading,
.expanded-faq .subpage-heading {
  width: min(920px, 100%);
  max-width: 920px;
  margin: 0 auto 52px;
  text-align: center;
}

.features-faq-section .features-section-heading h2,
.workflow-faq-section .subpage-heading h2,
.expanded-faq .subpage-heading h2,
#troubleshooting.support-section > h2 {
  margin: 20px auto 0;
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: #f1edf5;
}

#troubleshooting.support-section {
  text-align: center;
}

#troubleshooting.support-section > .section-kicker {
  display: inline-flex;
}

#troubleshooting.support-section > h2 {
  max-width: 920px;
  margin-bottom: 52px;
}

.features-faq-grid {
  width: min(960px, 100%);
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.features-faq-grid details,
.features-faq-section > details {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid rgba(91, 73, 134, .33);
  border-radius: 14px;
  overflow: hidden;
  background: #0a0c14;
  text-align: left;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.features-faq-section > details + details {
  margin-top: 12px;
}

.features-faq-grid details:hover,
.features-faq-section > details:hover,
.features-faq-grid details[open],
.features-faq-section > details[open] {
  border-color: rgba(151, 79, 219, .58);
  background: #0c0e18;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .2), 0 0 28px rgba(110, 49, 177, .08);
}

.features-faq-grid summary,
.features-faq-section > details > summary {
  cursor: pointer;
  padding: 22px 54px 22px 24px;
  color: #eeeaf2;
  font-weight: 700;
  line-height: 1.45;
}

.features-faq-grid details p,
.features-faq-section > details > p {
  margin: 0;
  padding: 0 24px 23px;
  color: #9e9aa6;
  line-height: 1.65;
}

/* The heading shown above the Who It's For use cases follows the same centred rhythm. */
.use-case-section .subpage-heading {
  width: min(920px, calc(100% - 40px));
  max-width: 920px;
  margin: 0 auto 52px;
  text-align: center;
}

@media (max-width: 760px) {
  .features-faq-section,
  .workflow-faq-section,
  .expanded-faq,
  #troubleshooting.support-section {
    width: calc(100% - 40px);
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .features-faq-section .features-section-heading,
  .workflow-faq-section .subpage-heading,
  .expanded-faq .subpage-heading,
  #troubleshooting.support-section > h2 {
    margin-bottom: 36px;
  }

  .features-faq-grid summary,
  .features-faq-section > details > summary {
    padding: 19px 42px 19px 18px;
  }

  .features-faq-grid details p,
  .features-faq-section > details > p {
    padding: 0 18px 20px;
  }
}

/* =========================================================
   V73 — PRICING PAGE SECTION RHYTHM + CONTAINER FIX
   Matches Home: 75px + 75px = 150px between main sections.
   Mobile: 48px + 48px = 96px.
   ========================================================= */
.pricing-page-body .pricing-principles {
  width: min(var(--container), calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}

.pricing-page-body .pricing-principles > div:first-child {
  width: 100%;
  min-width: 0;
}

.pricing-page-body .pricing-principles .expanded-value-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

@media (min-width: 761px) {
  .pricing-page-body .expanded-hero {
    padding-bottom: 75px;
  }

  .pricing-page-body .pricing-page-grid {
    margin-bottom: 0;
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .pricing-page-body .comparison-section,
  .pricing-page-body .pricing-principles,
  .pricing-page-body .expanded-faq {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .pricing-page-body .expanded-final-cta {
    margin-top: 75px;
  }
}

@media (max-width: 760px) {
  .pricing-page-body .expanded-hero {
    padding-bottom: 48px;
  }

  .pricing-page-body .pricing-page-grid {
    width: calc(100% - 40px);
    margin-bottom: 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .pricing-page-body .comparison-section,
  .pricing-page-body .pricing-principles,
  .pricing-page-body .expanded-faq {
    width: calc(100% - 40px);
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .pricing-page-body .expanded-final-cta {
    margin-top: 48px;
  }
}


/* =========================================================
   V74 — CENTRED PRICING FEATURE COMPARISON HEADING
   Centres only the heading block; the comparison table is unchanged.
   ========================================================= */
.pricing-page-body .comparison-section > .subpage-heading {
  width: min(920px, 100%);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 52px;
  text-align: center;
}

.pricing-page-body .comparison-section > .subpage-heading .section-kicker {
  display: inline-flex;
}

.pricing-page-body .comparison-section > .subpage-heading h2 {
  margin-left: auto;
  margin-right: auto;
}

.pricing-page-body .comparison-section > .subpage-heading p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .pricing-page-body .comparison-section > .subpage-heading {
    margin-bottom: 36px;
  }
}

/* =========================================================
   V75 — CENTRED PRICING PHILOSOPHY HEADING
   Matches the centred heading treatment used by Feature Comparison
   and Pricing FAQ. The four value cards remain unchanged.
   ========================================================= */
.pricing-page-body .pricing-principles > div:first-child {
  width: min(1100px, 100%);
  max-width: 1100px;
  margin: 0 auto 52px;
  text-align: center;
}

.pricing-page-body .pricing-principles > div:first-child .section-kicker {
  display: inline-flex;
}

.pricing-page-body .pricing-principles > div:first-child h2 {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-page-body .pricing-principles > div:first-child p {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  color: #aaa7b2;
  font-size: 18px;
  line-height: 1.72;
}

@media (max-width: 760px) {
  .pricing-page-body .pricing-principles > div:first-child {
    margin-bottom: 36px;
  }

  .pricing-page-body .pricing-principles > div:first-child p {
    font-size: 16px;
  }
}

/* =========================================================
   V77 — CLEAR PAGE ROLES & CONTENT ARCHITECTURE
   Home sells the overview, Features explains capabilities,
   Workflow explains sequence, Inside the App tours the UI.
   ========================================================= */
.home-section-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.steps-grid--four {
  width: min(1040px, 100%) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.home-pathways-grid {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 28px;
  align-items: stretch;
}
.home-pathway-media {
  overflow: hidden;
  border: 1px solid rgba(92, 79, 141, .4);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18, 14, 31, .96), rgba(7, 13, 22, .98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
}
.home-pathway-media img {
  display: block;
  width: 100%;
  min-height: 430px;
  object-fit: contain;
  background: #020307;
}
.home-pathway-media > div {
  display: grid;
  gap: 5px;
  padding: 20px 24px 24px;
  border-top: 1px solid rgba(92, 79, 141, .28);
}
.home-pathway-media strong { color: #fff; font-size: 18px; }
.home-pathway-media span { color: #9f9ba9; line-height: 1.55; }
.home-pathway-links { display: grid; gap: 14px; }
.home-pathway-card {
  display: block;
  padding: 25px;
  border: 1px solid rgba(101, 74, 151, .4);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(38, 17, 58, .42), rgba(7, 13, 22, .96));
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-pathway-card:hover {
  transform: translateY(-3px);
  border-color: rgba(62, 205, 255, .58);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 0 26px rgba(97, 55, 196, .12);
}
.home-pathway-card > span { color: #c566ff; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.home-pathway-card h3 { margin: 12px 0 9px; color: #fff; font-size: 22px; }
.home-pathway-card p { margin: 0 0 16px; color: #9f9ba9; line-height: 1.55; }
.home-pathway-card > strong { color: #43d9ff; font-size: 13px; }
.home-capability-grid .feature-card--detailed { min-height: 250px; }

.workflow-process-overview { padding-bottom: 35px; }
.workflow-step-cards {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.workflow-step-card {
  min-width: 0;
  padding: 24px 18px;
  border: 1px solid rgba(92, 79, 141, .36);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(24, 15, 39, .8), rgba(7, 13, 22, .96));
}
.workflow-step-card > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(185, 91, 255, .55);
  border-radius: 50%;
  color: #d989ff;
  font-size: 12px;
  font-weight: 800;
}
.workflow-step-card h3 { margin: 18px 0 9px; color: #fff; font-size: 17px; line-height: 1.2; }
.workflow-step-card p { margin: 0; color: #9f9ba9; font-size: 13px; line-height: 1.5; }
.workflow-checkpoints {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  gap: 30px;
}
.workflow-checkpoint {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 42px;
  padding: 34px;
  border: 1px solid rgba(83, 65, 126, .32);
  border-radius: 26px;
  background: radial-gradient(circle at 0 0, rgba(113, 48, 163, .12), transparent 36%), linear-gradient(145deg, rgba(11, 11, 20, .97), rgba(7, 12, 21, .97));
}
.workflow-checkpoint--reverse { grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr); }
.workflow-checkpoint--reverse > div { order: 2; }
.workflow-checkpoint--reverse > img { order: 1; }
.workflow-checkpoint h3 { margin: 14px 0 14px; color: #f3edf8; font-size: clamp(32px, 3vw, 48px); letter-spacing: -.04em; }
.workflow-checkpoint p { color: #aaa7b2; font-size: 17px; line-height: 1.7; }
.workflow-checkpoint img { display: block; width: 100%; padding: 8px; border: 1px solid rgba(76, 106, 165, .37); border-radius: 18px; background: #080b14; box-shadow: 0 24px 65px rgba(0, 0, 0, .38); }
.workflow-handoff-note {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
  padding: 88px clamp(30px, 7vw, 100px);
  text-align: center;
  border: 1px solid rgba(70, 99, 153, .34);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 0, rgba(32, 110, 152, .16), transparent 42%), #090b13;
}
.workflow-handoff-note h2 { margin: 20px auto; max-width: 900px; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -.045em; }
.workflow-handoff-note > p { max-width: 850px; margin: 0 auto 28px; color: #aaa7b2; font-size: 18px; line-height: 1.7; }
.subpage-actions--center { justify-content: center; }

.inside-app-role-note {
  width: min(900px, calc(100% - 64px));
  margin: 0 auto 80px;
  padding: 28px 34px;
  text-align: center;
  border: 1px solid rgba(92, 79, 141, .34);
  border-radius: 18px;
  background: rgba(9, 12, 22, .76);
}
.inside-app-role-note p { margin: 12px 0 0; color: #aaa7b2; font-size: 16px; line-height: 1.65; }
.inside-app-role-note a { color: #48d9ff; font-weight: 700; }
.panel-tour-facts { display: grid; gap: 14px; margin-top: 24px; }
.panel-tour-facts article {
  padding: 18px 20px;
  border-left: 3px solid #a74fff;
  border-radius: 0 12px 12px 0;
  background: rgba(104, 47, 159, .1);
}
.panel-tour-facts article:last-child { border-left-color: #31cfee; background: rgba(31, 128, 159, .09); }
.panel-tour-facts strong { display: block; margin-bottom: 7px; color: #d885ff; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.panel-tour-facts article:last-child strong { color: #54dfff; }
.panel-tour-facts p { margin: 0; }
.expanded-final-cta > p { max-width: 780px; margin: 0 auto 30px; color: #aaa7b2; font-size: 18px; line-height: 1.7; }

@media (max-width: 1180px) {
  .workflow-step-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .home-pathways-grid { grid-template-columns: 1fr; }
  .home-pathway-media img { min-height: 0; }
  .workflow-checkpoint,
  .workflow-checkpoint--reverse { grid-template-columns: 1fr; }
  .workflow-checkpoint--reverse > div,
  .workflow-checkpoint--reverse > img { order: initial; }
}
@media (max-width: 849px) {
  .steps-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 800px) {
  .home-pathways-grid,
  .workflow-step-cards,
  .workflow-checkpoints,
  .workflow-handoff-note,
  .inside-app-role-note { width: calc(100% - 40px); }
  .workflow-step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .workflow-checkpoint { padding: 24px; gap: 25px; }
  .workflow-handoff-note { padding: 64px 24px; }
  .inside-app-role-note { margin-bottom: 55px; padding: 24px; }
}
@media (max-width: 520px) {
  .home-pathway-card { padding: 21px; }
  .workflow-step-cards { grid-template-columns: 1fr; }
}


/* =========================================================
   V78 — TRANSLATION-SAFE RESPONSIVE LAYOUT
   Protects the existing design when browser translation or
   future localized copy produces longer labels and sentences.
   ========================================================= */

/* Let translated text wrap without forcing its grid/flex item wider. */
:where(
  .site-header,
  .main-nav,
  .hero,
  .section,
  .steps-grid,
  .features-grid,
  .audience-grid,
  .pricing-grid,
  .home-pathways-grid,
  .home-pathway-links,
  .export-showcase-shell,
  .export-showcase-feature-grid,
  .export-showcase-panel-grid,
  .export-workflow-bar,
  .export-workflow-steps,
  .export-showcase-badges,
  .control-statement-grid,
  .connected-benefits,
  .control-depth-grid,
  .workflow-step-cards,
  .workflow-checkpoint,
  .workflow-example-grid,
  .panel-tour-item,
  .expanded-value-grid,
  .audience-detail-grid,
  .pricing-page-grid,
  .roadmap-line,
  .support-topic-grid,
  .support-answer-grid,
  .daw-name-grid,
  .value-assurance-bar,
  .comparison-row
) > * {
  min-width: 0;
}

:where(
  h1, h2, h3, h4,
  p, li, summary,
  .button,
  .main-nav a,
  .section-kicker,
  .eyebrow,
  .home-pathway-card,
  .workflow-step-card,
  .export-showcase-feature-grid strong,
  .export-benefit-list li,
  .export-workflow-steps strong,
  .export-workflow-steps small,
  .export-showcase-badges span,
  .value-assurance-item,
  .comparison-row span
) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Buttons may grow vertically instead of clipping a longer translation. */
.button {
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  padding-block: 12px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.header-cta {
  max-width: min(300px, 100%);
}

/* Labels keep their pill appearance, but can wrap when necessary. */
.eyebrow,
.section-kicker,
.export-showcase-copy .section-kicker,
.export-showcase-title {
  max-width: 100%;
  height: auto;
  padding-block: 10px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

/* Cards are content-driven. Existing min-heights remain visual minimums only. */
:where(
  .step-card,
  .feature-card,
  .audience-card,
  .price-card,
  .home-pathway-card,
  .workflow-step-card,
  .control-statement-grid article,
  .connected-benefits article,
  .expanded-value-grid article,
  .support-topic-grid a,
  .support-answer-grid article,
  .roadmap-line article,
  .export-showcase-feature-grid article,
  .export-showcase-badges span
) {
  height: auto;
}


/* The four compact export benefits use a 2 × 2 grid at desktop too.
   This removes forced line breaks and leaves room for longer languages. */
.export-showcase-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.export-showcase-feature-grid article {
  min-height: 0;
}

.export-showcase-feature-grid strong {
  white-space: normal;
}

.export-benefit-list--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.export-workflow-bar {
  grid-template-columns: 1fr;
}

.export-workflow-kicker {
  white-space: normal;
}

.export-workflow-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.export-workflow-steps i {
  display: none;
}

/* Package benefits and compact feature cards get more room before mobile. */
@media (max-width: 1180px) {
  .steps-grid--four,
  .control-statement-grid,
  .export-showcase-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .export-benefit-list--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .export-showcase-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A translated seven-step workflow needs wider cards earlier. */
@media (max-width: 1360px) {
  .workflow-step-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Switch to the compact navigation before long translated labels collide. */
@media (max-width: 1380px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 26px clamp(22px, 5vw, 64px) 30px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(5, 5, 10, .98);
    border-bottom: 1px solid rgba(151, 77, 221, .18);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    width: 100%;
    padding: 13px 0;
    line-height: 1.35;
  }

  .main-nav a.active::after,
  .main-nav a[aria-current="page"]::after {
    left: 0;
    bottom: 4px;
    transform: none;
  }

  .nav-toggle {
    display: block;
    justify-self: end;
  }

  .header-cta {
    display: none;
  }

  .export-workflow-bar {
    grid-template-columns: 1fr;
  }

  .export-workflow-kicker {
    white-space: normal;
  }

  .export-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .export-workflow-steps i {
    display: none;
  }
}

@media (max-width: 900px) {
  .connected-benefits,
  .workflow-example-grid,
  .expanded-value-grid,
  .vision-principles,
  .support-topic-grid,
  .support-answer-grid,
  .roadmap-line,
  .daw-name-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-row {
    min-width: 700px;
  }
}

@media (max-width: 640px) {
  .steps-grid--four,
  .control-statement-grid,
  .export-showcase-feature-grid,
  .export-benefit-list--wide,
  .export-showcase-badges,
  .export-workflow-steps,
  .connected-benefits,
  .workflow-example-grid,
  .expanded-value-grid,
  .vision-principles,
  .support-topic-grid,
  .support-answer-grid,
  .roadmap-line,
  .daw-name-grid {
    grid-template-columns: 1fr !important;
  }

  .button,
  .subpage-actions .button,
  .hero-actions .button {
    width: 100%;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .export-showcase-note,
  .value-assurance-item {
    align-items: flex-start;
  }
}


/* =========================================================
   V79 — DOWNLOADABLE macOS BETA 0.9.1
   Adds a real local DMG download without changing the visual system.
   ========================================================= */
.main-nav .mobile-download-link {
  display: none;
}

.download-meta {
  margin: 12px 0 0;
  color: #a9a7b6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.early-download-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 28px 0 22px;
}

.early-download-panel > span {
  color: #aaa7b6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}

@media (max-width: 1380px) {
  .main-nav .mobile-download-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(67, 195, 255, .48);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(166, 54, 255, .92), rgba(50, 133, 239, .94));
    color: #fff;
    font-weight: 800;
    text-align: center;
  }

  .main-nav .mobile-download-link::after {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .early-download-panel {
    align-items: stretch;
  }

  .early-download-panel .button {
    width: 100%;
  }
}

/* =========================================================
   V81 — TRANSLATED HERO + GRADIENT TEXT + EXPORT CARD RHYTHM
   Fixes three translation-related visual regressions without
   changing the approved colour system or page structure.
   ========================================================= */

/* Gradient-clipped display text needs a little descender room.
   The extra bottom inset prevents letters such as g, j, p, q, y
   and translated diacritics from being clipped by tight line boxes. */
:where(
  .hero.hero--studio.hero-stage h1,
  .section-heading h2,
  .final-cta h2,
  .features-page-hero-copy h1,
  .workflow-page-hero-copy h1,
  .expanded-hero h1,
  .legal-hero h1,
  .subpage-hero h1,
  .contact-page-hero h1
) {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.08 !important;
  padding-bottom: .12em;
  overflow: visible !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Browser translations can make an approved single line much longer.
   Keep every authored line as a block, but allow that block to wrap
   cleanly instead of continuing underneath the right-side artwork. */
@media (min-width: 850px) {
  .hero.hero--studio.hero-stage h1 > span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

@media (min-width: 1200px) {
  .hero.hero--studio.hero-stage .hero-copy--studio {
    width: 43% !important;
    max-width: 600px !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-image {
    width: 58% !important;
  }

  .hero.hero--studio.hero-stage .hero-studio-overlay {
    background:
      linear-gradient(90deg,
        #03040a 0%,
        rgba(3,4,10,1) 29%,
        rgba(3,4,10,.98) 36%,
        rgba(3,4,10,.88) 42%,
        rgba(3,4,10,.62) 48%,
        rgba(3,4,10,.28) 55%,
        rgba(3,4,10,.06) 64%,
        rgba(3,4,10,.06) 86%,
        rgba(3,4,10,.22) 100%),
      linear-gradient(180deg,
        rgba(3,4,10,.16) 0%,
        transparent 24%,
        transparent 76%,
        rgba(3,4,10,.64) 100%) !important;
  }
}

/* Make the two export package cards use the same internal rhythm.
   The description panels now have equal visual height and a guaranteed
   breathing gap from the file list above them. */
.export-showcase-panel-grid {
  align-items: stretch !important;
}

.export-box--core,
.export-box--arrangement {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: stretch !important;
}

.export-box--core .export-file-list,
.export-box--arrangement .export-file-list {
  align-content: start;
  margin-bottom: 22px;
}

.export-box--core .export-box-footer,
.export-box--arrangement .export-box-footer {
  min-height: 96px;
  margin-top: 0 !important;
  display: flex;
  align-items: center;
}

@media (max-width: 760px) {
  :where(
    .hero.hero--studio.hero-stage h1,
    .section-heading h2,
    .final-cta h2,
    .features-page-hero-copy h1,
    .workflow-page-hero-copy h1,
    .expanded-hero h1,
    .legal-hero h1,
    .subpage-hero h1,
    .contact-page-hero h1
  ) {
    line-height: 1.1 !important;
    padding-bottom: .14em;
  }

  .export-box--core .export-box-footer,
  .export-box--arrangement .export-box-footer {
    min-height: 0;
  }
}

/* =========================================================
   V82 — TRANSLATION-SAFE WORD WRAPPING WITHOUT HYPHENATION
   Automatic browser translations must never split natural-language
   words with inserted hyphens. Long copy still wraps at spaces and
   content-driven cards may grow vertically as required.
   ========================================================= */

/* Disable language-dependent automatic hyphenation globally. */
html,
body,
:where(
  h1, h2, h3, h4, h5, h6,
  p, li, summary, blockquote, figcaption,
  .button,
  .main-nav a,
  .section-kicker,
  .eyebrow,
  .home-pathway-card,
  .workflow-step-card,
  .export-showcase-feature-grid strong,
  .export-benefit-list li,
  .export-workflow-steps strong,
  .export-workflow-steps small,
  .export-showcase-badges span,
  .value-assurance-item,
  .comparison-row span
) {
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Display copy should move whole words to the next line. */
:where(
  h1, h2, h3, h4, h5, h6,
  .section-heading,
  .section-heading h2,
  .hero-copy,
  .features-page-hero-copy,
  .workflow-page-hero-copy,
  .expanded-hero,
  .final-cta,
  .section-kicker,
  .eyebrow
) {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Paragraphs and controls retain an emergency non-hyphenated wrap only
   when a translated token would otherwise overflow its container. */
:where(
  p, li, summary,
  .button,
  .main-nav a,
  .home-pathway-card,
  .workflow-step-card,
  .value-assurance-item,
  .comparison-row span
) {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Technical identifiers and file names may wrap anywhere, but never gain
   a language hyphen. These are not normal prose and must stay contained. */
:where(
  code, pre,
  .export-file-list li,
  .export-file-list--arrangement li,
  .download-url,
  .file-name,
  .technical-token
) {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* =========================================================
   V82 — GLOBAL NO-HYPHEN GUARANTEE FOR EVERY LANGUAGE
   Chrome translation may change the document language after load.
   Apply the rule to every descendant so Polish, German, French,
   Spanish and other translations never gain automatic word hyphens.
   ========================================================= */
html *,
html *::before,
html *::after {
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
}

/* =========================================================
   V83 — MULTILINGUAL FOUNDATION
   A compact language control, accessible locale panel and a
   browser-language suggestion system. Language is never chosen
   from country or IP location, and manual choice always wins.
   ========================================================= */

.header-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.header-tools .header-cta {
  justify-self: auto;
}

.language-toggle {
  min-width: 68px;
  min-height: 44px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(167, 100, 255, .34);
  border-radius: 10px;
  background: rgba(14, 12, 24, .82);
  color: #e7ddf7;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-toggle[aria-expanded="true"] {
  border-color: rgba(73, 216, 255, .72);
  background: rgba(23, 18, 39, .96);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(54, 204, 255, .08), 0 10px 34px rgba(0, 0, 0, .22);
}

.language-toggle-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
}

.language-toggle-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-panel {
  position: fixed;
  z-index: 260;
  top: calc(var(--header-height) + 14px);
  right: clamp(18px, 4vw, 64px);
  width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - var(--header-height) - 30px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(153, 82, 240, .32);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(21, 16, 34, .985), rgba(7, 10, 20, .99)),
    #090913;
  color: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .56), 0 0 55px rgba(120, 61, 218, .12);
  backdrop-filter: blur(24px);
}

.language-panel[hidden] {
  display: none !important;
}

.language-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.language-panel-kicker {
  display: block;
  margin-bottom: 7px;
  color: #55dfff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.language-panel h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.12;
}

.language-panel-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #c9c4d2;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.language-panel-close:hover,
.language-panel-close:focus-visible {
  border-color: rgba(83, 218, 255, .58);
  color: #fff;
}

.language-panel-description {
  margin: 12px 0 19px;
  color: #aaa6b4;
  font-size: 14px;
  line-height: 1.6;
}

.language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.language-option {
  width: 100%;
  min-width: 0;
  min-height: 68px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #d8d4df;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.language-option[href] {
  cursor: pointer;
}

.language-option[href]:hover,
.language-option[href]:focus-visible,
.language-option.is-current {
  border-color: rgba(76, 213, 255, .5);
  background: linear-gradient(135deg, rgba(148, 66, 235, .13), rgba(40, 177, 220, .09));
  color: #fff;
}

.language-option:disabled {
  opacity: .58;
  cursor: not-allowed;
}

.language-option-code {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(158, 89, 242, .28);
  border-radius: 10px;
  background: rgba(148, 67, 230, .08);
  color: #d58eff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.language-option-name {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.language-option-name strong {
  min-width: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.2;
}

.language-option-name small {
  color: #8f8a99;
  font-size: 10px;
  line-height: 1.2;
}

.language-option-status {
  max-width: 74px;
  color: #85818c;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.language-option.is-current .language-option-status {
  color: #57ddff;
}

.language-panel-privacy {
  margin: 17px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.075);
  color: #817d89;
  font-size: 11px;
  line-height: 1.55;
}

.language-suggestion {
  position: fixed;
  z-index: 250;
  right: clamp(18px, 4vw, 64px);
  bottom: 24px;
  width: min(620px, calc(100vw - 36px));
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(71, 213, 255, .34);
  border-radius: 16px;
  background: rgba(9, 9, 18, .97);
  box-shadow: 0 22px 60px rgba(0,0,0,.46);
  backdrop-filter: blur(22px);
}

.language-suggestion-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.language-suggestion-copy strong {
  font-size: 15px;
}

.language-suggestion-copy span {
  color: #aaa6b3;
  font-size: 12px;
  line-height: 1.45;
}

.language-suggestion-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.language-suggestion .button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 12px;
}

@media (max-width: 1380px) {
  .header-tools {
    grid-column: 2;
    grid-row: 1;
  }

  .header-tools .nav-toggle {
    display: block;
    justify-self: auto;
  }

  .header-tools .header-cta {
    display: none;
  }

  .language-panel {
    right: 18px;
  }
}

@media (max-width: 620px) {
  .site-header {
    gap: 12px;
  }

  .header-tools {
    gap: 7px;
  }

  .language-toggle {
    min-width: 58px;
    padding-inline: 10px;
  }

  .language-toggle-icon {
    display: none;
  }

  .language-panel {
    top: calc(var(--header-height) + 8px);
    right: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - var(--header-height) - 18px);
    padding: 19px;
    border-radius: 15px;
  }

  .language-options {
    grid-template-columns: 1fr;
  }

  .language-suggestion {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    align-items: stretch;
    flex-direction: column;
  }

  .language-suggestion-actions {
    width: 100%;
  }

  .language-suggestion-actions .button {
    flex: 1 1 0;
  }
}


/* =========================================================
   V86 — UNIFIED WHITE + GRADIENT HEADING SYSTEM
   Primary marketing headings use white as the readable base.
   One intentional phrase carries the brand gradient accent.
   ========================================================= */
:root {
  --heading-base: #f5f1f8;
  --heading-accent-gradient: linear-gradient(105deg, #f2a9ef 0%, #c960ff 38%, #8057ff 67%, #28d6ff 100%);
}

.brand-split-heading {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--heading-base) !important;
  color: var(--heading-base) !important;
  overflow: visible !important;
  padding-top: .035em;
  padding-bottom: .105em;
}

.brand-split-heading .heading-base {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--heading-base) !important;
  color: var(--heading-base) !important;
}

.brand-split-heading .heading-accent,
.brand-split-heading .heading-accent .technical-token {
  background: var(--heading-accent-gradient) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Home keeps the approved three-line composition: only the musical idea line is accented. */
.hero.hero--studio.hero-stage h1.brand-split-heading > span {
  overflow: visible !important;
  padding-bottom: .055em;
}

/* The export-package heading treats the complete product phrase as one accent,
   rather than colouring only the isolated MIDI token. */
.export-showcase-copy h2.brand-split-heading span,
.export-showcase-copy h2.brand-split-heading strong {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
  color: inherit;
}

.export-showcase-copy h2.brand-split-heading .heading-accent,
.export-showcase-copy h2.brand-split-heading .heading-accent .technical-token {
  background: var(--heading-accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

@media (max-width: 849px) {
  .brand-split-heading {
    padding-bottom: .13em;
  }
}


/* ==========================================================
   V87 — one clear colour system for the largest headings
   Main hero titles and the Home export-package title use the
   complete brand gradient. Smaller section/card headings stay white.
   ========================================================== */
:root {
  --main-heading-gradient: linear-gradient(105deg, #f2a9ef 0%, #c960ff 38%, #8057ff 67%, #28d6ff 100%);
}

.brand-gradient-heading,
.brand-gradient-heading .technical-token {
  background: var(--main-heading-gradient) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  overflow: visible !important;
  padding-block: 0.08em 0.12em !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 900px) {
  .brand-gradient-heading {
    padding-block: 0.1em 0.14em !important;
  }
}

/* ==========================================================
   V88 — GLOBAL PROMINENT HEADING + EXPORT FOOTER AUDIT
   One consistent brand gradient is used for every large marketing
   heading. Card titles, plan names, legal subsections and interface
   panel names remain white to preserve hierarchy.
   ========================================================== */

/* Page heroes and large section statements share one gradient system. */
:where(
  main h1,
  .section-heading h2,
  .export-showcase-copy h2,
  .feature-control-statement h2,
  .features-section-heading h2,
  .features-final-cta h2,
  .subpage-heading h2,
  .workflow-connected-project h2,
  .workflow-output-copy h2,
  .workflow-handoff-note h2,
  .expanded-intro h2,
  .vision-statement h2,
  .future-outlook h2,
  .why-tool-section h2,
  .support-section > h2,
  .pricing-principles h2,
  .expanded-final-cta h2,
  .final-cta-inner h2
) {
  background: var(--main-heading-gradient) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  overflow: visible !important;
  padding-top: .075em !important;
  padding-bottom: .14em !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Protected product tokens inside gradient headings inherit the same fill. */
:where(
  main h1,
  .section-heading h2,
  .export-showcase-copy h2,
  .feature-control-statement h2,
  .features-section-heading h2,
  .features-final-cta h2,
  .subpage-heading h2,
  .workflow-connected-project h2,
  .workflow-output-copy h2,
  .workflow-handoff-note h2,
  .expanded-intro h2,
  .vision-statement h2,
  .future-outlook h2,
  .why-tool-section h2,
  .support-section > h2,
  .pricing-principles h2,
  .expanded-final-cta h2,
  .final-cta-inner h2
) .technical-token {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Short product identifiers must never be split into vertical fragments. */
.technical-token {
  display: inline !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* V81 used flex alignment here, which turned surrounding text into separate
   anonymous flex items and could squeeze MIDI into MI / DI. Restore normal
   inline text flow while keeping both description boxes equal in height. */
.export-box--core .export-box-footer,
.export-box--arrangement .export-box-footer {
  display: block !important;
  box-sizing: border-box;
  min-width: 0;
  min-height: 96px;
  padding: 17px 16px;
  overflow: visible;
}

@media (max-width: 760px) {
  :where(
    main h1,
    .section-heading h2,
    .export-showcase-copy h2,
    .feature-control-statement h2,
    .features-section-heading h2,
    .features-final-cta h2,
    .subpage-heading h2,
    .workflow-connected-project h2,
    .workflow-output-copy h2,
    .workflow-handoff-note h2,
    .expanded-intro h2,
    .vision-statement h2,
    .future-outlook h2,
    .why-tool-section h2,
    .support-section > h2,
    .pricing-principles h2,
    .expanded-final-cta h2,
    .final-cta-inner h2
  ) {
    padding-bottom: .16em !important;
  }

  .export-box--core .export-box-footer,
  .export-box--arrangement .export-box-footer {
    min-height: 0;
  }
}

/* ==========================================================
   V89 — CONTINUOUS GRADIENT THROUGH PROTECTED TOKENS
   Technical product tokens inside gradient headings must use the
   parent heading's single gradient. They must not restart a second
   complete gradient inside short words such as MIDI or DAW.
   ========================================================== */
:where(
  main h1,
  .section-heading h2,
  .export-showcase-copy h2,
  .feature-control-statement h2,
  .features-section-heading h2,
  .features-final-cta h2,
  .subpage-heading h2,
  .workflow-connected-project h2,
  .workflow-output-copy h2,
  .workflow-handoff-note h2,
  .expanded-intro h2,
  .vision-statement h2,
  .future-outlook h2,
  .why-tool-section h2,
  .support-section > h2,
  .pricing-principles h2,
  .expanded-final-cta h2,
  .final-cta-inner h2,
  .brand-gradient-heading
) .technical-token {
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: initial !important;
  background-repeat: repeat !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
}

/* ==========================================================
   V90 — SINGLE UNBROKEN MULTILINE HEADING GRADIENT
   Do not clone the gradient for every wrapped line. Paint one
   gradient across the complete heading box, including protected
   MIDI/DAW tokens, so short final lines do not restart the full
   pink-to-cyan transition inside a single word.
   ========================================================== */
:where(
  main h1,
  .section-heading h2,
  .export-showcase-copy h2,
  .feature-control-statement h2,
  .features-section-heading h2,
  .features-final-cta h2,
  .subpage-heading h2,
  .workflow-connected-project h2,
  .workflow-output-copy h2,
  .workflow-handoff-note h2,
  .expanded-intro h2,
  .vision-statement h2,
  .future-outlook h2,
  .why-tool-section h2,
  .support-section > h2,
  .pricing-principles h2,
  .expanded-final-cta h2,
  .final-cta-inner h2,
  .brand-gradient-heading
) {
  -webkit-box-decoration-break: slice !important;
  box-decoration-break: slice !important;
}

:where(
  main h1,
  .section-heading h2,
  .export-showcase-copy h2,
  .feature-control-statement h2,
  .features-section-heading h2,
  .features-final-cta h2,
  .subpage-heading h2,
  .workflow-connected-project h2,
  .workflow-output-copy h2,
  .workflow-handoff-note h2,
  .expanded-intro h2,
  .vision-statement h2,
  .future-outlook h2,
  .why-tool-section h2,
  .support-section > h2,
  .pricing-principles h2,
  .expanded-final-cta h2,
  .final-cta-inner h2,
  .brand-gradient-heading
) .technical-token {
  display: contents !important;
}

/* ==========================================================
   V91 — CHIP, COMPATIBILITY CARD AND INLINE TOKEN SYSTEM
   Nested technical tokens must remain inline text. Only direct
   children of a chip row receive the card/pill styling.
   ========================================================== */

/* Proof/chip rows: style only their top-level pills. */
.features-hero-proof > span,
.workflow-hero-proof > span,
.product-proof-bar > span,
.pricing-notes > span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32em;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Undo older descendant selectors that accidentally turned MIDI, DAW and
   Piano Roll inside a pill into a second nested pill. */
.features-hero-proof > span .technical-token,
.workflow-hero-proof > span .technical-token,
.product-proof-bar > span .technical-token,
.pricing-notes > span .technical-token {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  white-space: nowrap !important;
}

/* Compatibility cards: equal grid cells with one icon and one complete label. */
.export-showcase-badges {
  align-items: stretch;
}

.export-showcase-badges > .export-compat-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 72px;
  height: 100%;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 10px;
  text-align: left;
  white-space: normal;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.export-showcase-badges > .export-compat-card > i,
.export-showcase-badges > .export-compat-card > img {
  width: 22px;
  height: 22px;
  margin: 0;
  display: grid;
  place-items: center;
  object-fit: contain;
  justify-self: center;
}

.export-showcase-badges > .export-compat-card > .export-compat-label {
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f0edf7;
  font: inherit;
  line-height: 1.28;
  text-align: left;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.export-showcase-badges > .export-compat-card .technical-token {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
}

/* Lists with technical tokens must use normal inline text flow. A grid list
   item turns every text run/span into separate grid children and caused
   phrases such as DAW-ready MIDI export to collapse vertically. */
.audience-card li,
.feature-points li {
  position: relative;
  display: block !important;
  grid-template-columns: none !important;
  min-width: 0;
  padding-left: 28px;
  line-height: 1.5;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.audience-card li::before,
.feature-points li::before {
  position: absolute;
  left: 0;
  top: .08em;
  margin: 0;
}

.audience-content,
.audience-content ul,
.audience-content li {
  min-width: 0;
}

.audience-content .technical-token {
  display: inline !important;
  white-space: nowrap !important;
}

/* The download information always uses the same quiet line below the CTA. */
.download-meta,
.early-download-panel > .download-meta--panel {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #a9a7b6 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .04em !important;
  white-space: nowrap;
}

.early-download-panel {
  width: fit-content;
  max-width: 100%;
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 0 !important;
}

@media (max-width: 1180px) {
  .export-showcase-badges > .export-compat-card {
    min-height: 68px;
  }
}

@media (max-width: 640px) {
  .features-hero-proof > span,
  .workflow-hero-proof > span,
  .product-proof-bar > span,
  .pricing-notes > span {
    width: 100%;
    white-space: normal;
  }

  .export-showcase-badges > .export-compat-card {
    min-height: 62px;
  }

  .early-download-panel {
    width: 100%;
  }
}

/* Final V91 alignment guard: older generic badge rules gave the inner label
   a 66px minimum height, separating it vertically from the icon. */
.export-showcase-badges > .export-compat-card > .export-compat-label {
  min-height: 0 !important;
  height: auto !important;
  align-self: center;
}

/* ==========================================================
   V92 — MAIN SUBPAGE HERO CTA ALIGNMENT + NEUTRAL PROOF TEXT
   Features, Workflow, Inside the App and Who It's For align
   hero actions with the left edge of their copy. Home and
   Pricing remain unchanged. Product proof labels use one
   neutral text colour; cyan remains only on the bullet accent.
   ========================================================== */
body[data-page-path="features.html"] .features-page-hero-copy > .subpage-actions,
body[data-page-path="workflow.html"] .workflow-page-hero-copy > .subpage-actions,
body[data-page-path="inside-app.html"] .expanded-hero > div:first-child > .subpage-actions,
body[data-page-path="who-its-for.html"] .expanded-hero > div:first-child > .subpage-actions {
  justify-content: flex-start !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep technical product names visually identical to the surrounding
   label in the Home proof row. Do not paint MIDI or Piano Roll cyan. */
.product-proof-bar > span .technical-token {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #aaa8b2 !important;
  color: #aaa8b2 !important;
}

@media (max-width: 640px) {
  body[data-page-path="features.html"] .features-page-hero-copy > .subpage-actions,
  body[data-page-path="workflow.html"] .workflow-page-hero-copy > .subpage-actions,
  body[data-page-path="inside-app.html"] .expanded-hero > div:first-child > .subpage-actions,
  body[data-page-path="who-its-for.html"] .expanded-hero > div:first-child > .subpage-actions {
    align-items: stretch !important;
  }
}


/* ==========================================================
   V94 — UNSIGNED macOS BETA DOWNLOAD INTERMEDIATE PAGE
   The existing site CTAs route here first. Only the explicit
   consent button below links directly to the R2 ZIP package.
   ========================================================== */
.beta-download-page-body {
  min-height: 100vh;
}

.beta-download-main {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(72px, 8vw, 116px) 0 clamp(92px, 10vw, 142px);
}

.beta-download-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid rgba(151, 89, 238, .34);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, rgba(180, 58, 255, .14), transparent 34%),
    radial-gradient(circle at 100% 15%, rgba(39, 173, 255, .11), transparent 32%),
    linear-gradient(145deg, rgba(18, 13, 31, .96), rgba(6, 10, 20, .98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
}

.beta-download-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.025), transparent 36%);
}

.beta-download-intro,
.beta-download-grid,
.beta-download-actions {
  position: relative;
  z-index: 1;
}

.beta-download-intro {
  max-width: 860px;
}

.beta-download-intro .section-kicker {
  margin-bottom: 22px;
}

.beta-download-intro h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.beta-download-intro h2 {
  margin: 28px 0 12px;
  color: #f5f2fb;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
}

.beta-download-intro > p {
  max-width: 790px;
  margin: 0;
  color: #b8b4c4;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
}

.beta-download-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 22px;
  margin-top: clamp(34px, 5vw, 54px);
}

.beta-download-steps,
.beta-download-safety {
  min-width: 0;
  border: 1px solid rgba(124, 96, 205, .28);
  border-radius: 22px;
  background: rgba(7, 9, 19, .72);
}

.beta-download-steps {
  padding: clamp(24px, 3.5vw, 38px);
}

.beta-download-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.beta-download-section-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 99, 255, .42);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(167, 56, 255, .25), rgba(46, 133, 255, .16));
  color: #e8a6ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
}

.beta-download-section-heading h3 {
  margin: 0;
  color: #f3eff9;
  font-size: 22px;
}

.beta-download-steps ol {
  counter-reset: beta-step;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beta-download-steps li {
  counter-increment: beta-step;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(122, 111, 171, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
  color: #c9c5d2;
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.beta-download-steps li::before {
  content: counter(beta-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(177, 77, 255, .16);
  color: #dc8bff;
  font-size: 12px;
  font-weight: 900;
}

.beta-download-steps li > span {
  min-width: 0;
  padding-top: 2px;
}

.beta-download-steps strong {
  color: #f2eef8;
  font-weight: 700;
  white-space: normal;
}

.beta-download-safety {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3.5vw, 36px);
  background:
    radial-gradient(circle at 100% 0%, rgba(35, 164, 255, .12), transparent 46%),
    rgba(7, 11, 22, .8);
}

.beta-download-warning-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border: 1px solid rgba(55, 178, 255, .45);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(46, 129, 255, .24), rgba(173, 53, 255, .17));
  color: #66d5ff;
  font-size: 28px;
  font-weight: 900;
}

.beta-download-safety > div:nth-child(2) > span {
  display: block;
  margin-bottom: 10px;
  color: #72d9ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.beta-download-safety p {
  margin: 0;
  color: #c3bfcc;
  line-height: 1.65;
}

.beta-download-file-card {
  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding-top: 28px;
}

.beta-download-file-card small,
.beta-download-file-card strong {
  display: block;
}

.beta-download-file-card small {
  margin-bottom: 7px;
  color: #8f8b9c;
  font-size: 12px;
  font-weight: 700;
}

.beta-download-file-card strong {
  color: #e7e3ee;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.beta-download-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(34px, 5vw, 54px);
  text-align: center;
}

.beta-download-button {
  min-height: 60px;
  max-width: 100%;
  padding-inline: clamp(22px, 4vw, 38px);
  white-space: normal;
  text-align: center;
}

.beta-download-actions .download-meta {
  margin-top: 14px !important;
  white-space: normal;
}

@media (max-width: 860px) {
  .beta-download-grid {
    grid-template-columns: 1fr;
  }

  .beta-download-file-card {
    margin-top: 26px;
  }
}

@media (max-width: 640px) {
  .beta-download-main {
    width: min(100% - 24px, 1180px);
    padding-top: 42px;
  }

  .beta-download-shell {
    padding: 24px 18px 30px;
    border-radius: 22px;
  }

  .beta-download-intro h1 {
    font-size: clamp(37px, 12vw, 52px);
  }

  .beta-download-steps,
  .beta-download-safety {
    padding: 20px 16px;
  }

  .beta-download-steps li {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-inline: 10px;
  }

  .beta-download-button {
    width: 100%;
  }
}

/* ==========================================================
   V95 — Genres + Style DNA showcase
   Adds a compact Home teaser and a fuller Features section.
   Existing Hero, export, download gateway and language layout
   remain unchanged.
   ========================================================== */
.genre-style-home {
  padding-top: clamp(88px, 8vw, 132px);
  padding-bottom: clamp(88px, 8vw, 132px);
  background:
    radial-gradient(circle at 18% 22%, rgba(174, 62, 255, .10), transparent 33%),
    radial-gradient(circle at 82% 72%, rgba(36, 174, 255, .08), transparent 36%);
}

.genre-style-home .section-heading {
  margin-bottom: clamp(40px, 4vw, 62px);
}

.genre-style-home-grid {
  width: min(1320px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 34px);
}

.genre-style-home-card,
.features-genre-style-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 88, 232, .32);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(20, 15, 35, .95), rgba(5, 12, 24, .98));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .28);
}

.genre-style-home-copy {
  min-height: 190px;
  padding: clamp(25px, 2.5vw, 36px);
}

.genre-style-home-copy > span,
.features-genre-style-copy > span {
  display: block;
  color: #d984ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.genre-style-home-copy h3,
.features-genre-style-copy h3 {
  margin: 12px 0 10px;
  color: #f7f4fb;
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.genre-style-home-copy p,
.features-genre-style-copy p {
  margin: 0;
  color: #aaa8b4;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
}

.genre-style-home-media,
.features-genre-style-media {
  position: relative;
  overflow: hidden;
  background: #050811;
}

.genre-style-home-media {
  aspect-ratio: 16 / 10;
  border-top: 1px solid rgba(150, 99, 225, .24);
}

.genre-style-home-media::after,
.features-genre-style-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(117, 185, 255, .08);
}

.genre-style-home-media img,
.features-genre-style-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.genre-style-chip-row {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(28px, 3vw, 42px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.genre-style-chip-row > span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(119, 137, 205, .28);
  border-radius: 999px;
  background: rgba(8, 12, 24, .78);
  color: #c9c7d1;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.genre-style-home .home-section-actions {
  margin-top: 34px;
}

.features-genre-style-section {
  padding: clamp(92px, 8vw, 138px) 0;
  background:
    radial-gradient(circle at 16% 28%, rgba(169, 61, 255, .11), transparent 34%),
    radial-gradient(circle at 86% 68%, rgba(28, 173, 255, .09), transparent 34%);
  border-top: 1px solid rgba(122, 68, 189, .18);
  border-bottom: 1px solid rgba(45, 122, 189, .16);
}

.features-genre-style-section .features-section-heading {
  margin-bottom: clamp(44px, 5vw, 72px);
}

.features-genre-style-grid {
  width: min(1320px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 36px);
}

.features-genre-style-card {
  display: flex;
  flex-direction: column;
}

.features-genre-style-media {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid rgba(150, 99, 225, .24);
}

.features-genre-style-copy {
  flex: 1 1 auto;
  min-height: 230px;
  padding: clamp(27px, 2.6vw, 38px);
}

.features-genre-proof {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(34px, 4vw, 56px) auto 0;
  padding: 25px 26px 28px;
  border: 1px solid rgba(133, 89, 200, .25);
  border-radius: 22px;
  background: rgba(7, 10, 21, .68);
  text-align: center;
}

.features-genre-proof > strong {
  display: block;
  color: #ece9f2;
  font-size: 15px;
  line-height: 1.4;
}

.features-genre-proof .genre-style-chip-row {
  width: 100%;
  margin-top: 18px;
}

@media (max-width: 920px) {
  .genre-style-home-grid,
  .features-genre-style-grid {
    grid-template-columns: 1fr;
    width: min(720px, calc(100% - 32px));
  }

  .genre-style-home-copy,
  .features-genre-style-copy {
    min-height: 0;
  }

  .genre-style-chip-row,
  .features-genre-proof {
    width: min(720px, calc(100% - 32px));
  }
}

@media (max-width: 560px) {
  .genre-style-home,
  .features-genre-style-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .genre-style-home-grid,
  .features-genre-style-grid {
    width: calc(100% - 24px);
    gap: 18px;
  }

  .genre-style-home-card,
  .features-genre-style-card {
    border-radius: 19px;
  }

  .genre-style-home-copy,
  .features-genre-style-copy {
    padding: 22px 20px 24px;
  }

  .genre-style-home-copy h3,
  .features-genre-style-copy h3 {
    font-size: 25px;
  }

  .genre-style-home-copy p,
  .features-genre-style-copy p {
    font-size: 15px;
  }

  .genre-style-chip-row,
  .features-genre-proof {
    width: calc(100% - 24px);
  }

  .genre-style-chip-row {
    gap: 8px;
  }

  .genre-style-chip-row > span {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .features-genre-proof {
    padding: 22px 14px 24px;
  }
}


/* ==========================================================
   V96 — private beta programme, forms and four-column footer
   ========================================================== */
.site-footer-grid--four{grid-template-columns:repeat(4,minmax(0,1fr));}
.footer-bottom{margin-top:30px;padding-top:28px;border-top:1px solid rgba(138,73,191,.14);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.footer-bottom>p{margin:0;font-size:13px;text-align:left;}
.beta-footer-status{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid rgba(87,214,170,.28);border-radius:999px;background:rgba(18,57,47,.3);color:#d9fff0;font-size:12px;}
.beta-footer-status>span{width:8px;height:8px;border-radius:50%;background:#54dfa5;box-shadow:0 0 14px rgba(84,223,165,.75);}
html[data-beta-status="waitlist"] .beta-footer-status{border-color:rgba(244,193,82,.32);background:rgba(74,51,16,.32);color:#ffe7a8;}
html[data-beta-status="waitlist"] .beta-footer-status>span{background:#f4c152;box-shadow:0 0 14px rgba(244,193,82,.68);}
html[data-beta-status="closed"] .beta-footer-status{border-color:rgba(151,151,164,.28);background:rgba(48,48,58,.38);color:#d2d0d9;}
html[data-beta-status="closed"] .beta-footer-status>span{background:#9797a4;box-shadow:none;}
.private-beta-main{padding-bottom:110px;}
.private-beta-hero{width:min(1180px,calc(100% - 64px));margin:0 auto;padding:92px 0 78px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.72fr);gap:54px;align-items:center;}
.private-beta-hero-copy h1{max-width:850px;margin:18px 0 24px;font-size:clamp(52px,5.6vw,84px);line-height:1.02;letter-spacing:-.055em;}
.private-beta-hero-copy>p{max-width:780px;margin:0;color:#aaa7b2;font-size:18px;line-height:1.72;}
.private-beta-hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.beta-status-card{padding:30px;border:1px solid rgba(84,223,165,.34);border-radius:24px;background:linear-gradient(145deg,rgba(17,54,44,.72),rgba(9,14,25,.96));box-shadow:0 28px 80px rgba(0,0,0,.34),0 0 42px rgba(84,223,165,.08);}
.beta-status-card>span{color:#8df0c5;font-size:11px;font-weight:800;letter-spacing:.16em;}
.beta-status-line{margin:18px 0 13px;display:flex;align-items:center;gap:12px;}
.beta-status-line i{width:12px;height:12px;border-radius:50%;background:#54dfa5;box-shadow:0 0 18px rgba(84,223,165,.82);}
.beta-status-line strong{font-size:25px;color:#f4fff9;}
.beta-status-card p{margin:0;color:#b8c9c2;line-height:1.65;}
.beta-status-card small{display:block;margin-top:22px;padding-top:18px;border-top:1px solid rgba(113,220,180,.16);color:#8ea49b;}
.beta-status-card--waitlist{border-color:rgba(244,193,82,.34);background:linear-gradient(145deg,rgba(70,49,15,.66),rgba(9,14,25,.96));}.beta-status-card--waitlist>span{color:#ffd979}.beta-status-card--waitlist .beta-status-line i{background:#f4c152;box-shadow:0 0 18px rgba(244,193,82,.75)}
.beta-status-card--closed{border-color:rgba(151,151,164,.3);background:linear-gradient(145deg,rgba(45,45,57,.66),rgba(9,14,25,.96));}.beta-status-card--closed>span{color:#b9b7c3}.beta-status-card--closed .beta-status-line i{background:#9797a4;box-shadow:none}
.beta-intro{width:min(1180px,calc(100% - 64px));margin:0 auto;padding:84px 0;text-align:center;border-top:1px solid rgba(132,74,192,.16);}
.beta-intro h2{max-width:900px;margin:16px auto 18px;font-size:clamp(40px,5vw,68px);line-height:1.08;letter-spacing:-.045em;}
.beta-intro>p{max-width:820px;margin:0 auto;color:#a9a5b1;font-size:18px;line-height:1.72;}
.beta-feature-list{margin:42px auto 0;padding:0;max-width:940px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;text-align:left;}
.beta-feature-list li,.beta-info-grid li{display:flex;align-items:flex-start;gap:12px;color:#d8d3df;line-height:1.55;}.beta-feature-list li{padding:18px 20px;border:1px solid rgba(104,75,158,.28);border-radius:15px;background:rgba(10,11,20,.62)}
.beta-feature-list li span,.beta-info-grid li span{flex:0 0 auto;color:#59ddff;font-weight:900}.beta-feature-list p,.beta-info-grid p{margin:0;}
.beta-info-grid{width:min(1180px,calc(100% - 64px));margin:0 auto;padding:20px 0 90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.beta-info-grid article{padding:30px;border:1px solid rgba(104,75,158,.3);border-radius:22px;background:linear-gradient(145deg,rgba(20,13,34,.82),rgba(7,10,18,.94));}
.beta-info-grid h2{margin:15px 0 24px;color:#f0edf4;font-size:28px;line-height:1.14;letter-spacing:-.035em;}.beta-info-grid ul{margin:0;padding:0;display:grid;gap:14px;list-style:none;}
.beta-form-section{width:min(1100px,calc(100% - 64px));margin:0 auto;padding:70px 0 20px;}
.beta-form-heading{text-align:center;margin-bottom:34px}.beta-form-heading h2{max-width:820px;margin:15px auto;font-size:clamp(38px,5vw,62px);line-height:1.08;letter-spacing:-.045em}.beta-form-heading p{max-width:760px;margin:0 auto;color:#a9a5b1;font-size:17px;line-height:1.7}
.beta-program-form select{width:100%;min-width:0;height:48px;border:1px solid rgba(100,75,151,.48);border-radius:10px;outline:none;background:#070912;color:#fff;padding:0 13px;font:inherit;}
.beta-program-form select:focus,.beta-program-form input:focus,.beta-program-form textarea:focus{border-color:#7adfff;box-shadow:0 0 0 3px rgba(67,184,255,.1)}
.beta-consent-field label{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid rgba(82,159,201,.28);border-radius:12px;background:rgba(7,12,22,.68);font-weight:500;line-height:1.55}.beta-consent-field input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}.beta-form-actions{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.beta-form-actions .contact-form-status{margin:0;color:#9edfff}.beta-privacy-note{margin:24px 0 0;color:#8f8b98;font-size:13px;line-height:1.65}.beta-privacy-note a{color:#9bdfff}.beta-closed-panel{padding:48px;border:1px solid rgba(151,151,164,.28);border-radius:24px;text-align:center;background:rgba(18,18,28,.76)}.beta-closed-panel h2{margin:15px 0;font-size:clamp(36px,4vw,54px)}.beta-closed-panel p{max-width:720px;margin:0 auto;color:#aaa7b2;line-height:1.7}.redirect-page{min-height:100vh;display:grid;place-content:center;text-align:center;padding:40px}.redirect-page h1{color:#fff}
@media(max-width:1050px){.private-beta-hero{grid-template-columns:1fr}.beta-status-card{max-width:680px}.beta-info-grid{grid-template-columns:1fr}.site-footer-grid--four{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.private-beta-hero,.beta-intro,.beta-info-grid,.beta-form-section{width:calc(100% - 40px)}.private-beta-hero{padding:56px 0}.private-beta-hero-copy h1{font-size:clamp(43px,12vw,62px)}.private-beta-hero-actions{display:grid}.private-beta-hero-actions .button{width:100%;justify-content:center}.beta-feature-list{grid-template-columns:1fr}.contact-form-grid{grid-template-columns:1fr}.contact-field--full{grid-column:auto}.site-footer-grid--four{grid-template-columns:1fr}.footer-bottom{align-items:flex-start;flex-direction:column}.beta-footer-status{max-width:100%;white-space:normal}.beta-form-actions .button{width:100%;justify-content:center}}

/* V97 remote private beta system */
.beta-availability{display:inline-flex;align-items:center;gap:8px;margin:13px 0 0;padding:8px 12px;border:1px solid rgba(84,223,165,.22);border-radius:999px;background:rgba(25,74,56,.24);color:#cffff0;font-size:12px;font-weight:700;}
.beta-availability[hidden]{display:none!important;}
.beta-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}
.beta-turnstile{grid-column:1/-1;margin:4px 0 2px;min-height:0;}
.beta-turnstile[hidden]{display:none!important;}
.beta-program-form button[type="submit"]:disabled{opacity:.62;cursor:wait;transform:none;box-shadow:none;}
html[data-beta-backend="offline"] .beta-status-card:after{content:"Live status reconnecting";display:block;margin-top:10px;color:#8d899c;font-size:11px;}


/* V98 — visible beta status, dedicated Support page and local status preview */
.beta-top-status{
  position:relative;
  z-index:25;
  display:block;
  border-top:1px solid rgba(117,79,190,.16);
  border-bottom:1px solid rgba(117,79,190,.22);
  background:linear-gradient(90deg,rgba(8,13,24,.96),rgba(20,12,39,.94),rgba(8,17,30,.96));
  color:#dfffee;
  text-decoration:none;
}
.beta-top-status__inner{
  width:min(var(--container),calc(100% - 64px));
  min-height:42px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
}
.beta-top-status__dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#54dfa5;
  box-shadow:0 0 14px rgba(84,223,165,.78);
}
.beta-top-status strong{font-size:12px;color:inherit;}
.beta-top-status__action{
  margin-left:8px;
  color:#a8dfff;
  font-weight:700;
}
.beta-top-status:hover .beta-top-status__action,
.beta-top-status:focus-visible .beta-top-status__action{color:#fff;}
html[data-beta-status="waitlist"] .beta-top-status{
  color:#ffe7a8;
  border-color:rgba(244,193,82,.22);
  background:linear-gradient(90deg,rgba(20,16,11,.96),rgba(51,34,10,.9),rgba(15,16,25,.96));
}
html[data-beta-status="waitlist"] .beta-top-status__dot{
  background:#f4c152;
  box-shadow:0 0 14px rgba(244,193,82,.68);
}
html[data-beta-status="closed"] .beta-top-status{
  color:#d2d0d9;
  border-color:rgba(151,151,164,.22);
  background:linear-gradient(90deg,rgba(14,14,21,.96),rgba(31,30,40,.92),rgba(14,15,23,.96));
}
html[data-beta-status="closed"] .beta-top-status__dot{
  background:#9797a4;
  box-shadow:none;
}
.support-request-form select{
  width:100%;
  min-height:54px;
  padding:0 15px;
  border:1px solid rgba(89,111,157,.42);
  border-radius:10px;
  background:#070c16;
  color:#f2eef8;
  font:inherit;
  outline:none;
}
.support-request-form select:focus{
  border-color:#8d65ff;
  box-shadow:0 0 0 3px rgba(132,84,255,.12);
}
.beta-local-preview{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  width:min(430px,calc(100vw - 36px));
  padding:13px;
  border:1px solid rgba(151,108,255,.48);
  border-radius:15px;
  background:rgba(7,8,17,.96);
  box-shadow:0 20px 55px rgba(0,0,0,.52),0 0 30px rgba(114,69,228,.16);
  backdrop-filter:blur(16px);
}
.beta-local-preview>strong{
  display:block;
  margin:0 0 9px;
  color:#b5ddff;
  font-size:10px;
  letter-spacing:.15em;
}
.beta-local-preview>div{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.beta-local-preview button{
  min-height:34px;
  padding:6px 8px;
  border:1px solid rgba(111,91,159,.48);
  border-radius:9px;
  background:#10101d;
  color:#d9d4e5;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.beta-local-preview button:hover,
.beta-local-preview button:focus-visible,
.beta-local-preview button.is-active{
  border-color:#9e78ff;
  background:linear-gradient(135deg,#6b38eb,#9f69ff);
  color:#fff;
}
html[data-beta-backend="local-preview"] .beta-status-card:after{
  content:"Local preview mode — no data is sent";
  display:block;
  margin-top:10px;
  color:#8d899c;
  font-size:11px;
}
@media(max-width:700px){
  .beta-top-status__inner{
    width:calc(100% - 32px);
    min-height:46px;
    justify-content:flex-start;
  }
  .beta-top-status__action{
    margin-left:auto;
    white-space:nowrap;
  }
  .beta-local-preview>div{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:460px){
  .beta-top-status__action{display:none;}
}

/* V99 — clearer select controls and verified local/live beta source */
.beta-program-form select,
.support-request-form select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:48px;
  background-color:#070912;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23b9c7df' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:14px 9px;
}
.support-request-form select{background-color:#070c16;}
.beta-program-form select::-ms-expand,
.support-request-form select::-ms-expand{display:none;}

.beta-local-preview{
  width:min(470px,calc(100vw - 36px));
}
.beta-local-preview>.beta-local-preview__connection{
  display:flex;
  align-items:center;
  min-height:32px;
  margin:0 0 10px;
  padding:7px 10px 7px 28px;
  position:relative;
  border:1px solid rgba(111,91,159,.34);
  border-radius:9px;
  background:#0c0d18;
  color:#aaa6b7;
  font-size:10px;
  line-height:1.35;
}
.beta-local-preview>.beta-local-preview__connection::before{
  content:"";
  position:absolute;
  left:11px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8f8c9b;
}
.beta-local-preview>.beta-local-preview__connection[data-state="checking"]::before{
  background:#55bfff;
  box-shadow:0 0 12px rgba(85,191,255,.7);
}
.beta-local-preview>.beta-local-preview__connection[data-state="connected"]{
  color:#cffff0;
  border-color:rgba(84,223,165,.32);
  background:rgba(20,70,52,.22);
}
.beta-local-preview>.beta-local-preview__connection[data-state="connected"]::before{
  background:#54dfa5;
  box-shadow:0 0 12px rgba(84,223,165,.78);
}
.beta-local-preview>.beta-local-preview__connection[data-state="manual"]{
  color:#ffe7a8;
  border-color:rgba(244,193,82,.28);
  background:rgba(74,51,16,.2);
}
.beta-local-preview>.beta-local-preview__connection[data-state="manual"]::before{
  background:#f4c152;
  box-shadow:0 0 12px rgba(244,193,82,.6);
}
.beta-local-preview>.beta-local-preview__connection[data-state="offline"]{
  color:#ffbec8;
  border-color:rgba(255,120,143,.28);
  background:rgba(79,24,37,.2);
}
.beta-local-preview>.beta-local-preview__connection[data-state="offline"]::before{
  background:#ff788f;
}
.beta-local-preview>.beta-local-preview__buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
@media(max-width:560px){
  .beta-local-preview>.beta-local-preview__buttons{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* V100 — required fields, polished selects and accessible beta consent */
.beta-required-note{
  margin:0 0 18px;
  color:#a7a2b2;
  font-size:13px;
  line-height:1.5;
}
.required-marker{
  color:#ff79b9;
  font-weight:900;
}
.beta-program-form select,
.support-request-form select{
  padding-right:58px!important;
  background-position:right 22px center!important;
  background-size:14px 9px!important;
}
.beta-other-genre-field[hidden]{display:none!important;}
.beta-consent-field{
  padding:16px;
  border:1px solid rgba(82,159,201,.28);
  border-radius:12px;
  background:rgba(7,12,22,.68);
}
.beta-consent-control{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:start;
  gap:12px;
}
.beta-consent-control input[type="checkbox"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  margin:2px 0 0!important;
  padding:0!important;
  border:1px solid rgba(126,157,210,.72)!important;
  border-radius:5px!important;
  background:#070b14!important;
  box-shadow:none!important;
  cursor:pointer;
}
.beta-consent-control input[type="checkbox"]:hover{
  border-color:#8edfff!important;
}
.beta-consent-control input[type="checkbox"]:focus,
.beta-consent-control input[type="checkbox"]:focus-visible{
  outline:2px solid rgba(93,205,255,.9)!important;
  outline-offset:3px!important;
  box-shadow:none!important;
}
.beta-consent-control input[type="checkbox"]:checked{
  border-color:#59cfff!important;
  background-color:#177de8!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5 5 9l7.5-7.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:13px 10px!important;
}
.beta-consent-control label{
  justify-self:start;
  width:auto;
  margin:0;
  color:#d8d5df;
  font-weight:500;
  line-height:1.55;
  cursor:pointer;
}
.beta-program-form button[type="submit"]:disabled{
  opacity:.43!important;
  filter:saturate(.25);
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}
.beta-program-form button[type="submit"][data-submitting="true"]{
  opacity:.72!important;
  filter:none;
  cursor:wait!important;
}
.beta-program-form input:invalid:not(:placeholder-shown),
.beta-program-form textarea:invalid:not(:placeholder-shown),
.beta-program-form select:invalid:not(:focus){
  border-color:rgba(100,75,151,.48);
}


/* ==========================================================
   V103 — GLOBAL COPY SPACING + DAW COMPATIBILITY AUDIT FIX
   ========================================================== */
.section-kicker { gap: .28em; }
.support-section > h2 .technical-token,
.features-faq-grid summary .technical-token,
.features-faq-section > details > summary .technical-token {
  display: inline-block !important;
  margin-inline: .13em !important;
  white-space: nowrap !important;
}
.daw-name-grid > .daw-compat-card {
  box-sizing:border-box;min-width:0;min-height:70px;padding:15px 17px;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;border:1px solid rgba(73,111,167,.38);border-radius:12px;color:#d8d3df;background:#080c16;
}
.daw-name-grid > .daw-compat-card .daw-compat-icon {width:30px;height:30px;flex:0 0 30px;object-fit:contain;display:block;}
.daw-name-grid > .daw-compat-card .daw-compat-generic {width:34px;height:30px;flex:0 0 34px;display:grid;place-items:center;margin:0!important;padding:0!important;border:1px solid rgba(73,211,255,.28)!important;border-radius:8px!important;background:rgba(33,139,214,.08)!important;color:#77d9ff!important;font-size:9px!important;font-weight:800!important;letter-spacing:.08em!important;}
.daw-name-grid > .daw-compat-card .daw-compat-label,
.daw-name-grid > .daw-compat-card .technical-token {min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important;font:inherit!important;line-height:1.35!important;text-align:left!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;}
@media(max-width:760px){.daw-name-grid > .daw-compat-card{min-height:62px;padding:13px 15px;}}