@media (width<=768px) {
  input[type=text],
  input[type=tel],
  input[type=email],
  input[type=number],
  input[type=search],
  input[type=url],
  input[type=password],
  input:not([type]),
  textarea,
  select {
    font-size:16px!important
  }
}
html,
body {
  max-width:100vw;
  overflow-x:hidden
}
*,
:before,
:after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
:root {
  --c-primary-50:#f7f7f7;
  --c-primary-100:#f1efef;
  --c-primary-200:#e6dad6;
  --c-primary-300:#debbaf;
  --c-primary-400:#d48f77;
  --c-primary-500:#c96240;
  --c-primary-600:#ab4b2b;
  --c-primary-700:#813a22;
  --c-primary-800:#552a1b;
  --c-primary-900:#331c14;
  --c-primary-950:#1b110e;
  --c-primary:var(--c-primary-500);
  --c-primary-deep:var(--c-primary-700);
  --c-accent:var(--c-primary);
  --c-accent-deep:var(--c-primary-deep);
  --c-accent-soft:color-mix(in oklab, var(--c-accent), transparent 88%);
  --c-neutral-50:#fafaf9;
  --c-neutral-100:#f5f5f4;
  --c-neutral-200:#e7e5e4;
  --c-neutral-300:#d6d3d1;
  --c-neutral-400:#a8a29e;
  --c-neutral-500:#78716c;
  --c-neutral-600:#57534e;
  --c-neutral-700:#44403c;
  --c-neutral-800:#292524;
  --c-neutral-900:#1c1917;
  --c-neutral-950:#0c0a09;
  --c-white:#fff;
  --c-black:#000;
  --c-bg:var(--c-neutral-50);
  --c-bg-elev:var(--c-white);
  --c-surface:var(--c-white);
  --c-surface-alt:var(--c-neutral-100);
  --c-surface-tint:#fbede6;
  --c-text:var(--c-neutral-900);
  --c-text-body:var(--c-neutral-700);
  --c-text-muted:var(--c-neutral-500);
  --c-text-faint:var(--c-neutral-400);
  --c-text-inverse:var(--c-white);
  --c-border:var(--c-neutral-200);
  --c-border-strong:var(--c-neutral-300);
  --c-border-soft:#0000000f;
  --c-success:#1f8a5b;
  --c-warning:#b86f1a;
  --c-danger:#b83a3a;
  --c-font:"Inter", system-ui, sans-serif;
  --c-font-display:"Plus Jakarta Sans", system-ui, sans-serif;
  --c-font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --c-fs-xs:.75rem;
  --c-fs-sm:.875rem;
  --c-fs-body:1rem;
  --c-fs-lg:1.125rem;
  --c-fs-h4:1.25rem;
  --c-fs-h3:1.5rem;
  --c-fs-h2:2rem;
  --c-fs-h1:2.75rem;
  --c-fs-display:3.75rem;
  --c-fs-hero:5rem;
  --c-fw-regular:400;
  --c-fw-medium:500;
  --c-fw-semibold:600;
  --c-fw-bold:700;
  --c-lh-tight:1.05;
  --c-lh-snug:1.2;
  --c-lh-normal:1.5;
  --c-lh-loose:1.65;
  --c-ls-tight:-.02em;
  --c-ls-tighter:-.03em;
  --c-1:4px;
  --c-2:8px;
  --c-3:12px;
  --c-4:16px;
  --c-5:20px;
  --c-6:24px;
  --c-8:32px;
  --c-10:40px;
  --c-12:48px;
  --c-16:64px;
  --c-20:80px;
  --c-24:96px;
  --c-container-max:1200px;
  --c-container-pad:clamp(16px, 5vw, 64px);
  --c-touch-min:44px;
  --c-container:1240px;
  --c-content:760px;
  --c-narrow:560px;
  --c-radius-xs:6px;
  --c-radius-sm:10px;
  --c-radius-md:14px;
  --c-radius-lg:20px;
  --c-radius-xl:28px;
  --c-radius-pill:999px;
  --c-shadow-xs:0 2px 4px #813a220f;
  --c-shadow-sm:0 4px 10px #813a2214, 0 1px 3px #813a220d;
  --c-shadow-md:0 8px 24px #813a221a, 0 2px 6px #813a220f;
  --c-shadow-lg:0 20px 50px #813a2224, 0 4px 12px #813a220f;
  --c-shadow-focus:0 0 0 4px #c9624038;
  --c-ease-out:cubic-bezier(.16, 1, .3, 1);
  --c-ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --c-ease:var(--c-ease-spring);
  --c-t-fast:.24s var(--c-ease);
  --c-t:.42s var(--c-ease);
  --c-t-slow:.6s var(--c-ease);
  --c-gradient-hero:linear-gradient(160deg, #fafaf9 0%, #fbede6 48%, #f1d8c9 100%);
  --c-gradient-title:linear-gradient(120deg, #d48f77 0%, #c96240 50%, #813a22 100%);
  --c-gradient-cta:linear-gradient(135deg, #d48f77 0%, #c96240 55%, #ab4b2b 100%);
  --c-gradient-avatar:linear-gradient(135deg, #c96240, #813a22);
  --c-gradient-deep:linear-gradient(150deg, #552a1b 0%, #813a22 45%, #c96240 100%);
  --via-bg:var(--c-bg);
  --via-surface:var(--c-surface);
  --via-surface-alt:var(--c-surface-alt);
  --via-surface-tint:var(--c-surface-tint);
  --via-text-primary:var(--c-text);
  --via-text-body:var(--c-text-body);
  --via-text-muted:var(--c-text-muted);
  --via-text-soft:var(--c-text-faint);
  --via-border:var(--c-border);
  --via-border-soft:var(--c-border-soft);
  --via-accent:var(--c-accent);
  --via-accent-deep:var(--c-accent-deep);
  --via-accent-border:var(--c-primary-300);
  --via-accent-on:var(--c-text-inverse);
  --via-bg-hero:var(--c-gradient-hero);
  --purple-deep:var(--c-accent-deep);
  --purple-heading:var(--c-accent-deep);
  --purple-mid:var(--c-text-muted);
  --purple-btn:var(--c-accent);
  --purple-soft:var(--c-primary-300);
  --purple-accent:var(--c-accent-deep);
  --purple-light-bg:var(--c-surface-tint);
  --pink-main:var(--c-accent);
  --pink-light-bg:var(--c-surface-alt);
  --pink-faint-bg:var(--c-surface-tint);
  --pink-placeholder:var(--c-text-faint);
  --text-dark:var(--c-text);
  --text-muted:var(--c-text-body);
  --text-small-muted:var(--c-text-muted);
  --bg-white:var(--c-surface);
  --bg-slate-50:var(--c-bg);
  --bg-fafafa:var(--c-surface-alt);
  --bg-hero:var(--c-gradient-hero);
  --border-color:var(--c-border);
  --border-light:var(--c-border-soft);
  --gradient-title:var(--c-gradient-title);
  --gradient-avatar:var(--c-gradient-avatar);
  --gradient-cta:var(--c-gradient-cta);
  --gradient-purple:var(--c-gradient-deep);
  --font-heading:var(--c-font-display);
  --font-body:var(--c-font);
  --font-mono:var(--c-font-mono);
  --shadow-sm:var(--c-shadow-sm);
  --shadow-md:var(--c-shadow-md);
  --shadow-lg:var(--c-shadow-lg)
}
[data-theme=dark] {
  --c-bg:var(--c-neutral-950);
  --c-bg-elev:var(--c-neutral-900);
  --c-surface:var(--c-neutral-900);
  --c-surface-alt:var(--c-neutral-800);
  --c-surface-tint:#3a1f14;
  --c-text:var(--c-neutral-50);
  --c-text-body:var(--c-neutral-200);
  --c-text-muted:var(--c-neutral-400);
  --c-text-faint:var(--c-neutral-500);
  --c-text-inverse:var(--c-neutral-900);
  --c-border:#ffffff1a;
  --c-border-strong:#fff3;
  --c-border-soft:#ffffff0f;
  --c-accent:var(--c-primary-400);
  --c-accent-deep:var(--c-primary-300);
  --c-gradient-hero:linear-gradient(160deg, #0c0a09 0%, #1c1917 55%, #2a1812 100%);
  --c-shadow-xs:0 2px 4px #0000004d;
  --c-shadow-sm:0 4px 10px #00000073, 0 1px 3px #0000004d;
  --c-shadow-md:0 12px 28px #0000008c, 0 2px 6px #00000059;
  --c-shadow-lg:0 26px 60px #000000a6, 0 4px 12px #00000059;
  --c-shadow-focus:0 0 0 4px #d48f774d;
  --via-accent-border:#d48f7752;
  --lightningcss-light: ;
  --lightningcss-dark:initial;
  color-scheme:dark
}
html {
  scroll-behavior:smooth
}
body {
  font-family:var(--font-body);
  color:var(--via-text-body);
  background:var(--via-bg);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  transition:background-color .3s,color .3s;
  overflow-x:hidden
}
.player-time,
.pricing-price,
.plan-price,
.result-plan-price,
.pricing-amount,
.pricing-cents {
  font-family:var(--font-mono)
}
.hero-title,
.section-title,
.plan-name,
.bento-title,
.how-title,
.pay-title,
.chat-name,
.demo-title {
  letter-spacing:-.028em
}
.container {
  max-width:1280px;
  margin:0 auto;
  padding:0 24px
}
.header {
  border-bottom:1px solid var(--border-color);
  -webkit-backdrop-filter:blur(12px);
  z-index:50;
  width:100%;
  padding-left:max(env(safe-area-inset-left,0px), clamp(24px, 5vw, 32px));
  padding-right:max(env(safe-area-inset-right,0px), clamp(24px, 5vw, 32px));
  box-sizing:border-box;
  will-change:transform;
  background:#ffffffd9;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  position:relative
}
.header.hidden {
  pointer-events:none;
  transform:translateY(-100%)
}
.header-inner {
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:1280px;
  height:64px;
  margin:0 auto;
  padding:0;
  display:flex
}
.header-logo {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:700;
  text-decoration:none;
  display:flex
}
.header-logo .accent {
  color:var(--purple-btn)
}
.header-socials {
  align-items:center;
  gap:16px;
  display:flex
}
.header-socials a {
  color:var(--text-small-muted);
  align-items:center;
  font-size:20px;
  text-decoration:none;
  transition:color .2s;
  display:flex
}
.header-socials a:hover {
  color:var(--purple-btn)
}
.hero {
  background:var(--bg-hero);
  padding:24px 0 96px;
  position:relative;
  overflow:hidden
}
.hero-grid {
  grid-template-columns:1fr;
  align-items:center;
  gap:48px;
  display:grid
}
.hero-blur {
  filter:blur(120px);
  pointer-events:none;
  background:#fdcdd333;
  border-radius:50%;
  width:100%;
  max-width:768px;
  height:500px;
  position:absolute;
  top:-100px;
  left:50%;
  transform:translate(-50%)
}
.hero-copy {
  z-index:2;
  position:relative
}
.hero-chip {
  background:var(--bg-white);
  color:var(--purple-deep);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  border-radius:9999px;
  align-items:center;
  gap:6px;
  margin-bottom:22px;
  padding:7px 16px;
  font-size:13px;
  font-weight:600;
  display:inline-flex
}
.hero-title {
  font-family:var(--font-heading);
  letter-spacing:-.01em;
  color:var(--text-dark);
  overflow-wrap:break-word;
  margin-bottom:18px;
  font-size:clamp(28px,8.5vw,40px);
  font-weight:600;
  line-height:1.12
}
.gradient-text {
  background:var(--gradient-title);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  font-style:italic
}
.hero-subtitle {
  color:var(--text-muted);
  max-width:500px;
  margin-bottom:26px;
  font-size:17px;
  line-height:1.7
}
.hero-cta-group {
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:32px;
  display:flex
}
.hero-video-wrap {
  box-shadow:var(--shadow-lg);
  border-radius:18px;
  max-width:540px;
  margin:0 0 26px;
  line-height:0;
  position:relative;
  overflow:hidden
}
.hero-video {
  aspect-ratio:2;
  object-fit:cover;
  cursor:pointer;
  background:#000;
  width:100%;
  display:block
}
.hero-video-sound {
  color:#fff;
  font-size:13px;
  font-weight:600;
  font-family:var(--font-body);
  cursor:pointer;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  background:#0f0c14a8;
  border:none;
  border-radius:9999px;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  transition:background .15s,transform .15s;
  display:inline-flex;
  position:absolute;
  bottom:12px;
  right:12px
}
.hero-video-sound:hover {
  background:#0f0c14d9;
  transform:translateY(-1px)
}
.social-proof {
  align-items:center;
  gap:10px;
  display:flex
}
.avatar-stack {
  display:flex
}
.avatar-stack-item {
  background:var(--gradient-avatar);
  color:#fff;
  border:2px solid #fff;
  border-radius:9999px;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  margin-left:-8px;
  font-size:11px;
  font-weight:600;
  display:flex
}
.avatar-stack-item:first-child {
  margin-left:0
}
.avatar-stack-item:nth-child(2) {
  background:linear-gradient(to right bottom, var(--c-primary-400), var(--c-primary-700))
}
.avatar-stack-item:nth-child(3) {
  background:linear-gradient(to right bottom, var(--c-primary-300), var(--c-primary-500))
}
.stars {
  color:#f59e0b;
  letter-spacing:1px;
  font-size:14px
}
.social-proof-text {
  font-size:13px;
  font-weight:500
}
.form-card {
  background:var(--via-surface);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-lg);
  z-index:2;
  border-radius:24px;
  padding:28px;
  position:relative
}
.form-card-title {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  text-align:center;
  margin-bottom:20px;
  font-size:18px;
  font-weight:700
}
.form-label {
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  display:block
}
.form-label span {
  text-transform:none;
  letter-spacing:0;
  color:var(--text-small-muted);
  margin-left:4px;
  font-size:10px;
  font-weight:400
}
.form-group {
  margin-bottom:16px
}
.input-wrapper {
  position:relative
}
.input-icon {
  color:var(--pink-placeholder);
  pointer-events:none;
  font-size:16px;
  position:absolute;
  top:50%;
  left:14px;
  transform:translateY(-50%)
}
.input-text {
  background:var(--via-surface);
  border:1px solid var(--purple-soft);
  width:100%;
  font-size:16px;
  font-family:var(--font-body);
  color:var(--text-dark);
  border-radius:14px;
  outline:none;
  padding:11px 14px;
  transition:box-shadow .2s,border-color .2s
}
.input-text.has-icon {
  padding-left:40px
}
.input-text::placeholder {
  color:var(--pink-placeholder);
  font-size:15px
}
.input-text:focus {
  border-color:var(--purple-btn);
  box-shadow:0 0 0 2px #c962402e
}
.input-textarea {
  background:var(--bg-slate-50);
  width:100%;
  font-size:16px;
  font-family:var(--font-body);
  color:var(--text-dark);
  resize:none;
  border:none;
  border-radius:14px;
  outline:none;
  height:100px;
  padding:14px;
  line-height:1.6;
  transition:box-shadow .2s
}
.input-textarea::placeholder {
  color:var(--pink-placeholder)
}
.input-textarea:focus {
  box-shadow:0 0 0 2px #c962402e
}
.form-footer {
  color:var(--text-muted);
  text-align:center;
  margin-top:12px;
  font-size:12px
}
.pill-group {
  flex-wrap:wrap;
  gap:8px;
  display:flex
}
.pill {
  border-radius:var(--c-radius-pill);
  border:1px solid var(--c-border);
  background:var(--c-surface);
  font-family:var(--c-font);
  letter-spacing:-.004em;
  color:var(--c-text);
  cursor:pointer;
  transition:transform var(--c-t-fast), background-color var(--c-t-fast), border-color var(--c-t-fast), color var(--c-t-fast);
  padding:7px 14px;
  font-size:13px;
  font-weight:500
}
.pill:hover {
  border-color:var(--c-primary-300);
  background:var(--c-surface-tint);
  color:var(--c-accent-deep);
  transform:translateY(-1px)
}
.pill.selected {
  background:var(--c-surface-tint);
  border-color:var(--c-accent);
  color:var(--c-accent-deep);
  box-shadow:0 0 0 2px #c962402e
}
.btn-primary {
  background:var(--gradient-cta);
  color:#fff;
  width:100%;
  font-family:var(--font-body);
  cursor:pointer;
  border:none;
  border-radius:14px;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:14px 0;
  font-size:17px;
  font-weight:600;
  text-decoration:none;
  transition:box-shadow .25s,transform .15s,filter .2s;
  display:flex;
  box-shadow:0 10px 24px -10px #ab4b2b73
}
.btn-primary:hover {
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:0 16px 30px -10px #ab4b2b6b
}
.btn-primary:active {
  transform:scale(.98)
}
.btn-primary:disabled {
  opacity:.5;
  cursor:not-allowed
}
.btn-primary.auto-width {
  width:auto;
  padding:13px 32px;
  display:inline-flex
}
.btn-secondary {
  border:1px solid var(--border-color);
  background:var(--via-surface);
  color:var(--text-dark);
  cursor:pointer;
  font-size:15px;
  font-family:var(--font-body);
  border-radius:16px;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  text-decoration:none;
  transition:background .2s;
  display:inline-flex
}
.btn-secondary:hover {
  background:var(--bg-slate-50)
}
.btn-cta-sticky {
  z-index:50;
  background:var(--gradient-cta);
  color:#fff;
  cursor:pointer;
  box-shadow:var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  border:none;
  border-radius:9999px;
  align-items:center;
  gap:8px;
  padding:14px 24px;
  font-size:15px;
  font-weight:500;
  transition:opacity .3s,transform .3s;
  display:inline-flex;
  position:fixed;
  bottom:24px;
  right:24px;
  transform:translateY(20px)
}
.btn-cta-sticky.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.btn-cta-sticky:hover {
  opacity:.92;
  transform:translateY(-2px)
}
.bia-fab {
  z-index:50;
  background:var(--via-surface);
  border:1px solid var(--via-border);
  cursor:pointer;
  font-family:var(--font-body);
  opacity:0;
  pointer-events:none;
  border-radius:9999px;
  align-items:center;
  gap:11px;
  padding:8px 18px 8px 8px;
  transition:opacity .3s,transform .3s,box-shadow .25s;
  display:inline-flex;
  position:fixed;
  bottom:20px;
  right:20px;
  transform:translateY(20px)scale(.96);
  box-shadow:0 14px 38px -12px #813a2259
}
.bia-fab.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)scale(1)
}
.bia-fab:hover {
  transform:translateY(-3px);
  box-shadow:0 22px 48px -14px #813a2273
}
.bia-fab-avatar {
  background:var(--gradient-cta);
  border-radius:50%;
  flex-shrink:0;
  width:46px;
  height:46px;
  display:block;
  position:relative;
  overflow:hidden
}
.bia-fab-avatar img {
  object-fit:cover;
  width:100%;
  height:100%;
  display:block
}
.bia-fab-avatar img.hide {
  display:none
}
.bia-fab-dot {
  border:2.5px solid var(--via-surface);
  background:#25d366;
  border-radius:50%;
  width:12px;
  height:12px;
  position:absolute;
  bottom:1px;
  right:1px
}
.bia-fab-info {
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
  display:flex
}
.bia-fab-name {
  color:var(--via-text-primary);
  font-size:15px;
  font-weight:700
}
.bia-fab-status {
  color:#1f8a5b;
  font-size:11.5px;
  font-weight:600
}
.bia-fab {
  display:none!important
}
[data-theme=dark] .bia-fab-status {
  color:#4ed99a
}
@media (width<=480px) {
  .bia-fab {
    padding:7px 15px 7px 7px;
    bottom:16px;
    right:14px
  }
  .bia-fab-avatar {
    width:42px;
    height:42px
  }
}
.section-header {
  text-align:center;
  margin-bottom:52px
}
.section-title {
  font-family:var(--font-heading);
  letter-spacing:-.01em;
  color:var(--text-dark);
  overflow-wrap:break-word;
  margin-bottom:14px;
  font-size:clamp(24px,6.5vw,30px);
  font-weight:600;
  line-height:1.18
}
.section-subtitle {
  color:var(--text-muted);
  max-width:560px;
  margin:0 auto;
  font-size:16px;
  line-height:1.7
}
.benefits {
  background:var(--via-surface);
  border-top:1px solid var(--border-color);
  padding:96px 0
}
.benefits-grid {
  grid-template-columns:1fr;
  gap:24px;
  display:grid
}
.benefit-card {
  background:var(--bg-fafafa);
  border:1px solid var(--border-color);
  border-radius:20px;
  padding:30px;
  transition:transform .25s,box-shadow .25s
}
.benefit-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-5px)
}
.benefit-icon {
  background:var(--purple-light-bg);
  border-radius:16px;
  justify-content:center;
  align-items:center;
  width:52px;
  height:52px;
  margin-bottom:18px;
  font-size:26px;
  display:flex
}
.benefit-title {
  font-family:var(--font-heading);
  margin-bottom:10px;
  font-size:19px;
  font-weight:600
}
.benefit-text {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.7
}
.examples {
  background:var(--gradient-purple);
  padding:96px 0;
  position:relative;
  overflow:hidden
}
.examples .section-title {
  color:#fff
}
.examples .section-subtitle {
  color:#fffc
}
.examples-grid {
  grid-template-columns:1fr;
  gap:20px;
  display:grid
}
.examples:before {
  content:"♪ ♫ ♩ ♬";
  color:#ffffff0d;
  pointer-events:none;
  font-size:120px;
  position:absolute;
  top:20%;
  right:-20px;
  transform:rotate(15deg)
}
.player-card {
  background:var(--via-surface);
  box-shadow:var(--shadow-md);
  border-radius:20px;
  padding:18px 20px;
  transition:transform .25s
}
.player-card:hover {
  transform:translateY(-4px)
}
.player-top {
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  display:flex
}
.play-btn {
  background:var(--pink-light-bg);
  width:44px;
  height:44px;
  color:var(--pink-main);
  cursor:pointer;
  border:none;
  border-radius:9999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  font-size:16px;
  transition:background .2s;
  display:flex
}
.play-btn:hover {
  background:var(--pink-faint-bg)
}
.player-info {
  flex:1;
  min-width:0
}
.player-title {
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:15px;
  font-weight:600;
  overflow:hidden
}
.player-meta {
  color:var(--text-muted);
  align-items:center;
  gap:6px;
  margin-top:2px;
  font-size:12px;
  display:flex
}
.player-time {
  color:var(--text-muted);
  flex-shrink:0;
  font-family:monospace;
  font-size:12px
}
.waveform {
  background:linear-gradient(to bottom, var(--c-primary-100), var(--c-primary-200));
  border-radius:6px;
  align-items:center;
  gap:2px;
  width:100%;
  height:40px;
  padding:0 8px;
  display:flex;
  overflow:hidden
}
.wave-bar {
  background:var(--pink-main);
  opacity:.5;
  border-radius:2px;
  flex:1;
  transition:opacity .3s
}
.player-card:hover .wave-bar {
  opacity:.8
}
.pricing {
  background:var(--bg-slate-50);
  padding:96px 0
}
.pricing-card {
  background:var(--via-surface);
  box-shadow:var(--shadow-sm);
  border:1px solid #f1f5f980;
  border-radius:2rem;
  flex-direction:column;
  align-items:center;
  max-width:400px;
  margin:0 auto;
  padding:32px;
  display:flex
}
.pricing-chip {
  background:var(--purple-light-bg);
  border-radius:9999px;
  margin-bottom:20px;
  padding:8px 32px
}
.pricing-chip h2 {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  letter-spacing:-.02em;
  font-size:20px;
  font-weight:600
}
.pricing-subtitle {
  text-align:center;
  color:var(--purple-accent);
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  font-family:var(--font-heading);
  max-width:280px;
  margin-bottom:24px
}
.pricing-price {
  color:var(--purple-deep);
  font-family:var(--font-heading);
  justify-content:center;
  align-items:flex-start;
  margin-bottom:24px;
  display:flex
}
.pricing-currency {
  padding-top:12px;
  padding-right:2px;
  font-size:18px;
  font-weight:600
}
.pricing-amount {
  letter-spacing:-.05em;
  font-size:clamp(52px,15vw,72px);
  font-weight:600;
  line-height:1
}
.pricing-cents-wrap {
  width:80px;
  position:relative
}
.pricing-cents {
  font-size:32px;
  font-weight:600;
  line-height:1;
  position:absolute;
  top:0;
  left:0
}
.pricing-freq {
  font-size:13px;
  font-weight:500;
  position:absolute;
  bottom:8px;
  left:0
}
.pricing-features {
  width:100%;
  margin-bottom:24px
}
.pricing-features-title {
  margin-bottom:12px;
  font-size:14px;
  font-weight:600
}
.pricing-feature {
  color:var(--text-muted);
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  font-size:14px;
  display:flex
}
.pricing-feature .check {
  color:var(--purple-btn);
  flex-shrink:0;
  margin-top:1px;
  font-size:16px
}
.testimonials {
  background:var(--bg-fafafa);
  border-top:1px solid var(--border-light);
  padding:80px 0
}
.testimonials-grid {
  grid-template-columns:1fr;
  gap:20px;
  margin-bottom:40px;
  display:grid
}
.testimonial-card {
  background:var(--via-surface);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  border-radius:20px;
  padding:26px;
  transition:transform .25s,box-shadow .25s
}
.testimonial-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-4px)
}
.testimonial-stars {
  color:#f59e0b;
  letter-spacing:2px;
  margin-bottom:12px;
  font-size:16px
}
.testimonial-quote {
  color:var(--text-muted);
  margin-bottom:16px;
  font-size:14px;
  font-style:italic;
  line-height:1.7
}
.testimonial-author {
  align-items:center;
  gap:10px;
  display:flex
}
.testimonial-avatar {
  background:var(--gradient-avatar);
  color:#fff;
  border-radius:9999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  font-size:14px;
  font-weight:600;
  display:flex
}
.testimonial-name {
  font-size:14px;
  font-weight:600
}
.testimonial-location {
  color:var(--text-muted);
  font-size:12px
}
.testimonials-cta {
  text-align:center
}
.toast-wrap {
  z-index:100;
  position:fixed;
  bottom:24px;
  left:24px
}
.toast {
  background:var(--via-surface);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--via-border);
  box-shadow:var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  border-radius:16px;
  align-items:center;
  gap:12px;
  max-width:320px;
  padding:14px 20px;
  transition:all .4s;
  display:flex;
  transform:translateY(20px)
}
.toast.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.toast-avatar {
  background:var(--gradient-avatar);
  color:#fff;
  border-radius:9999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:38px;
  height:38px;
  font-size:13px;
  font-weight:600;
  display:flex;
  overflow:hidden
}
.toast-avatar img {
  object-fit:cover;
  border-radius:50%;
  width:100%;
  height:100%;
  display:block
}
.toast-title {
  color:var(--via-text-primary);
  font-size:13.5px;
  font-weight:600
}
.toast-subtitle {
  color:var(--via-text-muted);
  margin-top:2px;
  font-size:11.5px
}
.progress-page {
  text-align:left;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  min-height:70vh;
  padding:0;
  display:flex
}
.progress-title {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  margin-bottom:8px;
  font-size:24px;
  font-weight:700
}
.progress-subtitle {
  color:var(--text-muted);
  font-size:14px
}
.progress-bar-wrap {
  background:var(--border-light);
  border-radius:9999px;
  width:100%;
  max-width:400px;
  height:8px;
  margin:24px 0;
  overflow:hidden
}
.progress-bar {
  background:linear-gradient(90deg, var(--purple-btn), var(--pink-main));
  border-radius:9999px;
  height:100%;
  transition:width .5s
}
.progress-status {
  color:var(--purple-accent);
  margin-top:16px;
  font-size:15px;
  font-weight:500
}
.result-page {
  justify-content:center;
  align-items:center;
  min-height:70vh;
  padding:40px 24px;
  display:flex
}
.result-card {
  background:var(--via-surface);
  box-shadow:var(--shadow-md);
  border:1px solid var(--border-light);
  text-align:center;
  border-radius:20px;
  width:100%;
  max-width:500px;
  padding:32px
}
.result-cover {
  object-fit:cover;
  width:160px;
  height:160px;
  box-shadow:var(--shadow-md);
  border-radius:16px;
  margin:0 auto 20px
}
.result-title {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  margin-bottom:6px;
  font-size:22px;
  font-weight:700
}
.result-tags {
  color:var(--text-muted);
  margin-bottom:20px;
  font-size:13px
}
.audio-player {
  border-radius:12px;
  width:100%;
  margin:8px 0 0
}
.player-section {
  text-align:left;
  background:var(--c-surface-tint);
  border-radius:var(--c-radius-md);
  border:1px solid var(--c-primary-200);
  padding:14px 16px
}
.player-label {
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:2px;
  font-size:12px;
  font-weight:700
}
.preview-label {
  color:var(--purple-deep)
}
.original-label {
  color:var(--c-text-muted)
}
.player-hint {
  color:var(--text-muted);
  margin-top:8px;
  font-size:12px
}
.preview-error-section {
  background:#fff8f0;
  border-color:#ffd4a3
}
.preview-error-msg {
  color:#c0580a;
  word-break:break-all;
  background:#fff0e0;
  border-radius:6px;
  margin:6px 0 8px;
  padding:6px 10px;
  font-family:monospace;
  font-size:11px
}
.result-actions {
  flex-direction:column;
  gap:10px;
  margin-top:20px;
  display:flex
}
.btn-outline {
  background:var(--via-surface);
  color:var(--text-dark);
  border:1px solid var(--border-color);
  cursor:pointer;
  border-radius:9999px;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:100%;
  padding:10px 20px;
  font-size:14px;
  font-weight:500;
  transition:background .2s;
  display:inline-flex
}
.btn-outline:hover {
  background:var(--bg-slate-50)
}
.whatsapp-badge {
  color:#166534;
  background:#dcfce7;
  border-radius:12px;
  margin-top:16px;
  padding:10px 16px;
  font-size:13px
}
.error-page {
  justify-content:center;
  align-items:center;
  min-height:70vh;
  padding:40px 24px;
  display:flex
}
.error-card {
  background:var(--via-surface);
  box-shadow:var(--shadow-md);
  border:1px solid var(--border-light);
  text-align:center;
  border-radius:20px;
  width:100%;
  max-width:400px;
  padding:32px
}
.error-icon {
  margin-bottom:16px;
  font-size:48px
}
.error-title {
  font-family:var(--font-heading);
  margin-bottom:8px;
  font-size:20px;
  font-weight:700
}
.error-message {
  color:var(--text-muted);
  margin-bottom:20px;
  font-size:14px;
  line-height:1.5
}
.error-actions {
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:6px;
  display:flex
}
.error-retry-btn {
  justify-content:center;
  align-items:center;
  gap:8px;
  min-width:220px;
  display:inline-flex
}
.error-retry-btn svg {
  color:#fff
}
.error-wa-btn {
  font-size:13px
}
.spinner {
  border:2px solid #ffffff4d;
  border-top-color:#fff;
  border-radius:50%;
  width:20px;
  height:20px;
  animation:.6s linear infinite spin;
  display:inline-block
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes fadeInUp {
  0% {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.step-indicator {
  justify-content:center;
  align-items:center;
  gap:0;
  margin-bottom:20px;
  display:flex
}
.step-indicator-item {
  align-items:center;
  display:flex
}
.step-dot {
  width:32px;
  height:32px;
  font-size:13px;
  font-weight:700;
  font-family:var(--font-body);
  border:2px solid var(--border-color);
  color:var(--text-small-muted);
  background:var(--via-surface);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  transition:all .3s;
  display:flex
}
.step-dot.active {
  border-color:var(--purple-btn);
  color:#fff;
  background:var(--purple-btn)
}
.step-dot.done {
  border-color:var(--purple-deep);
  color:#fff;
  background:var(--purple-deep)
}
.step-line {
  background:var(--border-color);
  border-radius:9999px;
  width:40px;
  height:3px;
  transition:background .3s
}
.step-line.active {
  background:var(--purple-deep)
}
.genre-grid {
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  display:grid
}
@media (width>=480px) {
  .genre-grid {
    grid-template-columns:repeat(4,1fr)
  }
}
.genre-card {
  border-radius:var(--c-radius-lg);
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  cursor:pointer;
  font-family:var(--c-font);
  transition:transform var(--c-t-fast), border-color var(--c-t-fast), background-color var(--c-t-fast), box-shadow var(--c-t-fast);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:16px 10px;
  display:flex
}
.genre-card:hover {
  border-color:var(--c-primary-300);
  background:var(--c-surface-tint);
  box-shadow:var(--c-shadow-sm);
  transform:translateY(-2px)
}
.genre-card.selected {
  border-color:var(--c-accent);
  background:var(--c-surface-tint);
  box-shadow:0 0 0 3px #c9624038, var(--c-shadow-sm)
}
.genre-icon {
  font-size:24px;
  line-height:1
}
.genre-label {
  letter-spacing:-.005em;
  color:var(--c-text);
  text-align:center;
  font-size:12.5px;
  font-weight:500;
  line-height:var(--c-lh-snug)
}
.voice-grid {
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  display:grid
}
.voice-card {
  border-radius:var(--c-radius-lg);
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  cursor:pointer;
  font-family:var(--c-font);
  transition:transform var(--c-t-fast), border-color var(--c-t-fast), background-color var(--c-t-fast), box-shadow var(--c-t-fast);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:22px 12px;
  display:flex
}
.voice-card:hover {
  border-color:var(--c-primary-300);
  background:var(--c-surface-tint);
  box-shadow:var(--c-shadow-sm);
  transform:translateY(-2px)
}
.voice-card.selected {
  border-color:var(--c-accent);
  background:var(--c-surface-tint);
  box-shadow:0 0 0 3px #c9624038, var(--c-shadow-sm)
}
.voice-icon {
  font-size:30px
}
.voice-label {
  letter-spacing:-.005em;
  color:var(--c-text);
  text-align:center;
  font-size:14px;
  font-weight:500
}
.form-nav {
  align-items:center;
  gap:12px;
  margin-top:20px;
  display:flex
}
.btn-back {
  border:1px solid var(--border-color);
  background:var(--via-surface);
  color:var(--text-muted);
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  font-family:var(--font-body);
  border-radius:14px;
  flex-shrink:0;
  padding:12px 20px;
  transition:all .2s
}
.btn-back:hover {
  border-color:var(--purple-soft);
  color:var(--purple-deep)
}
.btn-primary.full {
  width:100%
}
.form-nav .btn-primary {
  flex:1
}
.form-step-title {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  margin-bottom:6px;
  font-size:18px;
  font-weight:700
}
.form-step-subtitle {
  color:var(--text-muted);
  margin-bottom:20px;
  font-size:14px
}
.form-hint {
  color:var(--text-small-muted);
  margin-top:-4px;
  margin-bottom:10px;
  font-size:13px
}
.form-summary {
  background:var(--purple-light-bg);
  border-radius:14px;
  margin-top:20px;
  padding:16px 20px
}
.form-summary-title {
  color:var(--purple-deep);
  margin-bottom:10px;
  font-size:14px;
  font-weight:700
}
.form-summary-row {
  color:var(--text-dark);
  margin-bottom:6px;
  font-size:13px;
  line-height:1.5
}
.form-summary-row strong {
  color:var(--purple-deep)
}
@media (width>=768px) {
  .hero-title {
    font-size:43px;
    line-height:54px
  }
  .benefits-grid,
  .examples-grid,
  .testimonials-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .section-title {
    font-size:32px
  }
  .pricing-amount {
    font-size:80px
  }
  .genre-grid {
    grid-template-columns:repeat(5,1fr)
  }
}
@media (width>=1024px) {
  .hero-grid {
    grid-template-columns:1fr 1fr
  }
}
@media (width<=480px) {
  .genre-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .voice-grid {
    grid-template-columns:1fr 1fr 1fr
  }
  .step-line {
    width:28px
  }
  .container {
    padding-left:18px;
    padding-right:18px
  }
  .preview-showcase {
    padding:56px 0
  }
  .preview-video,
  .song-cover {
    max-width:248px
  }
  .song-cover-title {
    font-size:19px
  }
  .carousel-arrow {
    width:34px;
    height:34px;
    font-size:19px
  }
  .carousel-arrow.left {
    left:-2px
  }
  .carousel-arrow.right {
    right:-2px
  }
}
@media (width<=360px) {
  .container {
    padding-left:14px;
    padding-right:14px
  }
  .preview-video,
  .song-cover {
    max-width:220px
  }
}
.voice-btn {
  border:2px dashed var(--purple-mid);
  background:var(--purple-light-bg);
  width:100%;
  color:var(--purple-deep);
  font-family:var(--font-body);
  cursor:pointer;
  border-radius:14px;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:12px 20px;
  font-size:15px;
  font-weight:500;
  transition:all .3s;
  display:flex
}
.voice-btn:hover {
  border-color:var(--purple-accent);
  background:linear-gradient(135deg,#c084fc26,#e879f926);
  transform:translateY(-1px);
  box-shadow:0 4px 15px #813a2224
}
.voice-btn:active {
  transform:scale(.98)
}
.voice-btn-recording {
  border:2px solid var(--c-danger);
  color:var(--c-danger);
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
  animation:2s ease-in-out infinite voice-btn-pulse
}
.voice-btn-recording:hover {
  border-color:var(--c-danger);
  background:linear-gradient(135deg,#fee2e2,#fecaca);
  box-shadow:0 4px 20px #b83a3a38
}
.input-textarea.recording-active {
  cursor:default;
  border-color:var(--c-accent)!important;
  box-shadow:0 0 0 3px #c9624038,inset 0 0 20px #c962400d!important
}
.voice-waves {
  align-items:center;
  gap:3px;
  height:20px;
  display:flex
}
.wave-bar {
  background:var(--c-danger);
  border-radius:3px;
  width:3px;
  height:8px;
  animation:.8s ease-in-out infinite wave-bounce;
  display:inline-block
}
.wave-bar:first-child {
  height:6px;
  animation-delay:0s
}
.wave-bar:nth-child(2) {
  height:12px;
  animation-delay:.15s
}
.wave-bar:nth-child(3) {
  height:16px;
  animation-delay:.3s
}
.wave-bar:nth-child(4) {
  height:12px;
  animation-delay:.15s
}
.wave-bar:nth-child(5) {
  height:6px;
  animation-delay:0s
}
@keyframes wave-bounce {
  0%,
  to {
    transform:scaleY(.5)
  }
  50% {
    transform:scaleY(1.5)
  }
}
@keyframes voice-btn-pulse {
  0%,
  to {
    box-shadow:0 0 #b83a3a52
  }
  50% {
    box-shadow:0 0 0 8px #b83a3a00
  }
}
.voice-live-indicator {
  color:var(--purple-deep);
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:13px;
  font-weight:500;
  animation:.3s fade-in-up;
  display:flex
}
.voice-live-dot {
  background:var(--c-accent);
  border-radius:50%;
  width:8px;
  height:8px;
  animation:1s infinite pulse-mic;
  display:inline-block
}
@keyframes fade-in-up {
  0% {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes pulse-mic {
  0%,
  to {
    opacity:1;
    transform:scale(1)
  }
  50% {
    opacity:.6;
    transform:scale(1.15)
  }
}
.preview-badge {
  color:#fff;
  font-family:var(--font-heading);
  text-align:center;
  letter-spacing:.5px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  border-radius:12px;
  margin-bottom:16px;
  padding:10px 20px;
  font-size:.85rem;
  font-weight:700;
  animation:2s ease-in-out infinite pulse-preview
}
@keyframes pulse-preview {
  0%,
  to {
    box-shadow:0 0 #f59e0b66
  }
  50% {
    box-shadow:0 0 0 8px #f59e0b00
  }
}
.preview-info {
  text-align:center;
  background:#fef3c7;
  border:1px solid #fbbf24;
  border-radius:12px;
  margin:12px 0;
  padding:14px 18px
}
.preview-info p {
  color:#92400e;
  margin:0;
  font-size:.9rem;
  line-height:1.5
}
.btn-locked {
  opacity:.6;
  cursor:not-allowed!important;
  color:#fff!important;
  background:#94a3b8!important
}
.btn-locked:hover {
  box-shadow:none!important;
  transform:none!important
}
.ph {
  text-align:center;
  background:linear-gradient(135deg, var(--pink-light-bg), var(--purple-light-bg));
  border:2px dashed var(--purple-soft);
  color:var(--purple-accent);
  border-radius:22px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:20px;
  font-size:14px;
  font-weight:600;
  display:flex
}
.ph small {
  color:var(--text-small-muted);
  font-size:11px;
  font-weight:400
}
.ph-phone {
  aspect-ratio:9/18;
  max-width:200px
}
.ph-phone-lg {
  aspect-ratio:9/16;
  width:100%;
  max-width:320px
}
.ph-phone-sm {
  aspect-ratio:9/16;
  flex-shrink:0;
  width:110px
}
.ph-phone-demo {
  aspect-ratio:9/16;
  color:#fff;
  background:#ffffff1f;
  border-color:#fff6;
  flex-shrink:0;
  width:130px
}
.ph-video {
  aspect-ratio:16/9;
  width:100%
}
.ph-illus {
  aspect-ratio:4/3;
  width:100%;
  margin-bottom:14px
}
.ph-illus-sm {
  border-radius:16px;
  width:64px;
  height:64px;
  padding:0;
  font-size:22px
}
.chip {
  background:var(--purple-light-bg);
  color:var(--purple-deep);
  letter-spacing:.08em;
  border-radius:9999px;
  margin-bottom:16px;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  display:inline-block
}
.accent-text {
  background:var(--gradient-title);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text
}
.topbar {
  z-index:60;
  background:var(--gradient-purple);
  color:#fff;
  text-align:center;
  padding:7px 14px;
  font-size:13px;
  font-weight:500;
  position:sticky;
  top:0;
  box-shadow:0 2px 12px #00000024
}
.header-nav {
  gap:26px;
  display:none
}
.header-nav a {
  color:var(--text-muted);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:color .2s
}
.header-nav a:hover {
  color:var(--purple-btn)
}
.header-right {
  align-items:center;
  gap:16px;
  display:flex
}
.header-cta {
  background:var(--gradient-cta);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  font-family:var(--font-body);
  border:none;
  border-radius:9999px;
  padding:9px 20px;
  transition:transform .15s;
  display:none;
  box-shadow:0 8px 18px -8px #ab4b2b73
}
.header-cta:hover {
  transform:translateY(-1px)
}
.heart {
  opacity:.35;
  pointer-events:none;
  font-size:28px;
  animation:6s ease-in-out infinite heart-float;
  position:absolute
}
.heart-1 {
  animation-delay:0s;
  top:12%;
  right:46%
}
.heart-2 {
  font-size:38px;
  animation-delay:1.5s;
  top:30%;
  right:8%
}
.heart-3 {
  font-size:22px;
  animation-delay:3s;
  bottom:16%;
  right:38%
}
@keyframes heart-float {
  0%,
  to {
    transform:translateY(0)rotate(-6deg)
  }
  50% {
    transform:translateY(-16px)rotate(6deg)
  }
}
.hero-visual {
  z-index:2;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:360px;
  display:flex;
  position:relative
}
.hero-badge {
  background:var(--via-surface);
  color:var(--purple-deep);
  box-shadow:var(--shadow-md);
  z-index:3;
  border-radius:9999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:700;
  position:absolute;
  top:8px;
  right:8px
}
.ph-phone-back {
  opacity:.8;
  transform:rotate(-8deg)translateY(20px)
}
.ph-phone-front {
  box-shadow:var(--shadow-lg);
  z-index:2;
  transform:rotate(4deg)
}
.create-section {
  background:var(--bg-white);
  border-top:1px solid var(--border-color);
  padding:72px 0
}
.create-section .form-card {
  max-width:560px;
  margin:0 auto
}
.howitworks {
  background:var(--bg-slate-50);
  padding:88px 0
}
.how-grid {
  grid-template-columns:1fr;
  gap:22px;
  display:grid
}
.how-card {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:22px;
  padding:28px 24px;
  transition:transform .25s,box-shadow .25s;
  position:relative
}
.how-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-5px)
}
.how-num {
  background:var(--gradient-cta);
  color:#fff;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  font-size:16px;
  font-weight:700;
  display:flex;
  position:absolute;
  top:-14px;
  left:24px;
  box-shadow:0 8px 18px -8px #ab4b2b73
}
.how-title {
  font-family:var(--font-heading);
  margin-bottom:8px;
  font-size:19px;
  font-weight:600
}
.how-text {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.65
}
.preview-showcase {
  background:var(--bg-white);
  padding:88px 0
}
.preview-grid {
  grid-template-columns:1fr;
  align-items:center;
  gap:40px;
  display:grid
}
.preview-visual {
  justify-content:center;
  align-items:center;
  display:flex;
  position:relative
}
.carousel-arrow {
  border:1px solid var(--border-color);
  background:var(--via-surface);
  width:40px;
  height:40px;
  color:var(--purple-deep);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  z-index:2;
  border-radius:50%;
  font-size:22px;
  line-height:1;
  transition:transform .15s;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}
.carousel-arrow:hover {
  transform:translateY(-50%)scale(1.08)
}
.carousel-arrow.left {
  left:4px
}
.carousel-arrow.right {
  right:4px
}
.example-mini {
  background:var(--bg-fafafa);
  border:1px solid var(--border-color);
  text-align:left;
  cursor:pointer;
  width:100%;
  font-family:var(--font-body);
  border-radius:16px;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:12px 16px;
  transition:border-color .2s,transform .15s;
  display:flex
}
.example-mini:hover {
  border-color:var(--via-accent-border);
  transform:translateY(-1px)
}
.example-mini .play-btn {
  pointer-events:none
}
.carousel-dots {
  gap:8px;
  margin-bottom:24px;
  display:flex
}
.dot {
  background:var(--purple-soft);
  cursor:pointer;
  border:none;
  border-radius:50%;
  width:9px;
  height:9px;
  padding:0;
  transition:all .2s
}
.dot.active {
  background:var(--purple-btn);
  border-radius:9999px;
  width:26px
}
.features-bento {
  background:var(--bg-slate-50);
  padding:88px 0
}
.bento-grid {
  grid-template-columns:1fr;
  gap:18px;
  display:grid
}
.bento-card {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:24px;
  flex-direction:column;
  gap:16px;
  padding:28px;
  transition:transform .25s,box-shadow .25s;
  display:flex
}
.bento-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-4px)
}
.bento-title {
  font-family:var(--font-heading);
  margin-bottom:8px;
  font-size:20px;
  font-weight:600
}
.bento-text {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.65
}
.demo-banner {
  padding:40px 0
}
.demo-inner {
  background:var(--gradient-purple);
  border-radius:28px;
  justify-content:center;
  align-items:center;
  gap:24px;
  padding:40px;
  display:flex;
  overflow:hidden
}
.demo-copy {
  text-align:center;
  color:#fff
}
.demo-title {
  font-family:var(--font-heading);
  margin-bottom:10px;
  font-size:28px;
  font-weight:600
}
.demo-sub {
  opacity:.9;
  max-width:380px;
  margin-bottom:20px;
  font-size:15px
}
.btn-light {
  background:var(--via-surface);
  color:var(--purple-deep);
  box-shadow:var(--shadow-md);
  border-radius:9999px;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:transform .15s;
  display:inline-flex
}
.btn-light:hover {
  transform:translateY(-2px)
}
.plans {
  background:var(--bg-white);
  padding:88px 0
}
.plans-grid {
  grid-template-columns:1fr;
  align-items:stretch;
  gap:22px;
  max-width:1120px;
  margin:0 auto;
  display:grid
}
.plan-card {
  background:var(--bg-fafafa);
  border:1.5px solid var(--border-color);
  border-radius:24px;
  flex-direction:column;
  padding:32px 26px;
  transition:transform .25s,box-shadow .25s;
  display:flex;
  position:relative
}
.plan-card:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-4px)
}
.plan-card.featured {
  border-color:var(--purple-btn);
  background:var(--bg-white);
  box-shadow:var(--shadow-lg);
  border-width:2px
}
.plan-delivery {
  background:var(--purple-light-bg);
  color:var(--purple-deep);
  border-radius:9999px;
  align-self:flex-start;
  align-items:center;
  gap:6px;
  margin-bottom:22px;
  padding:6px 14px;
  font-size:12.5px;
  font-weight:700;
  display:inline-flex
}
.plan-badge {
  background:var(--gradient-cta);
  color:#fff;
  letter-spacing:.06em;
  white-space:nowrap;
  border-radius:9999px;
  padding:6px 16px;
  font-size:11px;
  font-weight:700;
  position:absolute;
  top:-13px;
  left:50%;
  transform:translate(-50%)
}
.plan-name {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  margin-bottom:6px;
  font-size:22px;
  font-weight:600
}
.plan-tagline {
  color:var(--text-muted);
  min-height:40px;
  margin-bottom:18px;
  font-size:14px
}
.plan-price {
  font-family:var(--font-heading);
  color:var(--text-dark);
  letter-spacing:-.02em;
  margin-bottom:20px;
  font-size:46px;
  font-weight:600
}
.plan-currency {
  vertical-align:super;
  color:var(--purple-accent);
  margin-right:4px;
  font-size:20px
}
.plan-items {
  flex:1;
  margin-bottom:24px
}
.plan-item {
  color:var(--text-muted);
  align-items:flex-start;
  gap:10px;
  margin-bottom:11px;
  font-size:14px;
  display:flex
}
.plan-item .check {
  color:var(--purple-btn);
  flex-shrink:0;
  font-weight:700
}
.faq {
  background:var(--bg-slate-50);
  padding:88px 0
}
.faq-grid {
  grid-template-columns:1fr;
  align-items:start;
  gap:36px;
  display:grid
}
.faq-aside-text {
  color:var(--text-muted);
  margin:12px 0 20px;
  font-size:15px;
  line-height:1.7
}
.faq-contact {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  color:var(--text-dark);
  border-radius:16px;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:14px 16px;
  text-decoration:none;
  transition:border-color .2s,transform .15s;
  display:flex
}
.faq-contact:hover {
  border-color:var(--purple-soft);
  transform:translateY(-2px)
}
.faq-contact-ic {
  background:var(--purple-light-bg);
  width:40px;
  height:40px;
  color:var(--purple-deep);
  border-radius:12px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  display:flex
}
.faq-contact-t {
  font-size:14px;
  font-weight:600
}
.faq-contact-s {
  color:var(--text-muted);
  font-size:12px
}
.faq-aside .btn-primary {
  margin-top:8px
}
.faq-list {
  flex-direction:column;
  gap:12px;
  display:flex
}
.faq-item {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:16px;
  transition:border-color .2s;
  overflow:hidden
}
.faq-item.open {
  border-color:var(--purple-soft);
  box-shadow:var(--shadow-sm)
}
.faq-q {
  width:100%;
  font-family:var(--font-body);
  color:var(--text-dark);
  text-align:left;
  cursor:pointer;
  background:0 0;
  border:none;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  font-size:15px;
  font-weight:600;
  display:flex
}
.faq-caret {
  color:var(--purple-btn);
  flex-shrink:0;
  font-size:22px;
  line-height:1
}
.faq-a {
  color:var(--text-muted);
  padding:0 20px 18px;
  font-size:14px;
  line-height:1.7;
  animation:.25s fade-in-up
}
.explore {
  background:var(--bg-white);
  border-top:1px solid var(--border-color);
  padding:56px 0 72px
}
.explore-title {
  font-family:var(--font-heading);
  color:var(--text-muted);
  text-align:center;
  margin-bottom:20px;
  font-size:17px;
  font-weight:600
}
.explore-links {
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  display:flex
}
.explore-link {
  background:var(--bg-fafafa);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  cursor:pointer;
  font-size:13px;
  font-family:var(--font-body);
  border-radius:9999px;
  padding:8px 18px;
  transition:all .2s
}
.explore-link:hover {
  border-color:var(--purple-soft);
  color:var(--purple-deep);
  background:var(--purple-light-bg)
}
.footer {
  background:var(--bg-white);
  border-top:1px solid var(--border-color);
  text-align:left;
  padding:56px 0 28px
}
.footer-grid {
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:36px;
  display:grid
}
.footer-brand .header-logo {
  margin-bottom:14px
}
.footer-desc {
  color:var(--text-muted);
  max-width:320px;
  margin-bottom:16px;
  font-size:14px;
  line-height:1.7
}
.footer-socials {
  gap:12px;
  display:flex
}
.footer-socials a {
  background:var(--purple-light-bg);
  width:38px;
  height:38px;
  color:var(--purple-deep);
  border-radius:10px;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  transition:background .2s;
  display:flex
}
.footer-socials a:hover {
  background:var(--pink-light-bg)
}
.footer-col-title {
  color:var(--text-dark);
  margin-bottom:14px;
  font-size:14px;
  font-weight:700
}
.footer-link {
  color:var(--text-muted);
  margin-bottom:10px;
  font-size:14px;
  text-decoration:none;
  transition:color .2s;
  display:block
}
.footer-link:hover {
  color:var(--purple-btn)
}
.footer-link--btn {
  text-align:left;
  cursor:pointer;
  background:0 0;
  border:none;
  padding:0;
  font-family:inherit
}
.footer-bottom {
  text-align:center;
  border-top:1px solid var(--border-light);
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding-top:22px;
  display:flex
}
.footer-text {
  color:var(--text-muted);
  font-size:13px
}
.footer-pay {
  color:var(--text-small-muted);
  font-size:13px
}
@media (width>=768px) {
  .how-grid,
  .bento-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .plans-grid {
    grid-template-columns:repeat(2,1fr);
    max-width:840px
  }
  .plan-tagline {
    min-height:60px
  }
  .plan-card.featured {
    transform:scale(1.03)
  }
  .plan-card.featured:hover {
    transform:scale(1.03)translateY(-4px)
  }
  .footer-grid {
    grid-template-columns:2fr 1fr 1fr 1fr 1fr
  }
  .footer-bottom {
    flex-direction:row;
    justify-content:space-between
  }
  .faq-grid {
    grid-template-columns:360px 1fr
  }
  .preview-grid {
    grid-template-columns:1fr 1fr
  }
}
@media (width>=1024px) {
  .header-nav {
    display:flex
  }
  .header-cta {
    display:inline-block
  }
  .how-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .bento-grid {
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(180px,auto)
  }
  .bento-grid>.bento-card:first-child {
    grid-area:1/1
  }
  .bento-grid>.bento-card:nth-child(2) {
    grid-area:1/2
  }
  .bento-grid>.bento-card:nth-child(3) {
    grid-area:1/3/span 2
  }
  .bento-grid>.bento-card:nth-child(4) {
    flex-direction:row;
    grid-area:2/1/auto/span 2;
    align-items:center
  }
  .bento-grid>.bento-card:nth-child(4) .ph-video {
    max-width:300px
  }
}
.chat-card {
  --wa-header:#008069;
  --wa-header-ic:#ffffffeb;
  --wa-wall:#e9e2d9;
  --wa-in:#fff;
  --wa-out:#d9fdd3;
  --wa-text:#111b21;
  --wa-meta:#667781;
  --wa-tick:#53bdeb;
  --wa-input-bar:#f0f2f5;
  --wa-input:#fff;
  --wa-send:#008069;
  --wa-opt:#fff;
  --wa-opt-text:#027a63;
  --wa-opt-border:#d4e7e0;
  max-width:560px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--via-border);
  border-radius:14px;
  flex-direction:column;
  height:620px;
  max-height:80vh;
  margin:0 auto;
  display:flex;
  overflow:hidden
}
[data-theme=dark] .chat-card {
  --wa-header:#1f2c34;
  --wa-wall:#0b141a;
  --wa-in:#202c33;
  --wa-out:#005c4b;
  --wa-text:#e9edef;
  --wa-meta:#8696a0;
  --wa-input-bar:#1f2c34;
  --wa-input:#2a3942;
  --wa-send:#00a884;
  --wa-opt:#202c33;
  --wa-opt-text:#00a884;
  --wa-opt-border:#2a3942
}
.chat-header {
  background:var(--wa-header);
  color:#fff;
  flex-shrink:0;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  display:flex
}
.chat-back {
  color:var(--wa-header-ic);
  align-items:center;
  display:none
}
.chat-avatar {
  background:var(--gradient-cta);
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  display:flex;
  position:relative;
  overflow:hidden
}
.chat-avatar img {
  object-fit:cover;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.chat-avatar img.hide {
  display:none
}
.chat-avatar-fallback {
  color:#fff;
  display:flex
}
.chat-online-dot {
  border:2px solid var(--wa-header);
  background:#25d366;
  border-radius:50%;
  width:11px;
  height:11px;
  position:absolute;
  bottom:0;
  right:0
}
.chat-head-info {
  flex:1;
  min-width:0
}
.chat-name {
  letter-spacing:-.01em;
  font-size:16px;
  font-weight:600;
  line-height:1.2
}
.chat-status {
  color:#fffc;
  font-size:12.5px;
  line-height:1.3
}
.chat-status.typing {
  color:#fff
}
.chat-head-actions {
  color:var(--wa-header-ic);
  align-items:center;
  gap:18px;
  display:flex
}
.chat-body {
  background-color:var(--wa-wall);
  scroll-behavior:smooth;
  background-image:radial-gradient(#00000005 1px,#0000 1px);
  background-size:22px 22px;
  flex-direction:column;
  flex:1;
  gap:0;
  padding:14px 7% 18px;
  display:flex;
  overflow-y:auto
}
.chat-encryption {
  text-align:center;
  max-width:92%;
  color:var(--wa-meta);
  background:var(--wa-in);
  opacity:.9;
  border-radius:8px;
  justify-content:center;
  align-self:center;
  align-items:center;
  gap:6px;
  margin-bottom:12px;
  padding:5px 12px;
  font-size:11.5px;
  display:inline-flex
}
.chat-bubble {
  word-wrap:break-word;
  overflow-wrap:anywhere;
  max-width:82%;
  color:var(--wa-text);
  border-radius:8px;
  margin-top:3px;
  padding:6px 9px 7px;
  font-size:15px;
  line-height:1.42;
  animation:.2s bubble-in;
  position:relative;
  box-shadow:0 1px .5px #00000021
}
.chat-bubble-text {
  white-space:pre-wrap
}
.chat-bubble.bia {
  background:var(--wa-in);
  border-top-left-radius:0;
  align-self:flex-start
}
.chat-bubble.user {
  background:var(--wa-out);
  border-top-right-radius:0;
  align-self:flex-end
}
.chat-bubble strong {
  font-weight:600
}
.chat-meta {
  float:right;
  color:var(--wa-meta);
  align-items:center;
  gap:2px;
  margin:4px -2px -3px 12px;
  font-size:11px;
  display:inline-flex
}
.chat-bubble.user .chat-meta svg {
  color:var(--wa-tick)
}
@keyframes bubble-in {
  0% {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.chat-bubble.typing {
  background:var(--wa-in);
  align-self:flex-start;
  align-items:center;
  gap:4px;
  max-width:max-content;
  margin-top:3px;
  padding:12px 14px;
  display:inline-flex
}
.chat-bubble.typing span {
  background:var(--wa-meta);
  border-radius:50%;
  width:7px;
  height:7px;
  animation:1.2s infinite typing-dot;
  display:inline-block
}
.chat-bubble.typing span:nth-child(2) {
  animation-delay:.2s
}
.chat-bubble.typing span:nth-child(3) {
  animation-delay:.4s
}
@keyframes typing-dot {
  0%,
  60%,
  to {
    opacity:.35;
    transform:translateY(0)
  }
  30% {
    opacity:1;
    transform:translateY(-4px)
  }
}
.chat-start {
  text-align:center;
  margin:auto;
  padding:20px
}
.chat-start-ic {
  background:var(--wa-in);
  width:64px;
  height:64px;
  color:var(--wa-send);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  margin:0 auto 12px;
  display:flex;
  box-shadow:0 1px 3px #0000001f
}
.chat-start p {
  color:var(--wa-text);
  opacity:.85;
  margin-bottom:16px;
  font-size:14.5px
}
.chat-start strong {
  font-weight:600
}
.chat-input-area {
  background:var(--wa-input-bar);
  flex-shrink:0;
  padding:8px 10px
}
.chat-options {
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:4px;
  display:flex
}
.chat-options.grid {
  overscroll-behavior:contain;
  gap:6px;
  max-height:min(32vh,190px);
  padding:2px;
  overflow-y:auto
}
.chat-opt {
  border:1px solid var(--wa-opt-border);
  background:var(--wa-opt);
  color:var(--wa-opt-text);
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  font-family:var(--font-body);
  white-space:nowrap;
  border-radius:9999px;
  padding:8px 15px;
  transition:all .15s
}
.chat-body,
.chat-options.grid {
  scrollbar-width:thin;
  scrollbar-color:#0000002e transparent
}
.chat-body::-webkit-scrollbar {
  width:5px
}
.chat-options.grid::-webkit-scrollbar {
  width:5px
}
.chat-body::-webkit-scrollbar-thumb {
  background:#0000002e;
  border-radius:9999px
}
.chat-options.grid::-webkit-scrollbar-thumb {
  background:#0000002e;
  border-radius:9999px
}
.chat-body::-webkit-scrollbar-track {
  background:0 0
}
.chat-options.grid::-webkit-scrollbar-track {
  background:0 0
}
[data-theme=dark] .chat-body,
[data-theme=dark] .chat-options.grid {
  scrollbar-color:#ffffff38 transparent
}
[data-theme=dark] .chat-body::-webkit-scrollbar-thumb {
  background:#ffffff38
}
[data-theme=dark] .chat-options.grid::-webkit-scrollbar-thumb {
  background:#ffffff38
}
.chat-opt:hover {
  background:var(--wa-send);
  border-color:var(--wa-send);
  color:#fff
}
.chat-plans {
  flex-direction:column;
  gap:8px;
  display:flex
}
.chat-plan {
  border:1px solid var(--wa-opt-border);
  background:var(--wa-opt);
  color:var(--wa-text);
  cursor:pointer;
  font-family:var(--font-body);
  text-align:left;
  border-radius:12px;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  transition:border-color .15s,transform .15s;
  display:flex;
  position:relative
}
.chat-plan:hover {
  border-color:var(--wa-send);
  transform:translateY(-1px)
}
.chat-plan.featured {
  border-color:var(--wa-send);
  border-width:1.5px
}
.chat-plan-badge {
  background:var(--wa-send);
  color:#fff;
  letter-spacing:.03em;
  border-radius:9999px;
  padding:2px 8px;
  font-size:9px;
  font-weight:700;
  position:absolute;
  top:-8px;
  left:12px
}
.chat-plan-info {
  flex-direction:column;
  flex:1;
  gap:3px;
  min-width:0;
  display:flex
}
.chat-plan-name {
  font-size:13.5px;
  font-weight:600
}
.chat-plan-desc {
  color:var(--wa-text);
  opacity:.68;
  font-size:11px;
  line-height:1.3
}
.chat-plan-price {
  font-family:var(--font-mono);
  color:var(--wa-send);
  white-space:nowrap;
  font-size:15px;
  font-weight:600
}
.chat-bubble.chat-media,
.chat-bubble.chat-action {
  max-width:88%
}
.chat-media-top {
  color:var(--wa-text);
  align-items:center;
  gap:7px;
  margin-bottom:7px;
  font-size:12.5px;
  font-weight:600;
  display:flex
}
.chat-media-ic {
  background:var(--wa-send);
  color:#fff;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  display:inline-flex
}
.chat-media audio {
  width:240px;
  max-width:100%;
  height:40px;
  display:block
}
.chat-examples {
  width:100%
}
.chat-example-song {
  border-top:1px solid #0000000f;
  padding:7px 0
}
.chat-example-song:first-of-type {
  border-top:none
}
.chat-example-info {
  flex-direction:column;
  margin-bottom:5px;
  line-height:1.2;
  display:flex
}
.chat-example-info strong {
  color:var(--wa-text);
  font-size:13px;
  font-weight:600
}
.chat-example-info span {
  color:var(--wa-meta);
  font-size:11px
}
.chat-example-song audio {
  width:100%;
  height:34px
}
.chat-video-teaser {
  overflow:hidden;
  padding:0!important
}
.chat-video-btn {
  aspect-ratio:9/16;
  cursor:pointer;
  background:#000;
  border:none;
  border-radius:10px;
  width:180px;
  max-width:100%;
  height:auto;
  padding:0;
  display:block;
  position:relative;
  overflow:hidden
}
.chat-video-btn img {
  object-fit:cover;
  opacity:.85;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.chat-video-play {
  width:46px;
  height:46px;
  color:var(--wa-send);
  background:#ffffffeb;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  display:flex;
  position:absolute;
  top:42%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 4px 14px #0006
}
.chat-video-label {
  color:#fff;
  text-align:left;
  background:linear-gradient(#0000,#000000c7);
  padding:16px 10px 8px;
  font-size:12.5px;
  font-weight:600;
  position:absolute;
  bottom:0;
  left:0;
  right:0
}
.video-modal-root {
  z-index:1200;
  -webkit-backdrop-filter:blur(4px);
  background:#08060cc7;
  justify-content:center;
  align-items:center;
  padding:18px;
  animation:.2s fade-in-up;
  display:flex;
  position:fixed;
  inset:0
}
.video-modal-card {
  border-radius:16px;
  width:min(340px,90vw);
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px -20px #000000b3
}
.video-modal-video {
  aspect-ratio:9/16;
  object-fit:contain;
  background:#000;
  width:100%;
  max-height:80vh;
  display:block
}
.video-modal-close {
  z-index:2;
  color:#fff;
  cursor:pointer;
  background:#0000008c;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:34px;
  height:34px;
  font-size:16px;
  display:flex;
  position:absolute;
  top:8px;
  right:8px
}
.chat-media-video {
  aspect-ratio:9/16;
  object-fit:cover;
  background:#000;
  border-radius:10px;
  width:190px;
  max-width:100%;
  display:block
}
.chat-action {
  padding-bottom:9px!important
}
.chat-action-btn {
  background:var(--wa-send);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  font-family:var(--font-body);
  border:none;
  border-radius:10px;
  align-items:center;
  gap:7px;
  padding:11px 16px;
  text-decoration:none;
  display:inline-flex
}
.chat-action-btn.dl {
  color:var(--wa-send);
  border:1.5px solid var(--wa-send);
  background:0 0
}
.chat-action-btn.pay {
  background:var(--gradient-cta);
  box-shadow:0 8px 18px -8px #ab4b2b6b
}
.chat-action-btn:disabled {
  opacity:.6;
  cursor:default
}
.chat-textbar {
  align-items:center;
  gap:8px;
  width:100%;
  display:flex
}
.chat-text {
  background:var(--wa-input);
  min-width:0;
  font-size:16px;
  font-family:var(--font-body);
  color:var(--wa-text);
  border:none;
  border-radius:9999px;
  outline:none;
  flex:auto;
  padding:10px 16px
}
.chat-text::placeholder {
  color:var(--wa-meta)
}
.chat-send {
  background:var(--wa-send);
  color:#fff;
  cursor:pointer;
  border:none;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  transition:transform .12s,opacity .2s;
  display:flex
}
.chat-send:hover {
  transform:scale(1.05)
}
.chat-send:disabled {
  opacity:.45;
  cursor:not-allowed
}
.chat-input-area .btn-primary {
  margin-top:4px
}
.chat-foot {
  display:none
}
.chat-bubble .gradient-text,
.chat-bubble strong {
  color:inherit;
  -webkit-text-fill-color:currentColor
}
.chat-mic {
  background:var(--wa-send)
}
.chat-recbar {
  align-items:center;
  gap:10px;
  padding:4px 4px 4px 8px;
  display:flex
}
.chat-rec-cancel {
  color:var(--wa-meta);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:6px;
  display:flex
}
.chat-rec-dot {
  background:#ff3b30;
  border-radius:50%;
  flex-shrink:0;
  width:11px;
  height:11px;
  animation:1.4s infinite voice-btn-pulse
}
.chat-rec-time {
  font-family:var(--font-mono);
  color:var(--wa-text);
  min-width:44px;
  font-size:14px
}
.chat-rec-hint {
  color:var(--wa-meta);
  flex:1;
  font-size:13px
}
.chat-recbar .spinner {
  border-color:var(--wa-meta);
  border-top-color:var(--wa-send);
  width:18px;
  height:18px
}
.chat-modal-root {
  z-index:1000;
  position:fixed;
  inset:0
}
.chat-teaser {
  text-align:left;
  cursor:pointer;
  background:var(--via-surface);
  border:1px solid var(--via-border);
  width:100%;
  max-width:420px;
  box-shadow:var(--shadow-lg);
  font-family:var(--font-body);
  border-radius:22px;
  margin:0 auto;
  padding:18px;
  transition:transform .2s,box-shadow .25s;
  display:block
}
.chat-teaser:hover {
  transform:translateY(-3px);
  box-shadow:0 30px 60px -24px #813a224d
}
.chat-teaser-head {
  align-items:center;
  gap:11px;
  margin-bottom:13px;
  display:flex
}
.chat-teaser-head .chat-avatar {
  width:46px;
  height:46px
}
.chat-teaser .chat-name {
  color:var(--via-text-primary);
  font-size:16px
}
.chat-teaser-status {
  color:#1f8a5b;
  font-size:12.5px;
  font-weight:600
}
[data-theme=dark] .chat-teaser-status {
  color:#4ed99a
}
.chat-teaser-bubble {
  background:var(--via-surface-alt);
  color:var(--via-text-body);
  border-radius:4px 14px 14px;
  margin-bottom:14px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.55
}
.chat-teaser-cta {
  background:var(--gradient-cta);
  color:#fff;
  border-radius:12px;
  justify-content:center;
  align-items:center;
  gap:7px;
  width:100%;
  padding:12px;
  font-size:15px;
  font-weight:600;
  display:inline-flex;
  box-shadow:0 10px 24px -10px #ab4b2b73
}
.hero-chat-slot {
  z-index:2;
  justify-content:center;
  width:100%;
  display:flex;
  position:relative
}
.hero-visual {
  z-index:2;
  perspective:1000px;
  min-height:380px;
  display:none;
  position:relative
}
.hero-song-card {
  background:linear-gradient(180deg, var(--c-surface), var(--c-surface-alt));
  border:1px solid var(--c-border);
  border-radius:22px;
  width:100%;
  max-width:380px;
  margin:0 auto;
  padding:22px 22px 18px;
  animation:6s ease-in-out infinite hero-card-float;
  position:relative;
  transform:rotate(-1.5deg);
  box-shadow:0 24px 60px -20px #813a2247,0 8px 20px -8px #00000014
}
@keyframes hero-card-float {
  0%,
  to {
    transform:rotate(-1.5deg)translateY(0)
  }
  50% {
    transform:rotate(-1deg)translateY(-8px)
  }
}
.hero-song-cover {
  justify-content:center;
  margin-bottom:16px;
  display:flex
}
.hero-song-meta {
  text-align:center;
  flex-direction:column;
  gap:2px;
  margin-bottom:14px;
  display:flex
}
.hero-song-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  font-size:10px;
  font-weight:600
}
.hero-song-title {
  font-family:var(--c-font-display);
  letter-spacing:-.02em;
  color:var(--c-text);
  font-size:19px;
  font-weight:700
}
.hero-song-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  font-size:12.5px
}
.hero-song-wave {
  justify-content:center;
  align-items:flex-end;
  gap:3px;
  height:36px;
  margin-bottom:14px;
  display:flex
}
.hero-wave-bar {
  background:linear-gradient(180deg, var(--c-accent), var(--c-accent-deep));
  border-radius:2px;
  width:3px;
  height:30%;
  animation:1.4s ease-in-out infinite hero-wave-pulse;
  display:inline-block
}
@keyframes hero-wave-pulse {
  0%,
  to {
    opacity:.55;
    height:22%
  }
  50% {
    opacity:1;
    height:92%
  }
}
.hero-song-controls {
  align-items:center;
  gap:12px;
  display:flex
}
.hero-song-play {
  background:var(--c-gradient-cta);
  color:#fff;
  cursor:pointer;
  border:none;
  border-radius:50%;
  flex:none;
  justify-content:center;
  align-items:center;
  width:38px;
  height:38px;
  display:inline-flex;
  box-shadow:0 6px 16px -4px #813a2280
}
.hero-song-play svg {
  margin-left:2px
}
.hero-song-time {
  font-family:var(--c-font-mono);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  font-size:12.5px
}
.hero-float {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  color:var(--c-text);
  white-space:nowrap;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  position:absolute;
  box-shadow:0 10px 24px -10px #0000002e
}
.hero-float--rating {
  animation:7s ease-in-out infinite hero-float-1;
  top:-14px;
  right:0;
  transform:rotate(3deg)
}
.hero-float--delivery {
  animation:8s ease-in-out infinite hero-float-2;
  bottom:-10px;
  left:-10px;
  transform:rotate(-3deg)
}
.hero-float-stars {
  color:var(--c-warning);
  gap:1px;
  display:inline-flex
}
.hero-float--delivery svg {
  color:var(--c-success)
}
@keyframes hero-float-1 {
  0%,
  to {
    transform:rotate(3deg)translateY(0)
  }
  50% {
    transform:rotate(2deg)translateY(-6px)
  }
}
@keyframes hero-float-2 {
  0%,
  to {
    transform:rotate(-3deg)translateY(0)
  }
  50% {
    transform:rotate(-2deg)translateY(5px)
  }
}
@media (width>=860px) {
  .hero-visual {
    display:block
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-song-card,
  .hero-float,
  .hero-wave-bar {
    animation:none
  }
}
.hero-chat-slot .chat-card:not(.as-modal) {
  width:100%;
  max-width:430px;
  height:560px;
  max-height:74vh
}
.chat-backdrop {
  z-index:290;
  -webkit-backdrop-filter:blur(3px);
  background:#08060c9e;
  animation:.2s fade-in-up;
  position:fixed;
  inset:0
}
.chat-card.as-modal {
  z-index:300;
  box-shadow:0 30px 80px -20px #0009;
  width:min(440px,94vw)!important;
  max-width:440px!important;
  height:min(660px, var(--chat-vh,86vh))!important;
  max-height:var(--chat-vh,86vh)!important;
  margin:0!important;
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important
}
.chat-back {
  color:var(--wa-header-ic);
  cursor:pointer;
  background:0 0;
  border:none;
  align-items:center;
  padding:4px;
  display:none
}
.chat-card.as-modal .chat-back {
  display:inline-flex
}
@media (width<=1023px) {
  .hero-chat-slot .chat-card:not(.as-modal) {
    max-width:480px;
    height:540px;
    max-height:68vh
  }
}
@media (width<=600px) {
  .hero {
    padding:12px 0 48px
  }
  .hero-chat-slot .chat-card:not(.as-modal) {
    border-radius:14px;
    max-width:100%;
    height:66vh;
    max-height:560px
  }
  .chat-card.as-modal {
    border-radius:0;
    width:auto!important;
    max-width:none!important;
    height:var(--chat-vh,100dvh)!important;
    max-height:var(--chat-vh,100dvh)!important;
    top:var(--chat-top,0px)!important;
    left:0!important;
    right:0!important;
    transform:none!important
  }
  .chat-input-area {
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))
  }
  .chat-body {
    padding-left:5%;
    padding-right:5%
  }
}
.testimonial-avatar,
.avatar-stack-item {
  overflow:hidden
}
.testimonial-avatar img,
.avatar-stack-item img {
  object-fit:cover;
  border-radius:50%;
  width:100%;
  height:100%;
  display:block
}
.heart {
  color:var(--via-accent)
}
.heart svg {
  display:block
}
.topbar {
  white-space:nowrap;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:16px;
  display:flex
}
.topbar-proof {
  opacity:.9;
  align-items:center;
  gap:6px;
  display:inline-flex
}
.topbar-mid {
  align-items:center;
  gap:9px;
  font-weight:600;
  display:inline-flex
}
.topbar-mid strong {
  font-family:var(--font-mono);
  letter-spacing:.01em;
  font-size:14px
}
.topbar-cta {
  background:var(--c-surface);
  color:var(--c-primary-700);
  border-radius:var(--c-radius-pill);
  font-size:12.5px;
  font-weight:700;
  font-family:var(--font-body);
  cursor:pointer;
  white-space:nowrap;
  border:none;
  align-items:center;
  gap:5px;
  padding:5px 14px;
  transition:transform .15s,box-shadow .15s;
  display:inline-flex
}
.topbar-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px #0000002e
}
.countdown-compact {
  align-items:center;
  gap:4px;
  display:inline-flex
}
.countdown-compact .cd-box {
  background:#ffffff38;
  border-radius:6px;
  flex-direction:column;
  align-items:center;
  padding:2px 6px;
  line-height:1.05;
  display:inline-flex
}
.countdown-compact .cd-num {
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700
}
.countdown-compact .cd-lbl {
  opacity:.85;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:7px
}
.countdown-compact .cd-sep {
  opacity:.7;
  font-weight:700
}
@media (width<=680px) {
  .topbar {
    gap:8px;
    padding:7px 10px;
    font-size:12px
  }
  .topbar-proof,
  .topbar-label {
    display:none
  }
  .topbar-mid {
    gap:7px
  }
  .topbar-mid strong {
    font-size:13px
  }
  .topbar-cta {
    padding:6px 12px;
    font-size:12px
  }
}
.returning-banner {
  z-index:55;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  position:sticky;
  top:0;
  box-shadow:0 1px #0000000a
}
.returning-banner-inner {
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px;
  display:flex
}
.returning-banner-greet {
  font-family:var(--c-font);
  color:var(--c-text-body);
  letter-spacing:-.005em;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:13.5px;
  display:inline-flex
}
.returning-banner-greet strong {
  color:var(--c-accent-deep);
  font-weight:700
}
.returning-banner-greet>span:first-child {
  font-size:16px;
  line-height:1
}
.returning-banner-greet>span:last-child {
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden
}
.returning-banner-actions {
  flex:none;
  align-items:center;
  gap:6px;
  display:inline-flex
}
.returning-banner-btn {
  border:1.5px solid var(--c-accent);
  color:var(--c-accent-deep);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), transform var(--c-t-fast);
  background:0 0;
  padding:7px 14px;
  font-size:12.5px;
  font-weight:600
}
.returning-banner-btn:hover {
  background:var(--c-surface-tint);
  border-color:var(--c-accent-deep);
  transform:translateY(-1px)
}
.returning-banner-dismiss {
  color:var(--c-text-faint);
  cursor:pointer;
  width:28px;
  height:28px;
  transition:background-color var(--c-t-fast), color var(--c-t-fast);
  background:0 0;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:16px;
  display:inline-flex
}
.returning-banner-dismiss:hover {
  background:var(--c-surface-alt);
  color:var(--c-text-muted)
}
@media (width<=480px) {
  .returning-banner-inner {
    gap:8px;
    padding:9px 12px
  }
  .returning-banner-greet {
    gap:6px;
    font-size:12.5px
  }
  .returning-banner-greet>span:last-child {
    white-space:normal;
    line-height:1.3
  }
  .returning-banner-btn {
    padding:6px 10px;
    font-size:11.5px
  }
}
.my-orders-page {
  background:var(--c-bg);
  min-height:100vh;
  padding-bottom:60px
}
.my-orders-header {
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface);
  z-index:20;
  align-items:center;
  gap:12px;
  padding:18px 16px 14px;
  display:flex;
  position:sticky;
  top:0
}
.my-orders-back {
  background:var(--c-surface-tint);
  border:1px solid var(--c-border);
  width:36px;
  height:36px;
  color:var(--c-text);
  cursor:pointer;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast);
  border-radius:50%;
  flex:0 0 36px;
  justify-content:center;
  align-items:center;
  display:inline-flex
}
.my-orders-back:hover {
  background:var(--c-surface-alt);
  border-color:var(--c-primary-300)
}
.my-orders-title-wrap {
  flex:1;
  min-width:0
}
.my-orders-eyebrow {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:3px;
  font-size:10.5px;
  font-weight:700;
  display:block
}
.my-orders-title {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:var(--c-ls-tight);
  margin:0;
  font-size:20px;
  font-weight:700;
  line-height:1.2
}
.my-orders-sub {
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin:2px 0 0;
  font-size:13px
}
.my-orders-list {
  flex-direction:column;
  gap:14px;
  max-width:720px;
  margin:0 auto;
  padding:18px 16px;
  display:flex
}
.my-order-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-sm);
  transition:box-shadow var(--c-t-fast), transform var(--c-t-fast);
  padding:16px
}
.my-order-card:hover {
  box-shadow:var(--c-shadow-md);
  transform:translateY(-1px)
}
.my-order-card--paid {
  border-left:3px solid var(--c-success)
}
.my-order-card--preview {
  border-left:3px solid var(--c-accent)
}
.my-order-card--pending {
  border-left:3px solid var(--c-warning)
}
.my-order-card--failed {
  border-left:3px solid var(--c-danger)
}
.my-order-card--clickable {
  text-align:left;
  width:100%;
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  align-items:center;
  gap:12px;
  display:flex
}
.my-order-card-info {
  flex-direction:column;
  flex:1;
  min-width:0;
  display:flex
}
.my-order-chevron {
  color:var(--c-text-muted);
  flex:0 0 20px
}
.my-order-card--clickable:hover .my-order-chevron {
  color:var(--c-accent-deep)
}
.my-orders-change-phone {
  color:var(--c-accent-deep);
  cursor:pointer;
  border-radius:var(--c-radius-sm);
  text-underline-offset:2px;
  transition:background-color var(--c-t-fast);
  background:0 0;
  border:none;
  flex:none;
  padding:6px 8px;
  font-size:12.5px;
  font-weight:600;
  text-decoration:underline
}
.my-orders-change-phone:hover {
  background:var(--c-surface-tint)
}
.my-order-detail {
  flex-direction:column;
  gap:16px;
  max-width:720px;
  margin:0 auto;
  padding:18px 16px;
  display:flex
}
.my-order-detail-back {
  color:var(--c-accent-deep);
  cursor:pointer;
  background:0 0;
  border:none;
  align-self:flex-start;
  align-items:center;
  gap:6px;
  padding:4px 0;
  font-size:13px;
  font-weight:600;
  display:inline-flex
}
.my-order-detail-back:hover {
  text-decoration:underline
}
.my-order-detail-head {
  flex-direction:column;
  gap:4px;
  padding-bottom:6px;
  display:flex
}
.my-order-detail-head .my-order-status {
  align-self:flex-start;
  margin-top:4px
}
.my-order-version {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-sm);
  flex-direction:column;
  gap:12px;
  padding:16px;
  display:flex
}
.my-order-version-label {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700
}
.my-order-head {
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
  display:flex
}
.my-order-name {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:var(--c-ls-tight);
  margin-bottom:2px;
  font-size:15.5px;
  font-weight:600;
  display:block
}
.my-order-date {
  font-family:var(--c-font-mono);
  color:var(--c-text-faint);
  letter-spacing:.04em;
  font-size:11px;
  display:block
}
.my-order-status {
  font-family:var(--c-font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  border-radius:999px;
  flex:none;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  font-size:10.5px;
  font-weight:700;
  display:inline-flex
}
.my-order-status--paid {
  color:var(--c-success);
  background:#1f8a5b1f
}
.my-order-status--preview {
  background:var(--c-surface-tint);
  color:var(--c-accent-deep)
}
.my-order-status--pending {
  color:var(--c-warning);
  background:#b86f1a1f
}
.my-order-status--failed {
  color:var(--c-danger);
  background:#b83a3a1f
}
.my-order-player {
  margin:0 0 12px
}
.my-order-actions {
  flex-wrap:nowrap;
  gap:8px;
  display:flex
}
.my-order-actions>* {
  flex:1 1 0;
  min-width:0
}
.my-order-actions .unlocked-share {
  width:auto;
  margin-top:0
}
.my-order-btn {
  border:1.5px solid var(--c-border-strong);
  border-radius:var(--c-radius-pill);
  color:var(--c-text-body);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), color var(--c-t-fast);
  background:0 0;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex
}
.my-order-btn:hover {
  background:var(--c-surface-tint);
  border-color:var(--c-primary-300);
  color:var(--c-accent-deep)
}
.my-order-btn--primary {
  background:var(--c-accent);
  color:#fff;
  border-color:var(--c-accent)
}
.my-order-btn--primary:hover {
  background:var(--c-accent-deep);
  border-color:var(--c-accent-deep);
  color:#fff
}
.my-order-hero {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 8px 18px;
  display:flex
}
.my-order-hero-emoji {
  font-size:44px;
  line-height:1
}
.my-order-hero-title {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:var(--c-ls-tight);
  margin:2px 0 0;
  font-size:23px;
  font-weight:700
}
.my-order-hero-title span {
  color:var(--c-accent)
}
.my-order-hero-sub {
  color:var(--c-text-faint);
  margin:0;
  font-size:14.5px
}
.my-order-video {
  aspect-ratio:1;
  object-fit:contain;
  background:#000;
  border-radius:12px;
  width:100%;
  margin:2px 0
}
.my-order-vgroup {
  font-family:var(--c-font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-text-faint);
  margin:6px 2px -2px;
  font-size:11px;
  font-weight:700
}
.my-order-vgroup--new {
  color:var(--c-accent-deep)
}
.my-order-orig-toggle {
  background:var(--c-surface-tint);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  width:100%;
  color:var(--c-text-body);
  font-family:var(--c-font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  transition:border-color var(--c-t-fast);
  align-items:center;
  gap:8px;
  margin-top:2px;
  padding:11px 14px;
  font-size:11.5px;
  font-weight:700;
  display:flex
}
.my-order-orig-toggle:hover {
  border-color:var(--c-primary-300)
}
.my-order-orig-caret {
  color:var(--c-text-faint);
  font-size:13px
}
.my-order-videogen {
  background:var(--c-surface-tint);
  border:1px solid var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  color:var(--c-accent-deep);
  text-align:center;
  padding:14px 16px;
  font-size:13px;
  font-weight:600;
  line-height:1.5
}
.studio-finishing {
  background:var(--c-surface-tint);
  border:1px solid var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  text-align:center;
  padding:26px 20px
}
.studio-finishing-eq {
  justify-content:center;
  align-items:flex-end;
  gap:5px;
  height:46px;
  margin-bottom:16px;
  display:flex
}
.studio-finishing-eq span {
  background:linear-gradient(180deg, var(--c-primary-300), var(--c-accent-deep));
  transform-origin:bottom;
  border-radius:3px;
  width:6px;
  height:100%;
  animation:.95s ease-in-out infinite sf-eq
}
.studio-finishing-eq span:nth-child(2n) {
  animation-duration:1.15s
}
.studio-finishing-eq span:nth-child(3n) {
  animation-duration:.8s
}
@keyframes sf-eq {
  0%,
  to {
    transform:scaleY(.26)
  }
  50% {
    transform:scaleY(1)
  }
}
@media (prefers-reduced-motion:reduce) {
  .studio-finishing-eq span {
    animation:none;
    transform:scaleY(.6)
  }
}
.studio-finishing-title {
  color:var(--c-accent-deep);
  margin-bottom:4px;
  font-size:16.5px;
  display:block
}
.studio-finishing-sub {
  color:var(--c-text-muted);
  margin:0 0 10px;
  font-size:13px;
  line-height:1.5
}
.studio-finishing-timer {
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  color:var(--c-accent-deep);
  margin:2px 0 12px;
  font-size:34px;
  font-weight:800
}
.studio-finishing-note {
  color:var(--c-text-muted);
  margin:0;
  font-size:12.5px;
  line-height:1.55
}
.my-order-edit-btn {
  border:1.5px dashed var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  width:100%;
  color:var(--c-accent-deep);
  font-family:var(--c-font);
  cursor:pointer;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast);
  background:0 0;
  margin-top:4px;
  padding:13px 16px;
  font-size:14px;
  font-weight:700
}
.my-order-edit-btn:hover {
  background:var(--c-surface-tint);
  border-color:var(--c-accent)
}
.my-order-edit-done {
  border-radius:var(--c-radius-lg);
  color:var(--c-success);
  text-align:center;
  background:#1f8a5b14;
  margin-top:4px;
  padding:12px 14px;
  font-size:13px;
  font-weight:600
}
.my-order-edit-err {
  color:var(--c-danger);
  background:#b83a3a14
}
.my-order-regen {
  background:var(--c-surface-tint);
  border:1px solid var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:20px 18px;
  display:flex
}
.my-order-regen-ic {
  font-size:30px;
  animation:1.6s ease-in-out infinite mse-pulse
}
.my-order-regen strong {
  font-family:var(--c-font-display);
  color:var(--c-text);
  font-size:16px
}
.my-order-regen p {
  color:var(--c-text-body);
  max-width:34ch;
  margin:0;
  font-size:13px
}
@keyframes mse-pulse {
  0%,
  to {
    opacity:1;
    transform:scale(1)
  }
  50% {
    opacity:.8;
    transform:scale(1.12)
  }
}
.mse {
  background:var(--c-surface);
  border:1px solid var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-sm);
  flex-direction:column;
  gap:14px;
  margin-top:4px;
  padding:16px;
  display:flex
}
.mse-mock {
  font-family:var(--c-font-mono);
  color:var(--c-warning);
  text-align:center;
  background:#b86f1a1a;
  border-radius:8px;
  padding:6px 10px;
  font-size:10.5px;
  font-weight:700
}
.mse-err {
  color:var(--c-danger);
  text-align:center;
  background:#b83a3a17;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  font-weight:600
}
.mse-head strong {
  font-family:var(--c-font-display);
  color:var(--c-text);
  margin-bottom:4px;
  font-size:16px;
  display:block
}
.mse-head p {
  color:var(--c-text-body);
  margin:0;
  font-size:13.5px;
  line-height:1.5
}
.mse-menu {
  flex-direction:column;
  gap:10px;
  display:flex
}
.mse-path {
  text-align:left;
  background:var(--c-surface-tint);
  border:1.5px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  cursor:pointer;
  transition:border-color var(--c-t-fast), transform var(--c-t-fast);
  align-items:center;
  gap:12px;
  padding:14px;
  display:flex
}
.mse-path:hover {
  border-color:var(--c-accent);
  transform:translateY(-1px)
}
.mse-path-ic {
  flex:none;
  font-size:26px
}
.mse-path-txt {
  flex-direction:column;
  flex:1;
  gap:2px;
  display:flex
}
.mse-path-txt b {
  color:var(--c-text);
  font-size:14.5px
}
.mse-path-txt small {
  color:var(--c-text-faint);
  font-size:12px;
  line-height:1.35
}
.mse-path-arrow {
  color:var(--c-text-faint);
  flex:none;
  font-size:24px
}
.mse-form {
  flex-direction:column;
  gap:12px;
  display:flex
}
.mse-lbl {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:.06em;
  text-transform:uppercase;
  flex-direction:column;
  gap:6px;
  font-size:11px;
  font-weight:700;
  display:flex
}
.mse-lbl small {
  font-family:var(--c-font);
  text-transform:none;
  letter-spacing:0;
  color:var(--c-text-faint);
  font-weight:500
}
.mse-input,
.mse-textarea {
  box-sizing:border-box;
  background:var(--c-surface);
  border:1.5px solid var(--c-border-strong);
  width:100%;
  font-family:var(--c-font);
  color:var(--c-text);
  transition:border-color var(--c-t-fast);
  border-radius:12px;
  outline:none;
  padding:11px 13px;
  font-size:14px
}
.mse-input:focus,
.mse-textarea:focus {
  border-color:var(--c-accent)
}
.mse-textarea {
  resize:vertical;
  white-space:pre-wrap;
  line-height:1.55
}
.mse-textarea--sm {
  min-height:60px
}
.mse-pills {
  flex-wrap:wrap;
  gap:7px;
  display:flex
}
.mse-pill {
  background:var(--c-surface-tint);
  border:1.5px solid var(--c-border);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  color:var(--c-text-body);
  cursor:pointer;
  transition:all var(--c-t-fast);
  padding:7px 13px;
  font-size:12.5px;
  font-weight:600
}
.mse-pill:hover {
  border-color:var(--c-primary-300)
}
.mse-pill.is-on {
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:#fff
}
.mse-pill--more {
  color:var(--c-accent-deep);
  background:0 0;
  border-style:dashed
}
.mse-note {
  color:var(--c-accent-deep);
  background:var(--c-surface-tint);
  border-radius:10px;
  padding:8px 11px;
  font-size:12.5px;
  font-weight:600;
  animation:.25s mse-fade
}
@keyframes mse-fade {
  0% {
    opacity:0;
    transform:translateY(-3px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.mse-instruct {
  background:var(--c-surface-tint);
  border-radius:12px;
  flex-direction:column;
  gap:8px;
  margin-top:2px;
  padding:12px;
  display:flex
}
.mse-gen,
.mse-confirm {
  border-radius:var(--c-radius-pill);
  width:100%;
  font-family:var(--c-font);
  cursor:pointer;
  transition:background-color var(--c-t-fast), opacity var(--c-t-fast);
  border:none;
  padding:13px 16px;
  font-size:14px;
  font-weight:700
}
.mse-gen {
  background:var(--c-accent);
  color:#fff
}
.mse-gen:hover:not(:disabled) {
  background:var(--c-accent-deep)
}
.mse-gen--soft {
  border:1.5px solid var(--c-accent);
  color:var(--c-accent-deep);
  background:0 0
}
.mse-gen--soft:hover:not(:disabled) {
  background:var(--c-surface)
}
.mse-gen:disabled,
.mse-confirm:disabled {
  opacity:.5;
  cursor:default
}
.mse-confirm {
  background:var(--c-success);
  color:#fff
}
.mse-confirm:hover:not(:disabled) {
  filter:brightness(.94)
}
.mse-count {
  color:var(--c-text-faint);
  text-align:center;
  margin:0;
  font-size:12px
}
.mse-back,
.mse-cancel {
  color:var(--c-text-faint);
  font-family:var(--c-font);
  cursor:pointer;
  background:0 0;
  border:none;
  align-self:center;
  padding:6px;
  font-size:13px;
  font-weight:600
}
.mse-back:hover,
.mse-cancel:hover {
  color:var(--c-text-body);
  text-decoration:underline
}
.mse-confirmbox,
.mse-sending {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:8px 4px;
  display:flex
}
.mse-confirm-ic,
.mse-sending-ic {
  font-size:34px
}
.mse-sending-ic {
  animation:1.6s ease-in-out infinite mse-pulse
}
.mse-confirmbox strong,
.mse-sending strong {
  font-family:var(--c-font-display);
  color:var(--c-text);
  font-size:17px
}
.mse-confirmbox p,
.mse-sending p {
  color:var(--c-text-body);
  max-width:40ch;
  margin:0;
  font-size:13.5px;
  line-height:1.5
}
.mse-warn {
  font-weight:600;
  color:var(--c-warning)!important
}
.mse-confirmbox .mse-confirm,
.mse-sending .mse-confirm {
  margin-top:6px
}
.my-orders-new {
  justify-content:center;
  padding:8px 16px 24px;
  display:flex
}
.my-orders-new .btn-primary {
  min-width:240px
}
.my-orders-empty {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:420px;
  margin:0 auto;
  padding:60px 24px;
  display:flex
}
.my-orders-empty-icon {
  font-size:48px
}
.my-orders-empty-text {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin:0;
  font-size:15px;
  line-height:1.5
}
@media (width<=480px) {
  .my-orders-header {
    padding:14px 14px 12px
  }
  .my-orders-title {
    font-size:18px
  }
  .my-order-card {
    padding:14px
  }
  .my-order-head {
    gap:8px
  }
  .my-order-status {
    padding:3px 8px;
    font-size:10px
  }
}
.header-nav-link {
  color:var(--text-muted);
  font-family:var(--font-body);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:0;
  font-size:14px;
  font-weight:500;
  transition:color .2s
}
.header-nav-link:hover {
  color:var(--purple-btn)
}
.header-my-orders {
  background:var(--c-surface-tint);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-pill);
  height:36px;
  color:var(--c-text-body);
  cursor:pointer;
  font-family:var(--c-font);
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), color var(--c-t-fast);
  justify-content:center;
  align-items:center;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  display:none
}
@media (width<=480px) {
  .header-logo {
    gap:6px;
    font-size:16px
  }
}
.header-my-orders:hover {
  background:var(--c-surface-alt);
  border-color:var(--c-primary-300);
  color:var(--c-accent-deep)
}
@media (width<=900px) {
  .header-my-orders {
    display:inline-flex
  }
}
@media (width<=380px) {
  .header-my-orders {
    padding:7px 11px;
    font-size:12.5px
  }
}
.lookup-modal-root {
  z-index:200;
  justify-content:center;
  align-items:flex-end;
  padding:0;
  display:flex;
  position:fixed;
  inset:0
}
@media (width>=480px) {
  .lookup-modal-root {
    align-items:center;
    padding:24px
  }
}
.lookup-modal-backdrop {
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  cursor:pointer;
  background:#0f0c0b8c;
  border:none;
  padding:0;
  position:absolute;
  inset:0
}
.lookup-modal-card {
  background:var(--c-surface);
  border-radius:20px 20px 0 0;
  width:100%;
  max-width:440px;
  padding:28px 22px 32px;
  animation:.25s ease-out lookupSlide;
  position:relative;
  box-shadow:0 -20px 40px #00000026
}
@media (width>=480px) {
  .lookup-modal-card {
    box-shadow:var(--c-shadow-lg);
    border-radius:20px;
    padding:32px
  }
}
@keyframes lookupSlide {
  0% {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.lookup-modal-close {
  background:var(--c-surface-tint);
  width:32px;
  height:32px;
  color:var(--c-text-muted);
  cursor:pointer;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:14px;
  display:inline-flex;
  position:absolute;
  top:14px;
  right:14px
}
.lookup-modal-close:hover {
  background:var(--c-surface-alt);
  color:var(--c-text)
}
.lookup-modal-eyebrow {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8px;
  font-size:10.5px;
  font-weight:700;
  display:block
}
.lookup-modal-title {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:var(--c-ls-tight);
  margin:0 0 6px;
  font-size:22px;
  font-weight:700;
  line-height:1.25
}
.lookup-modal-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin:0 0 18px;
  font-size:13.5px;
  line-height:1.5
}
.lookup-modal-input-wrap {
  background:var(--c-surface-alt);
  border:1.5px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  transition:border-color var(--c-t-fast), background-color var(--c-t-fast), box-shadow var(--c-t-fast);
  align-items:center;
  padding:4px 14px 4px 0;
  display:flex
}
.lookup-modal-input-wrap:focus-within {
  border-color:var(--c-accent);
  background:var(--c-surface);
  box-shadow:0 0 0 3px #d48f772e
}
.lookup-modal-prefix {
  font-family:var(--c-font-mono);
  color:var(--c-text-muted);
  letter-spacing:-.01em;
  border-right:1px solid var(--c-border);
  -webkit-user-select:none;
  user-select:none;
  flex:none;
  justify-content:center;
  align-items:center;
  margin-right:12px;
  padding:13px 12px 13px 16px;
  font-size:15px;
  font-weight:600;
  display:inline-flex
}
.lookup-modal-input-wrap:focus-within .lookup-modal-prefix {
  color:var(--c-accent);
  border-right-color:#d48f7759
}
.lookup-modal-input {
  min-width:0;
  font-family:var(--c-font);
  color:var(--c-text);
  letter-spacing:-.005em;
  background:0 0;
  border:none;
  outline:none;
  flex:1;
  padding:13px 0;
  font-size:16px;
  font-weight:500
}
.lookup-modal-input::placeholder {
  color:var(--c-text-faint);
  font-weight:400
}
.lookup-modal-input-icon {
  color:var(--c-text-faint);
  transition:color var(--c-t-fast);
  flex:none;
  justify-content:center;
  align-items:center;
  margin-left:8px;
  display:inline-flex
}
.lookup-modal-input-wrap:focus-within .lookup-modal-input-icon {
  color:var(--c-accent)
}
.lookup-modal-error {
  font-family:var(--c-font);
  color:var(--c-danger);
  letter-spacing:-.005em;
  margin:8px 0 0;
  font-size:12.5px
}
.lookup-modal-btn {
  background:var(--c-gradient-cta);
  color:#fff;
  border-radius:var(--c-radius-pill);
  width:100%;
  font-family:var(--c-font);
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform var(--c-t-fast), box-shadow var(--c-t-fast), opacity var(--c-t-fast);
  border:none;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding:15px 20px;
  font-size:15px;
  font-weight:700;
  display:inline-flex;
  box-shadow:0 8px 22px -8px #813a2266
}
.lookup-modal-btn:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 12px 28px -8px #813a228c
}
.lookup-modal-btn:active:not(:disabled) {
  transform:translateY(0)
}
.lookup-modal-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none
}
.lookup-modal-retry {
  border:1.5px solid var(--c-accent);
  border-radius:var(--c-radius-pill);
  background:var(--c-surface-tint);
  width:100%;
  color:var(--c-accent-deep);
  font-family:var(--c-font);
  cursor:pointer;
  transition:background-color var(--c-t-fast), transform var(--c-t-fast);
  margin:4px 0 10px;
  padding:13px 16px;
  font-size:14.5px;
  font-weight:700
}
.lookup-modal-retry:hover {
  background:var(--c-primary-100);
  transform:translateY(-1px)
}
.lookup-modal-switch {
  width:100%;
  color:var(--c-text-muted);
  font-family:var(--c-font);
  text-underline-offset:2px;
  cursor:pointer;
  background:0 0;
  border:none;
  margin:12px 0 0;
  font-size:12.5px;
  font-weight:600;
  text-decoration:underline;
  display:block
}
.lookup-modal-switch:hover {
  color:var(--c-accent-deep)
}
.lookup-modal-tip {
  font-family:var(--c-font);
  color:var(--c-text-faint);
  text-align:center;
  letter-spacing:-.005em;
  margin:16px 0 0;
  font-size:12px;
  line-height:1.55
}
.footer-text,
.footer-pay {
  align-items:center;
  gap:6px;
  display:inline-flex
}
.footer-text svg {
  color:var(--via-accent)
}
.pay-emoji {
  color:var(--via-accent);
  justify-content:center;
  display:flex
}
.pay-emoji.success {
  color:#1f8a5b
}
.hero-bg-photo {
  object-fit:cover;
  opacity:.12;
  z-index:0;
  pointer-events:none;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  -webkit-mask-image:linear-gradient(105deg,#000 30%,#0000 75%);
  mask-image:linear-gradient(105deg,#000 30%,#0000 75%)
}
[data-theme=dark] .hero-bg-photo {
  opacity:.1
}
.preview-video {
  aspect-ratio:9/16;
  object-fit:contain;
  width:100%;
  max-width:300px;
  box-shadow:var(--shadow-lg);
  background:#000;
  border-radius:20px;
  margin:0 auto;
  display:block
}
.song-cover {
  aspect-ratio:9/16;
  cursor:pointer;
  background:var(--gradient-purple);
  color:#fff;
  width:100%;
  max-width:300px;
  box-shadow:var(--shadow-lg);
  font-family:var(--font-body);
  border:none;
  border-radius:20px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:0 auto;
  padding:22px;
  display:flex;
  position:relative;
  overflow:hidden
}
.song-cover-art {
  background:#ffffff26;
  border-radius:22px;
  justify-content:center;
  align-items:center;
  width:80px;
  height:80px;
  margin-bottom:10px;
  display:flex
}
.song-cover-title {
  font-family:var(--font-heading);
  letter-spacing:-.02em;
  font-size:21px;
  font-weight:600
}
.song-cover-meta {
  opacity:.82;
  margin-bottom:12px;
  font-size:13px
}
.song-cover .waveform {
  background:#ffffff1a;
  width:78%;
  height:36px
}
.song-cover .wave-bar {
  opacity:.8;
  background:#ffffffa6
}
.song-play {
  width:50px;
  height:50px;
  color:var(--purple-deep);
  background:#fff;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  display:flex;
  position:absolute;
  bottom:16px;
  right:16px;
  box-shadow:0 8px 20px -6px #00000073
}
.song-play.playing {
  animation:2s infinite pulse-preview
}
.bento-video {
  aspect-ratio:9/16;
  object-fit:cover;
  width:100%;
  max-width:260px;
  box-shadow:var(--shadow-md);
  background:#000;
  border-radius:16px;
  display:block
}
.demo-photo {
  object-fit:cover;
  border-radius:18px;
  flex-shrink:0;
  width:120px;
  height:190px;
  box-shadow:0 14px 34px -12px #00000073
}
@media (width<=700px) {
  .demo-photo {
    display:none
  }
}
.offer-section {
  background:var(--via-bg);
  padding:72px 0
}
.offer-grid {
  grid-template-columns:1fr;
  align-items:center;
  gap:28px;
  max-width:940px;
  margin:0 auto;
  display:grid
}
.offer-card {
  background:var(--via-surface);
  border:1px solid var(--via-border);
  box-shadow:var(--shadow-md);
  border-radius:24px;
  padding:26px
}
.compare-rows {
  flex-direction:column;
  gap:10px;
  margin-top:12px;
  display:flex
}
.compare-row {
  border-radius:var(--c-radius-md);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  transition:transform var(--c-t-fast), border-color var(--c-t-fast);
  align-items:center;
  gap:14px;
  padding:14px 16px;
  display:flex;
  position:relative
}
.compare-row:hover {
  border-color:var(--c-primary-300);
  transform:translateY(-1px)
}
.compare-ic {
  border-radius:var(--c-radius-md);
  background:var(--c-surface-alt);
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  font-size:22px;
  line-height:1;
  display:inline-flex
}
.compare-text {
  flex:auto;
  min-width:0
}
.compare-name {
  font-family:var(--c-font);
  letter-spacing:-.01em;
  color:var(--c-text);
  font-size:14.5px;
  font-weight:600;
  line-height:1.3
}
.compare-sub {
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin-top:3px;
  font-size:12.5px
}
.compare-price {
  font-family:var(--c-font-mono);
  color:var(--c-text);
  white-space:nowrap;
  flex-shrink:0;
  font-size:14px;
  font-weight:500
}
.compare-price.old {
  color:var(--c-text-faint);
  -webkit-text-decoration:line-through #b83a3a99;
  text-decoration:line-through #b83a3a99;
  text-decoration-thickness:2px
}
.compare-row.win {
  background:linear-gradient(135deg, var(--c-surface-tint) 0%, var(--c-primary-100) 100%);
  border:1.5px solid var(--c-accent);
  box-shadow:0 0 0 3px #c962401a, var(--c-shadow-sm);
  padding-top:18px
}
.compare-row.win .compare-sub {
  color:var(--c-primary-700)
}
.compare-row.win .compare-ic {
  background:var(--c-accent);
  color:var(--c-text-inverse)
}
.compare-row.win .compare-price {
  color:var(--c-accent-deep);
  font-weight:600
}
.compare-row.win .compare-price strong {
  color:var(--c-accent-deep);
  font-size:16px;
  font-weight:700
}
.compare-badge {
  background:var(--c-gradient-cta);
  color:var(--c-text-inverse);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:var(--c-shadow-sm);
  padding:3px 10px;
  font-size:10px;
  font-weight:600;
  position:absolute;
  top:-10px;
  left:14px
}
.compare-ic-win {
  animation:2.4s ease-in-out infinite compare-pulse
}
@keyframes compare-pulse {
  0%,
  to {
    transform:scale(1);
    box-shadow:0 0 #c9624073
  }
  50% {
    transform:scale(1.06);
    box-shadow:0 0 0 8px #c9624000
  }
}
@media (width<=540px) {
  .compare-row {
    grid-template-rows:auto auto;
    grid-template-columns:auto 1fr;
    gap:8px 12px;
    padding:14px;
    display:grid
  }
  .compare-ic {
    grid-row:1/3;
    align-self:start
  }
  .compare-text {
    grid-column:2
  }
  .compare-price {
    grid-column:2;
    justify-self:end;
    font-size:13.5px
  }
  .compare-row.win .compare-price strong {
    font-size:15px
  }
}
.compare-price {
  font-family:var(--font-mono);
  color:var(--via-text-primary);
  white-space:nowrap;
  font-size:16px;
  font-weight:600
}
.compare-price.old {
  color:var(--via-text-soft);
  text-decoration:line-through
}
.compare-row.win {
  background:var(--via-surface-tint);
  border:1.5px solid var(--via-accent-border)
}
.compare-row.win .compare-name,
.compare-row.win .compare-price {
  color:var(--via-accent-deep)
}
.offer-anchor-note {
  color:var(--via-text-muted);
  text-align:center;
  margin-top:16px;
  font-size:13.5px;
  line-height:1.5
}
.offer-anchor-note strong {
  color:var(--via-text-primary);
  font-weight:600
}
.offer-cta-col {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:12px;
  display:flex
}
.offer-eyebrow {
  font-family:var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--via-text-soft);
  font-size:11px
}
.offer-price {
  font-family:var(--font-mono);
  color:var(--via-text-primary);
  align-items:flex-start;
  gap:2px;
  line-height:1;
  display:flex
}
.offer-cur {
  color:var(--via-text-muted);
  padding-top:10px;
  font-size:22px;
  font-weight:600
}
.offer-int {
  letter-spacing:-.03em;
  font-size:64px;
  font-weight:700
}
.offer-cents {
  padding-top:6px;
  font-size:30px;
  font-weight:600
}
.offer-parcel {
  color:var(--via-text-muted);
  margin-top:-4px;
  font-size:13.5px
}
.offer-urgency {
  border:1px solid var(--via-accent-border);
  background:var(--via-surface);
  border-radius:16px;
  width:100%;
  max-width:360px;
  padding:14px
}
.offer-urgency-top {
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--via-accent-deep);
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-size:11.5px;
  font-weight:600;
  display:inline-flex
}
.countdown {
  justify-content:center;
  align-items:center;
  gap:6px;
  display:flex
}
.cd-box {
  background:var(--via-text-primary);
  color:var(--via-bg);
  border-radius:10px;
  flex-direction:column;
  align-items:center;
  min-width:52px;
  padding:8px 10px;
  display:flex
}
.cd-num {
  font-family:var(--font-mono);
  font-size:24px;
  font-weight:700;
  line-height:1
}
.cd-lbl {
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.7;
  margin-top:3px;
  font-size:9px
}
.cd-sep {
  font-family:var(--font-mono);
  color:var(--via-accent);
  font-size:22px;
  font-weight:700
}
.offer-cta {
  width:100%;
  max-width:380px;
  margin-top:4px;
  padding:16px 0;
  font-size:16px
}
.offer-note {
  color:var(--via-text-soft);
  align-items:center;
  gap:6px;
  font-size:12px;
  display:inline-flex
}
@media (width>=860px) {
  .offer-grid {
    grid-template-columns:1.1fr 1fr
  }
}
.how-img {
  aspect-ratio:4/3;
  background:var(--via-surface-alt);
  border-radius:16px;
  width:100%;
  margin-bottom:16px;
  overflow:hidden
}
.how-img img {
  object-fit:cover;
  width:100%;
  height:100%;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  display:block
}
.how-card:hover .how-img img {
  transform:scale(1.04)
}
.pay-overlay {
  z-index:200;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  background:#2b1b2e8c;
  justify-content:center;
  align-items:center;
  padding:20px;
  animation:.25s fade-in-up;
  display:flex;
  position:fixed;
  inset:0
}
.pay-card {
  background:var(--via-surface);
  text-align:center;
  width:100%;
  max-width:400px;
  box-shadow:var(--shadow-lg);
  border-radius:24px;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  padding:32px 26px;
  display:flex
}
.pay-emoji {
  font-size:52px
}
.pay-title {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  font-size:22px;
  font-weight:600
}
.pay-sub {
  color:var(--text-muted);
  margin-bottom:6px;
  font-size:15px;
  line-height:1.6
}
.pay-sub strong {
  color:var(--text-dark)
}
.pay-card .btn-primary,
.pay-card .btn-outline {
  width:100%
}
.spinner-lg {
  border:4px solid var(--purple-light-bg);
  border-top-color:var(--purple-btn);
  border-radius:50%;
  width:48px;
  height:48px;
  margin:4px auto;
  animation:.7s linear infinite spin
}
.result-buy-title {
  color:var(--text-dark);
  text-align:center;
  margin:18px 0 12px;
  font-size:14px;
  font-weight:600
}
.result-plans {
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
  display:flex
}
.result-plan {
  border:1.5px solid var(--border-color);
  background:var(--bg-fafafa);
  cursor:pointer;
  font-family:var(--font-body);
  text-align:left;
  border-radius:16px;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  transition:all .18s;
  display:grid;
  position:relative
}
.result-plan:hover {
  border-color:var(--purple-btn);
  background:var(--via-surface);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px)
}
.result-plan.featured {
  border-color:var(--purple-btn);
  background:var(--via-surface);
  border-width:2px
}
.result-plan:disabled {
  opacity:.55;
  cursor:not-allowed
}
.result-plan-badge {
  background:var(--gradient-cta);
  color:#fff;
  letter-spacing:.04em;
  border-radius:9999px;
  padding:3px 10px;
  font-size:9.5px;
  font-weight:700;
  position:absolute;
  top:-9px;
  left:14px
}
.result-plan-name {
  color:var(--text-dark);
  font-size:14.5px;
  font-weight:600
}
.result-plan-price {
  font-family:var(--font-heading);
  color:var(--purple-deep);
  font-size:18px;
  font-weight:600
}
.result-plan-go {
  color:var(--purple-btn);
  white-space:nowrap;
  font-size:13px;
  font-weight:600
}
.btn-light {
  background:var(--c-surface);
  color:var(--c-primary-700)
}
.header {
  background:#fffbf8d1
}
[data-theme=dark] .header {
  background:#14101ad1
}
.theme-toggle {
  border:1px solid var(--via-border);
  background:var(--via-surface);
  width:38px;
  height:38px;
  color:var(--via-text-muted);
  cursor:pointer;
  border-radius:9999px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  font-size:17px;
  line-height:1;
  transition:color .2s,border-color .2s;
  display:inline-flex
}
.theme-toggle:hover {
  color:var(--via-accent);
  border-color:var(--via-accent-border)
}
.chip {
  box-shadow:none;
  font-family:var(--font-mono);
  letter-spacing:.06em;
  color:var(--via-text-soft);
  text-transform:uppercase;
  background:0 0;
  border:none;
  border-radius:0;
  margin-bottom:14px;
  padding:0;
  font-size:11px;
  font-weight:500;
  display:inline-block
}
.hero-chip {
  letter-spacing:-.004em;
  padding:5px 12px;
  font-size:11px;
  font-weight:500
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.chat-opt:focus-visible {
  outline:2px solid var(--via-accent);
  outline-offset:2px;
  border-radius:8px
}
.avatar-stack-item {
  border-color:var(--via-surface)
}
.header-logo {
  color:var(--via-text-primary);
  font-weight:600
}
.quiz-modal-root {
  z-index:1000;
  justify-content:center;
  align-items:center;
  padding:16px;
  display:flex;
  position:fixed;
  inset:0
}
.quiz-backdrop {
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  background:#2a1a2e8c;
  position:absolute;
  inset:0
}
.quiz-modal-card {
  z-index:1;
  flex-direction:column;
  width:100%;
  max-width:540px;
  max-height:92vh;
  display:flex;
  position:relative
}
.quiz-close {
  z-index:3;
  background:var(--via-surface-tint);
  width:34px;
  height:34px;
  color:var(--text-muted);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:16px;
  transition:background .2s;
  display:flex;
  position:absolute;
  top:10px;
  right:12px
}
.quiz-close:hover {
  background:var(--purple-light-bg);
  color:var(--purple-deep)
}
.quiz-card {
  background:var(--c-surface);
  border-radius:var(--c-radius-xl);
  border:1px solid var(--c-border);
  box-shadow:var(--c-shadow-lg);
  flex-direction:column;
  padding:0;
  display:flex;
  overflow:hidden
}
.quiz-top {
  border-bottom:1px solid var(--c-border-soft);
  flex-shrink:0;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px 14px;
  padding:18px 26px 16px;
  display:grid
}
.quiz-top-meta {
  grid-column:1/-1;
  align-items:center;
  gap:10px;
  min-height:14px;
  display:flex
}
.quiz-section {
  font-family:var(--c-font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  font-size:10.5px;
  font-weight:500
}
.quiz-progress-track {
  background:var(--c-surface-alt);
  border-radius:var(--c-radius-pill);
  flex:1;
  height:6px;
  overflow:hidden
}
.quiz-progress-fill {
  background:var(--c-gradient-cta);
  border-radius:var(--c-radius-pill);
  height:100%;
  transition:width .35s var(--c-ease)
}
.quiz-step-count {
  font-family:var(--c-font-mono);
  letter-spacing:.04em;
  color:var(--c-text-muted);
  flex-shrink:0;
  font-size:11px;
  font-weight:500
}
.quiz-screen {
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  flex:auto;
  min-height:120px;
  padding:22px 26px 24px;
  overflow-y:auto
}
.quiz-screen::-webkit-scrollbar {
  width:6px
}
.quiz-screen::-webkit-scrollbar-thumb {
  background:var(--c-border-strong);
  border-radius:var(--c-radius-pill)
}
.quiz-foot {
  border-top:1px solid var(--c-border-soft);
  background:var(--c-surface);
  flex-direction:column;
  flex-shrink:0;
  gap:6px;
  padding:14px 26px 18px;
  display:flex
}
.quiz-q {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  font-size:22px;
  font-weight:600;
  line-height:var(--c-lh-snug);
  margin:0 0 8px
}
.quiz-hint {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  font-size:14px;
  line-height:var(--c-lh-normal);
  margin:0 0 16px
}
.quiz-q+.quiz-rel-grid,
.quiz-q+.input-text,
.quiz-q+.quiz-chips,
.quiz-q+.genre-grid,
.quiz-q+.voice-grid,
.quiz-q+.quiz-num-grid,
.quiz-q+.quiz-audiofield {
  margin-top:18px
}
.quiz-label {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  margin-bottom:10px;
  font-size:11px;
  font-weight:500;
  display:block
}
.quiz-rel-grid {
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  display:grid
}
.quiz-rel-card {
  border-radius:var(--c-radius-lg);
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  cursor:pointer;
  font-family:var(--c-font);
  transition:transform var(--c-t-fast), border-color var(--c-t-fast), background-color var(--c-t-fast), box-shadow var(--c-t-fast);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:18px 10px;
  display:flex
}
.quiz-rel-card:hover {
  border-color:var(--c-primary-300);
  background:var(--c-surface-tint);
  box-shadow:var(--c-shadow-sm);
  transform:translateY(-2px)
}
.quiz-rel-card.selected {
  border-color:var(--c-accent);
  background:var(--c-surface-tint);
  box-shadow:0 0 0 3px #c9624038, var(--c-shadow-sm)
}
.quiz-rel-ic {
  font-size:28px;
  line-height:1
}
.quiz-rel-label {
  letter-spacing:-.005em;
  color:var(--c-text);
  text-align:center;
  font-size:13px;
  font-weight:500
}
.quiz-num-grid {
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  display:grid
}
.quiz-num {
  aspect-ratio:1;
  border-radius:var(--c-radius-lg);
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-text);
  font-family:var(--c-font-mono);
  cursor:pointer;
  transition:transform var(--c-t-fast), border-color var(--c-t-fast), background-color var(--c-t-fast), box-shadow var(--c-t-fast);
  font-size:26px;
  font-weight:600
}
.quiz-num:hover {
  border-color:var(--c-primary-300);
  background:var(--c-surface-tint);
  transform:translateY(-2px)
}
.quiz-num.selected {
  border-color:var(--c-accent);
  background:var(--c-surface-tint);
  color:var(--c-accent-deep);
  box-shadow:0 0 0 3px #c9624038
}
.quiz-chips {
  flex-wrap:wrap;
  gap:8px;
  display:flex
}
.quiz-mood {
  align-items:center;
  gap:6px;
  display:inline-flex
}
.quiz-audiofield {
  flex-direction:column;
  gap:12px;
  display:flex
}
.quiz-textarea {
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  border-radius:var(--c-radius-md);
  width:100%;
  font-family:var(--c-font);
  color:var(--c-text);
  resize:none;
  height:120px;
  font-size:15px;
  line-height:var(--c-lh-normal);
  letter-spacing:-.005em;
  transition:border-color var(--c-t-fast), box-shadow var(--c-t-fast);
  outline:none;
  padding:14px 16px
}
.quiz-textarea::placeholder {
  color:var(--c-text-faint)
}
.quiz-textarea:focus {
  border-color:var(--c-accent);
  box-shadow:var(--c-shadow-focus)
}
.quiz-mic-btn {
  border-radius:var(--c-radius-pill);
  border:1px solid var(--c-primary-300);
  background:var(--c-surface-tint);
  color:var(--c-accent-deep);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:transform var(--c-t-fast), background-color var(--c-t-fast);
  align-self:flex-start;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  font-size:14px;
  font-weight:500;
  display:inline-flex
}
.quiz-mic-btn:hover {
  background:var(--c-primary-100);
  transform:translateY(-1px)
}
.quiz-mic-btn.stop {
  background:var(--c-gradient-cta);
  color:var(--c-text-inverse);
  border:none;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0
}
.quiz-recbar {
  background:var(--c-surface-tint);
  border-radius:var(--c-radius-md);
  border:1px solid var(--c-primary-200);
  align-items:center;
  gap:12px;
  padding:12px 14px;
  display:flex
}
.quiz-rec-cancel {
  background:var(--c-surface);
  width:30px;
  height:30px;
  color:var(--c-text-muted);
  cursor:pointer;
  border:none;
  border-radius:50%
}
.quiz-rec-dot {
  background:var(--c-danger);
  border-radius:50%;
  width:10px;
  height:10px;
  animation:1s infinite quizPulse
}
@keyframes quizPulse {
  0%,
  to {
    opacity:1
  }
  50% {
    opacity:.3
  }
}
.quiz-rec-time {
  font-family:var(--c-font-mono);
  color:var(--c-text);
  font-size:14px;
  font-weight:500
}
.quiz-rec-hint {
  color:var(--c-text-muted);
  flex:1;
  font-size:13px
}
.quiz-skip {
  color:var(--c-text-muted);
  font-family:var(--c-font);
  cursor:pointer;
  text-underline-offset:3px;
  background:0 0;
  border:none;
  margin:16px auto 0;
  font-size:13px;
  text-decoration:underline;
  display:block
}
.quiz-skip:hover {
  color:var(--c-accent-deep)
}
.quiz-nav {
  align-items:center;
  gap:14px;
  margin:0;
  display:flex
}
.quiz-back {
  color:var(--c-text-muted);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:color var(--c-t-fast);
  background:0 0;
  border:none;
  flex-shrink:0;
  padding:12px 6px;
  font-size:14px;
  font-weight:500
}
.quiz-back:hover {
  color:var(--c-accent-deep)
}
.quiz-next {
  flex:1
}
.quiz-rel-more {
  background:var(--c-surface-tint);
  color:var(--c-accent-deep);
  border:1px solid var(--c-primary-200);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.004em;
  cursor:pointer;
  transition:transform var(--c-t-fast), background-color var(--c-t-fast);
  align-items:center;
  gap:6px;
  margin:18px auto 4px;
  padding:10px 18px;
  font-size:13px;
  font-weight:500;
  display:inline-flex
}
.quiz-rel-more:hover {
  background:var(--c-primary-100);
  transform:translateY(-1px)
}
.quiz-screen>.quiz-rel-more {
  max-width:max-content;
  display:flex
}
.quiz-chat-link {
  color:var(--c-text-muted);
  font-family:var(--c-font);
  cursor:pointer;
  transition:color var(--c-t-fast);
  background:0 0;
  border:none;
  margin:0 auto;
  padding:4px 8px;
  font-size:13px;
  display:block
}
.quiz-chat-link:hover {
  color:var(--c-accent-deep)
}
@media (width<=480px) {
  .quiz-modal-root {
    padding:0
  }
  .quiz-modal-card {
    max-width:100%;
    height:100%;
    max-height:100vh
  }
  .quiz-card {
    border-radius:0;
    height:100%
  }
  .quiz-rel-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@keyframes c-shimmer {
  0% {
    background-position:100% 0
  }
  to {
    background-position:-100% 0
  }
}
@keyframes c-toast-in {
  0% {
    opacity:0;
    transform:translateY(12px)scale(.98)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes c-toast-bar {
  0% {
    width:100%
  }
  to {
    width:0%
  }
}
@media (prefers-reduced-motion:reduce) {
  *,
  :before,
  :after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}
body {
  letter-spacing:-.005em
}
.chip,
.eyebrow,
.topbar-mid,
.form-label,
.footer-col-title {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase
}
.hero-title,
.section-title,
.plan-name,
.bento-title,
.how-title,
.pay-title,
.chat-name,
.demo-title,
.progress-title,
.result-title,
.error-title,
.form-card-title,
.quiz-q {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight)
}
.player-time,
.pricing-price,
.plan-price,
.result-plan-price,
.pricing-amount,
.pricing-cents,
.cd-num,
.compare-price,
.offer-int,
.offer-cents,
.offer-cur,
.chat-plan-price,
.chat-rec-time,
.quiz-rec-time {
  font-family:var(--c-font-mono)
}
em,
.accent-em {
  color:var(--c-accent-deep);
  font-style:italic;
  font-weight:500
}
.pix-modal-root {
  z-index:1100;
  padding:max(env(safe-area-inset-top,0px), 14px) max(env(safe-area-inset-right,0px), 12px) max(env(safe-area-inset-bottom,0px), 14px) max(env(safe-area-inset-left,0px), 12px);
  animation:pix-fade .2s var(--c-ease-out);
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
  inset:0
}
@keyframes pix-fade {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }
}
.pix-modal-backdrop {
  -webkit-backdrop-filter:blur(4px);
  background:#1c19179e;
  border:none;
  padding:0;
  position:absolute;
  inset:0
}
.pix-modal-card {
  z-index:1;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--c-surface);
  border-radius:var(--c-radius-xl);
  forced-color-adjust:none;
  width:100%;
  max-width:420px;
  max-height:92dvh;
  animation:pix-up .28s var(--c-ease-spring);
  padding:22px 22px 18px;
  position:relative;
  overflow-y:auto;
  box-shadow:0 30px 80px -20px #00000080
}
@keyframes pix-up {
  0% {
    opacity:0;
    transform:translateY(20px)scale(.97)
  }
  to {
    opacity:1;
    transform:none
  }
}
.pix-modal-close {
  top:max(env(safe-area-inset-top,0px), 14px);
  right:max(env(safe-area-inset-right,0px), 14px);
  background:var(--c-surface);
  width:40px;
  height:40px;
  color:var(--c-text);
  cursor:pointer;
  transition:background-color var(--c-t-fast), transform var(--c-t-fast);
  z-index:1102;
  -webkit-tap-highlight-color:transparent;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:18px;
  font-weight:600;
  display:inline-flex;
  position:fixed;
  box-shadow:0 4px 14px #0000002e
}
.pix-modal-close:hover {
  background:var(--c-primary-100);
  color:var(--c-accent-deep)
}
.pix-modal-close:active {
  transform:scale(.94)
}
.pix-plan-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin:-8px 0 18px;
  font-size:13px
}
.pix-plan-list {
  flex-direction:column;
  gap:12px;
  margin-bottom:6px;
  display:flex
}
.pix-plan-card {
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  text-align:left;
  cursor:pointer;
  font-family:var(--c-font);
  color:var(--c-text);
  transition:border-color var(--c-t-fast), transform var(--c-t-fast), box-shadow var(--c-t-fast);
  -webkit-tap-highlight-color:transparent;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  display:flex;
  position:relative
}
.pix-plan-card:active {
  transform:scale(.985)
}
.pix-plan-card.is-selected,
.pix-plan-card:focus-visible {
  border-color:var(--c-accent);
  outline:none;
  box-shadow:0 0 0 3px #d48f7738
}
.pix-plan-card--basic {
  background:var(--c-surface-alt);
  border-color:var(--c-border);
  padding:12px 14px
}
.pix-plan-card--basic .pix-plan-card-name {
  font-size:14px
}
.pix-plan-card--basic .pix-plan-card-price {
  color:var(--c-text);
  opacity:.85;
  font-size:17px
}
.pix-plan-card--basic .pix-plan-card-list {
  font-size:12px
}
.pix-plan-card--basic:hover {
  border-color:var(--c-accent);
  background:var(--c-surface)
}
.pix-plan-card--featured {
  border:2px solid var(--c-accent);
  background:linear-gradient(#d48f771f,#d48f770a);
  margin-top:6px;
  padding:20px 18px 16px;
  animation:3s ease-in-out infinite pix-plan-breath;
  box-shadow:0 8px 24px -8px #813a2252
}
.pix-plan-card--featured:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 32px -8px #813a2280
}
.pix-plan-card--featured .pix-plan-card-name {
  color:var(--c-text);
  font-size:17px;
  font-weight:700
}
.pix-plan-card--featured .pix-plan-card-price {
  color:var(--c-accent);
  font-size:22px
}
.pix-plan-card--featured .pix-plan-card-list {
  color:var(--c-text);
  font-size:13px
}
.pix-plan-card--featured .pix-plan-card-list li {
  padding-left:18px;
  line-height:1.45
}
.pix-plan-card--featured .pix-plan-card-list li:before {
  font-size:12.5px
}
.pix-plan-card--featured .pix-plan-card-arrow {
  background:var(--c-accent);
  color:#fff;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  display:inline-flex;
  position:absolute;
  bottom:12px;
  right:12px;
  box-shadow:0 4px 10px #813a2259
}
@keyframes pix-plan-breath {
  0%,
  to {
    transform:scale(1);
    box-shadow:0 8px 24px -8px #813a2252
  }
  50% {
    transform:scale(1.01);
    box-shadow:0 12px 32px -6px #813a227a
  }
}
@media (prefers-reduced-motion:reduce) {
  .pix-plan-card--featured {
    animation:none
  }
}
.pix-plan-badge {
  background:var(--c-gradient-cta);
  color:var(--c-text-inverse);
  font-family:var(--c-font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:var(--c-radius-sm);
  white-space:nowrap;
  padding:4px 10px;
  font-size:10px;
  font-weight:700;
  position:absolute;
  top:-10px;
  left:14px;
  box-shadow:0 4px 12px #813a2266
}
.pix-plan-card-row {
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  display:flex
}
.pix-plan-card-name {
  letter-spacing:-.015em;
  flex:auto;
  font-weight:600;
  line-height:1.25
}
.pix-plan-card-price {
  font-family:var(--c-font-mono);
  letter-spacing:-.02em;
  white-space:nowrap;
  font-weight:700
}
.pix-plan-card-list {
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
  display:flex
}
.pix-plan-card-list li {
  padding-left:14px;
  line-height:1.4;
  position:relative
}
.pix-plan-card-list li:before {
  content:"✓";
  color:var(--c-accent);
  font-size:11px;
  font-weight:700;
  position:absolute;
  top:0;
  left:0
}
.pix-modal-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  margin-bottom:6px;
  font-size:10.5px;
  font-weight:500;
  display:inline-block
}
.pix-modal-title {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  margin:0 0 18px;
  font-size:22px;
  font-weight:600
}
.pix-modal-amount-card {
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  text-align:center;
  margin-bottom:18px;
  padding:16px 18px
}
.pix-modal-amount-label {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin-bottom:4px;
  font-size:12px;
  display:block
}
.pix-modal-amount {
  font-family:var(--c-font-mono);
  letter-spacing:-.03em;
  color:var(--c-accent);
  margin-bottom:6px;
  font-size:38px;
  font-weight:700;
  line-height:1.05;
  display:block
}
.pix-modal-offer {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.004em;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  display:inline-flex
}
.pix-modal-offer svg {
  color:var(--c-accent)
}
.pix-modal-cd {
  font-family:var(--c-font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:#fff;
  background:var(--c-danger);
  border-radius:var(--c-radius-sm);
  padding:3px 9px;
  font-size:13px;
  font-weight:700;
  animation:1.1s ease-in-out infinite pix-cd-pulse;
  box-shadow:0 0 #b83a3a8c
}
@keyframes pix-cd-pulse {
  0%,
  to {
    transform:scale(1);
    box-shadow:0 0 #b83a3a8c
  }
  50% {
    transform:scale(1.04);
    box-shadow:0 0 0 6px #b83a3a00
  }
}
.pix-modal-offer:has(.pix-modal-cd) svg {
  color:var(--c-danger)
}
.pix-modal-qr {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  justify-content:center;
  width:fit-content;
  margin:0 auto 16px;
  padding:14px;
  display:flex
}
.pix-modal-qr img {
  width:200px;
  height:200px;
  image-rendering:pixelated;
  display:block
}
.pix-modal-qr-hint {
  text-align:center;
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin-bottom:14px;
  font-size:12.5px;
  display:block
}
.pix-modal-details {
  border-top:1px dashed var(--c-border);
  margin:0 0 14px;
  padding-top:10px
}
.pix-modal-details>summary {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  cursor:pointer;
  text-align:center;
  letter-spacing:-.005em;
  font-size:13px;
  font-weight:500;
  list-style:none
}
.pix-modal-details>summary::-webkit-details-marker {
  display:none
}
.pix-modal-details>summary:hover {
  color:var(--c-accent-deep)
}
.pix-modal-details[open]>summary {
  margin-bottom:8px
}
.pix-modal-key {
  font-family:var(--c-font-mono);
  color:var(--c-text);
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-pill);
  text-align:center;
  letter-spacing:.02em;
  word-break:break-all;
  overflow-wrap:anywhere;
  padding:10px 16px;
  font-size:13px;
  font-weight:500
}
.pix-modal-copy {
  background:var(--c-gradient-cta);
  width:100%;
  color:var(--c-text-inverse);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:transform var(--c-t-fast), box-shadow var(--c-t-fast);
  border:none;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:14px 0;
  padding:14px 16px;
  font-size:15px;
  font-weight:600;
  display:inline-flex;
  box-shadow:0 10px 26px #813a2273
}
.pix-modal-copy:hover {
  transform:translateY(-1px);
  box-shadow:0 14px 32px #813a228c
}
.pix-modal-copy:active {
  transform:translateY(0)
}
.pix-modal-receiver-note {
  font-family:var(--c-font);
  color:var(--c-text-body);
  border-radius:var(--c-radius-md);
  letter-spacing:-.005em;
  background:#1f8a5b14;
  border:1px solid #1f8a5b38;
  align-items:flex-start;
  gap:7px;
  margin:0 0 12px;
  padding:9px 12px;
  font-size:12px;
  line-height:1.5;
  display:flex
}
.pix-modal-receiver-note svg {
  color:var(--c-success);
  flex:0 0 12px;
  margin-top:3px
}
.pix-modal-receiver-note strong {
  color:var(--c-text);
  font-weight:700
}
.pix-modal-instructions {
  font-family:var(--c-font);
  color:var(--c-text-body);
  background:var(--c-surface-tint);
  border-radius:var(--c-radius-md);
  letter-spacing:-.005em;
  margin:14px 0;
  padding:12px 14px;
  font-size:13px;
  line-height:1.6
}
.pix-modal-instructions strong {
  color:var(--c-accent-deep);
  font-weight:700;
  font-family:var(--c-font-mono)
}
.pix-modal-trust {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.004em;
  justify-content:center;
  gap:18px;
  margin-bottom:8px;
  font-size:11px;
  display:flex
}
.pix-modal-trust span {
  align-items:center;
  gap:5px;
  display:inline-flex
}
.pix-modal-trust svg {
  color:var(--c-success)
}
.pix-modal-order {
  text-align:center;
  font-family:var(--c-font-mono);
  color:var(--c-text-faint);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:4px 0 12px;
  font-size:10px
}
.pix-modal-paid {
  border-radius:var(--c-radius-pill);
  width:100%;
  font-family:var(--c-font);
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), color var(--c-t-fast), box-shadow var(--c-t-fast), transform var(--c-t-fast);
  -webkit-tap-highlight-color:transparent;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:11px 16px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.2;
  display:flex
}
.pix-modal-paid svg {
  flex:none
}
.pix-modal-paid-text {
  text-overflow:ellipsis;
  min-width:0;
  overflow:hidden
}
.pix-modal-paid.is-waiting {
  background:var(--c-surface-tint);
  color:var(--c-text-muted);
  border:1px solid var(--c-border);
  cursor:default
}
.pix-modal-paid.is-waiting svg {
  color:var(--c-accent);
  animation:2s ease-in-out infinite pix-tick
}
@keyframes pix-tick {
  0%,
  to {
    opacity:1
  }
  50% {
    opacity:.45
  }
}
.pix-paid-cd {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  background:#cc785c1f;
  border-radius:999px;
  flex:none;
  padding:2px 7px;
  font-size:12.5px;
  font-weight:700
}
.pix-modal-paid.is-ready {
  background:var(--c-surface);
  color:var(--c-accent-deep);
  border:1.5px solid var(--c-accent)
}
.pix-modal-paid.is-ready svg {
  color:var(--c-success)
}
.pix-modal-paid.is-ready:hover {
  background:var(--c-surface-tint);
  border-color:var(--c-accent-deep);
  transform:translateY(-1px);
  box-shadow:0 4px 12px -4px #cc785c47
}
.pix-modal-paid.is-ready:active {
  transform:translateY(0)
}
@media (width<=360px) {
  .pix-modal-paid {
    gap:6px;
    padding:11px 12px;
    font-size:12.5px
  }
}
@media (width<=480px) {
  .pix-modal-card {
    max-height:calc(100dvh - max(env(safe-area-inset-top,0px), 14px) - max(env(safe-area-inset-bottom,0px), 14px));
    border-radius:18px;
    padding:22px 16px 16px
  }
  .pix-modal-eyebrow {
    font-size:10px
  }
  .pix-modal-title {
    margin-bottom:12px;
    padding-right:38px;
    font-size:19px
  }
  .pix-modal-amount-card {
    margin-bottom:14px;
    padding:12px 14px
  }
  .pix-modal-amount {
    margin-bottom:4px;
    font-size:32px
  }
  .pix-modal-amount-label {
    font-size:11px
  }
  .pix-modal-offer {
    font-size:11.5px
  }
  .pix-modal-cd {
    padding:2px 7px;
    font-size:12px
  }
  .pix-modal-qr {
    margin-bottom:10px;
    padding:10px
  }
  .pix-modal-qr img {
    width:180px;
    max-width:100%;
    height:180px
  }
  .pix-modal-qr-hint {
    margin-bottom:10px;
    font-size:11.5px
  }
  .pix-modal-copy {
    padding:13px 14px;
    font-size:13.5px
  }
  .pix-modal-instructions {
    font-size:11.5px
  }
  .pix-modal-close {
    width:36px;
    height:36px;
    font-size:16px
  }
  .pix-plan-card--basic {
    gap:7px;
    padding:11px 13px
  }
  .pix-plan-card--basic .pix-plan-card-name {
    font-size:13.5px
  }
  .pix-plan-card--basic .pix-plan-card-price {
    font-size:16px
  }
  .pix-plan-card--basic .pix-plan-card-list {
    gap:3px;
    font-size:11.5px
  }
  .pix-plan-card--featured {
    padding:18px 15px 14px
  }
  .pix-plan-card--featured .pix-plan-card-name {
    font-size:15.5px
  }
  .pix-plan-card--featured .pix-plan-card-price {
    font-size:20px
  }
  .pix-plan-card--featured .pix-plan-card-list {
    gap:4px;
    font-size:12.5px
  }
  .pix-plan-card--featured .pix-plan-card-arrow {
    display:none
  }
  .pix-plan-badge {
    padding:3px 8px;
    font-size:9px;
    top:-9px
  }
  .pix-plan-sub {
    margin:-4px 0 14px;
    font-size:12.5px
  }
  .pix-plan-list {
    gap:10px
  }
}
@media (width<=360px) {
  .pix-modal-card {
    padding:20px 13px 12px
  }
  .pix-modal-qr img {
    width:160px;
    height:160px
  }
  .pix-modal-amount {
    font-size:28px
  }
  .pix-plan-card--featured .pix-plan-card-name {
    font-size:14.5px
  }
  .pix-plan-card--featured .pix-plan-card-price {
    font-size:18px
  }
}
.pix-step-back {
  color:var(--c-text-muted);
  font-family:var(--c-font);
  cursor:pointer;
  letter-spacing:-.005em;
  background:0 0;
  border:none;
  align-self:flex-start;
  margin:0 0 10px;
  padding:4px 0;
  font-size:13px;
  font-weight:500;
  display:block
}
.pix-step-back:hover {
  color:var(--c-accent-deep)
}
.pix-modal-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.55
}
.pix-drop {
  background:var(--c-surface-alt);
  border:2px dashed var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  cursor:pointer;
  width:100%;
  min-width:0;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast);
  box-sizing:border-box;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  padding:26px 18px;
  display:flex;
  overflow:hidden
}
.pix-drop>* {
  min-width:0;
  max-width:100%
}
.pix-drop:hover {
  background:var(--c-surface-tint);
  border-color:var(--c-accent)
}
.pix-drop input[type=file] {
  display:none
}
.pix-drop svg {
  color:var(--c-accent);
  margin-bottom:4px
}
.pix-drop strong {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:-.01em;
  font-size:15px;
  font-weight:600
}
.pix-drop>span {
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  font-size:12.5px
}
.pix-drop.has-file {
  border-style:solid;
  border-color:var(--c-success);
  background:#1f8a5b0f
}
.pix-drop-preview {
  border-radius:var(--c-radius-md);
  object-fit:contain;
  background:var(--c-surface);
  max-width:220px;
  max-height:200px
}
.pix-drop-pdf {
  background:var(--c-surface);
  border-radius:var(--c-radius-md);
  width:100%;
  font-family:var(--c-font);
  color:var(--c-text);
  word-break:break-all;
  overflow-wrap:anywhere;
  text-align:left;
  box-sizing:border-box;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:16px 14px;
  font-size:13px;
  font-weight:500;
  display:flex
}
.pix-drop-pdf svg {
  color:var(--c-accent);
  flex:0 0 22px
}
.pix-drop-info {
  font-family:var(--c-font-mono);
  color:var(--c-text-muted);
  word-break:break-all;
  overflow-wrap:anywhere;
  text-align:center;
  max-width:100%;
  margin-top:4px;
  font-size:11.5px
}
.pix-drop-change {
  color:var(--c-accent-deep);
  font-family:var(--c-font);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:6px 10px;
  font-size:12.5px;
  font-weight:600;
  text-decoration:underline
}
.pix-modal-copy:disabled {
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none
}
.pix-modal-tip {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  text-align:center;
  letter-spacing:-.004em;
  margin:12px 0 0;
  font-size:12px
}
.pix-wa-link {
  border-radius:var(--c-radius-pill);
  color:var(--c-text-body);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), transform var(--c-t-fast);
  -webkit-tap-highlight-color:transparent;
  background:0 0;
  border:1px solid #25d366;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin:12px 0 0;
  padding:9px 16px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  display:inline-flex
}
.pix-wa-link-icon,
.pix-wa-link-arrow {
  flex:none
}
.pix-wa-link-icon {
  color:#25d366
}
.pix-wa-link-arrow {
  opacity:.45;
  transition:transform var(--c-t-fast), opacity var(--c-t-fast);
  margin-left:1px
}
.pix-wa-link:hover {
  background:#25d36614;
  border-color:#1fb055;
  transform:translateY(-1px)
}
.pix-wa-link:hover .pix-wa-link-arrow {
  opacity:1;
  transform:translate(2px)
}
.pix-wa-link:active {
  transform:translateY(0)
}
.pix-state {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:8px 0 4px;
  display:flex
}
.pix-state h3 {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  margin:0;
  font-size:20px;
  font-weight:600
}
.pix-state p {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  max-width:320px;
  margin:0;
  font-size:13.5px;
  line-height:1.55
}
.pix-state .pix-modal-copy {
  margin-top:6px
}
.pix-spinner {
  border:3px solid var(--c-primary-200);
  border-top-color:var(--c-accent);
  border-radius:50%;
  width:36px;
  height:36px;
  margin-bottom:4px;
  animation:.8s linear infinite pix-spin
}
@keyframes pix-spin {
  to {
    transform:rotate(360deg)
  }
}
.pix-state-icon {
  background:var(--c-success);
  width:64px;
  height:64px;
  color:var(--c-text-inverse);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  margin-bottom:4px;
  display:inline-flex;
  box-shadow:0 0 0 6px #1f8a5b2e
}
.pix-state-icon--review {
  background:var(--c-warning);
  box-shadow:0 0 0 6px #b86f1a2e
}
.pix-state-icon--rejected {
  background:var(--c-danger);
  box-shadow:0 0 0 6px #b83a3a2e
}
.pix-state-reasons {
  width:100%;
  margin:8px 0 0
}
.pix-state-reasons summary {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  cursor:pointer;
  text-align:center;
  font-size:12.5px;
  list-style:none
}
.pix-state-reasons summary::-webkit-details-marker {
  display:none
}
.pix-state-reasons ul,
.pix-state-reasons-list {
  background:var(--c-surface-tint);
  border-radius:var(--c-radius-md);
  max-width:320px;
  margin:8px auto 0;
  padding:10px 14px;
  list-style:none
}
.pix-state-reasons li,
.pix-state-reasons-list li {
  font-family:var(--c-font);
  color:var(--c-text-body);
  text-align:left;
  letter-spacing:-.005em;
  padding:2px 0;
  font-size:12.5px;
  line-height:1.55
}
.pix-state-reasons li:before,
.pix-state-reasons-list li:before {
  content:"• ";
  color:var(--c-accent-deep);
  margin-right:2px
}
.result-root {
  background:var(--c-gradient-hero);
  forced-color-adjust:none;
  min-height:80vh;
  padding:20px 0 48px;
  position:relative;
  overflow-x:hidden
}
.confetti {
  pointer-events:none;
  z-index:999;
  contain:strict;
  position:fixed;
  inset:0;
  overflow:hidden
}
.confetti-piece {
  opacity:.95;
  will-change:transform, opacity;
  --rot:0deg;
  --drift:0px;
  border-radius:2px;
  animation-name:confetti-fall;
  animation-timing-function:cubic-bezier(.16,.84,.44,1);
  animation-fill-mode:forwards;
  position:absolute;
  top:-24px
}
.confetti-piece.is-strip {
  transform-origin:50%;
  border-radius:1px
}
@keyframes confetti-fall {
  0% {
    opacity:1;
    transform:translateY(-10vh)rotate(0)
  }
  10% {
    opacity:1
  }
  to {
    transform:translate3d(var(--drift), 110vh, 0) rotate(var(--rot));
    opacity:0
  }
}
@media (prefers-reduced-motion:reduce) {
  .confetti {
    display:none
  }
}
.result-shell {
  max-width:540px;
  margin:0 auto;
  padding-left:14px;
  padding-right:14px
}
.result-order {
  font-family:var(--c-font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-success);
  margin-bottom:8px;
  font-size:10px;
  font-weight:500;
  display:inline-block
}
.result-headline {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  text-wrap:balance;
  overflow-wrap:anywhere;
  margin:0 0 16px;
  font-size:clamp(20px,5.5vw,28px);
  font-weight:600;
  line-height:1.18
}
.result-headline em {
  color:var(--c-accent-deep);
  font-style:italic;
  font-weight:600
}
.preview-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-sm);
  forced-color-adjust:none;
  margin-bottom:14px;
  padding:14px
}
.preview-card-top {
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  display:flex
}
.preview-card-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  font-size:10.5px;
  font-weight:500
}
.preview-card-pill {
  color:var(--c-success);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.004em;
  background:#1f8a5b1f;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  font-size:11.5px;
  font-weight:600;
  display:inline-flex
}
.preview-card-body {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:12px;
  display:flex
}
.preview-card-meta {
  flex-direction:column;
  align-items:center;
  width:100%;
  display:flex
}
.preview-card-meta .big-player {
  margin-top:4px
}
@media (width>=480px) {
  .preview-card-body {
    text-align:left;
    flex-direction:row;
    align-items:center;
    gap:16px
  }
  .preview-card-meta {
    align-items:flex-start
  }
}
.preview-card-meta {
  min-width:0
}
.preview-card-title {
  font-family:var(--c-font-display);
  letter-spacing:-.015em;
  color:var(--c-text);
  overflow-wrap:anywhere;
  margin-bottom:2px;
  font-size:17px;
  font-weight:600;
  display:block
}
.preview-card-sub {
  color:var(--c-text-muted);
  margin-bottom:12px;
  font-size:12.5px;
  display:block
}
.preview-card-error {
  color:var(--c-danger);
  margin:8px 0 0;
  font-size:13px
}
.locked-card {
  background:linear-gradient(160deg, var(--c-neutral-900) 0%, var(--c-primary-900) 100%);
  border:1px solid var(--c-primary-700);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-md);
  forced-color-adjust:none;
  padding:16px 14px;
  position:relative;
  overflow:hidden
}
.locked-card:before {
  content:"";
  pointer-events:none;
  background:radial-gradient(circle,#c962404d 0%,#0000 70%);
  width:240px;
  height:240px;
  position:absolute;
  inset:-40% -20% auto auto
}
.locked-card-top {
  z-index:1;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  display:flex;
  position:relative
}
.locked-card-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-primary-300);
  font-size:10.5px;
  font-weight:500
}
.locked-card-duration {
  font-family:var(--c-font-mono);
  color:var(--c-primary-100);
  letter-spacing:-.02em;
  font-size:18px;
  font-weight:700
}
.locked-card-body {
  z-index:1;
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
  display:flex;
  position:relative
}
.locked-card-meta {
  flex-direction:column;
  align-items:center;
  width:100%;
  display:flex
}
.locked-card-list {
  align-items:flex-start
}
@media (width>=480px) {
  .locked-card-body {
    text-align:left;
    flex-direction:row;
    align-items:flex-start;
    gap:16px
  }
  .locked-card-meta {
    align-items:flex-start
  }
}
.locked-card-meta {
  min-width:0
}
.locked-card-title {
  font-family:var(--c-font-display);
  letter-spacing:-.015em;
  color:var(--c-neutral-50);
  margin-bottom:6px;
  font-size:17px;
  font-weight:600;
  display:block
}
.locked-card-text {
  color:var(--c-neutral-200);
  letter-spacing:-.005em;
  margin:0 0 10px;
  font-size:13.5px;
  line-height:1.55
}
.locked-card-text strong {
  color:var(--c-primary-200)
}
.locked-card-list {
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
  display:flex
}
.locked-card-list li {
  color:var(--c-primary-200);
  letter-spacing:-.005em;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  line-height:1.4;
  display:flex
}
.locked-card-list li>span {
  width:18px;
  height:18px;
  color:var(--c-primary-200);
  font-size:11px;
  font-family:var(--c-font-mono);
  background:#d48f772e;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  display:inline-flex
}
.locked-card-cta {
  background:var(--c-gradient-cta);
  width:100%;
  color:var(--c-text-inverse);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.01em;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  z-index:1;
  transition:transform var(--c-t-fast), box-shadow var(--c-t-fast);
  border:none;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:16px 22px;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  display:inline-flex;
  position:relative;
  box-shadow:0 10px 26px #813a228c
}
.locked-card-cta strong {
  font-family:var(--c-font-mono);
  letter-spacing:-.01em;
  font-size:18px;
  font-weight:700
}
.locked-card-cta:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 14px 32px #813a22a6
}
.locked-card-cta:active:not(:disabled) {
  transform:translateY(0)
}
.locked-card-cta:disabled {
  opacity:.6;
  cursor:not-allowed
}
.locked-card-cta--pulse {
  isolation:isolate;
  animation:2.4s ease-in-out infinite cta-breath;
  overflow:hidden
}
.locked-card-cta--pulse:disabled {
  animation:none
}
.locked-card-cta--pulse:hover:not(:disabled) {
  animation-play-state:paused
}
.locked-card-cta-text {
  z-index:2;
  position:relative
}
.locked-card-cta-shine {
  pointer-events:none;
  z-index:1;
  background:linear-gradient(115deg,#fff0 30%,#ffffff73 50%,#fff0 70%);
  animation:3.6s ease-in-out infinite cta-shine;
  position:absolute;
  inset:0;
  transform:translate(-110%)
}
@keyframes cta-breath {
  0%,
  to {
    transform:translateY(0)scale(1);
    box-shadow:0 10px 26px #813a228c
  }
  50% {
    transform:translateY(-1px)scale(1.025);
    box-shadow:0 14px 36px #813a22b3
  }
}
@keyframes cta-shine {
  0% {
    transform:translate(-110%)
  }
  60% {
    transform:translate(110%)
  }
  to {
    transform:translate(110%)
  }
}
@media (prefers-reduced-motion:reduce) {
  .locked-card-cta--pulse {
    animation:none
  }
  .locked-card-cta-shine {
    opacity:0;
    animation:none
  }
}
.locked-card--just-scrolled {
  animation:2.2s ease-out locked-card-attention
}
@keyframes locked-card-attention {
  0% {
    box-shadow:0 0 #d48f7700
  }
  20% {
    box-shadow:0 0 0 8px #d48f778c,0 0 28px 4px #d48f7759
  }
  to {
    box-shadow:0 0 #d48f7700
  }
}
@media (width>=420px) {
  .locked-card-cta {
    padding:17px 24px;
    font-size:17px
  }
  .locked-card-cta strong {
    font-size:19px
  }
}
.locked-card-foot {
  text-align:center;
  color:var(--c-neutral-400);
  letter-spacing:-.004em;
  z-index:1;
  margin:10px 0 0;
  font-size:12px;
  position:relative
}
.locked-card-proof {
  border-radius:var(--c-radius-pill);
  color:#fffffff2;
  width:100%;
  font-family:var(--c-font);
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  z-index:1;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), transform var(--c-t-fast);
  -webkit-tap-highlight-color:transparent;
  background:#ffffff0d;
  border:1px solid #ffffff24;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin:12px 0 0;
  padding:10px 12px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  display:flex;
  position:relative
}
.locked-card-proof-icon {
  background:var(--c-success);
  color:#fff;
  border-radius:999px;
  flex:0 0 18px;
  justify-content:center;
  align-items:center;
  width:18px;
  height:18px;
  display:inline-flex
}
.locked-card-proof-icon svg {
  width:11px;
  height:11px
}
.locked-card-proof-text {
  text-overflow:ellipsis;
  flex:0 auto;
  min-width:0;
  overflow:hidden
}
.locked-card-proof-arrow {
  opacity:.6;
  transition:transform var(--c-t-fast), opacity var(--c-t-fast);
  flex:none;
  margin-left:-2px
}
.locked-card-proof:hover {
  background:#ffffff1a;
  border-color:#ffffff4d;
  transform:translateY(-1px)
}
.locked-card-proof:hover .locked-card-proof-arrow {
  opacity:1;
  transform:translate(2px)
}
.locked-card-proof:active {
  transform:translateY(0)
}
@media (width<=360px) {
  .locked-card-proof {
    gap:6px;
    padding:11px 12px;
    font-size:12.5px
  }
}
.bonus-card {
  background:var(--c-surface-tint);
  border:1.5px dashed var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  margin-top:14px;
  padding:18px 18px 16px;
  position:relative
}
.bonus-card-head {
  margin-bottom:14px
}
.bonus-card-eyebrow {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:.14em;
  text-transform:uppercase;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  font-size:10.5px;
  font-weight:700;
  display:inline-flex
}
.bonus-card-gift {
  transform-origin:50%;
  justify-content:center;
  align-items:center;
  width:18px;
  height:18px;
  font-size:13px;
  animation:1.6s ease-in-out infinite bonus-pop;
  display:inline-flex
}
@keyframes bonus-pop {
  0%,
  to {
    transform:rotate(-6deg)scale(1)
  }
  50% {
    transform:rotate(6deg)scale(1.12)
  }
}
.bonus-card-title {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:var(--c-ls-tight);
  font-size:15.5px;
  font-weight:600;
  line-height:1.35;
  display:block
}
.bonus-card-player {
  margin:0 0 12px
}
.bonus-card-download {
  border:1.5px solid var(--c-primary-300);
  border-radius:var(--c-radius-pill);
  color:var(--c-accent-deep);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), transform var(--c-t-fast);
  -webkit-tap-highlight-color:transparent;
  background:0 0;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex
}
.bonus-card-download:hover {
  border-color:var(--c-accent);
  background:#cc785c14;
  transform:translateY(-1px)
}
.bonus-card-download:active {
  transform:translateY(0)
}
@media (width<=360px) {
  .bonus-card {
    padding:16px 14px
  }
  .bonus-card-title {
    font-size:14.5px
  }
}
.new-song-cta {
  background:linear-gradient(135deg, var(--c-surface-tint) 0%, var(--c-surface) 100%);
  border:1px solid var(--c-primary-300);
  border-radius:var(--c-radius-lg);
  text-align:center;
  margin:18px 0 0;
  padding:22px 22px 24px;
  position:relative;
  overflow:hidden
}
.new-song-cta-bg {
  opacity:.08;
  pointer-events:none;
  font-size:90px;
  line-height:1;
  position:absolute;
  top:-20px;
  right:-15px;
  transform:rotate(-12deg)
}
.new-song-cta-content {
  z-index:1;
  position:relative
}
.new-song-cta-eyebrow {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:6px;
  font-size:10.5px;
  font-weight:700;
  display:block
}
.new-song-cta-title {
  font-family:var(--c-font-display);
  color:var(--c-text);
  letter-spacing:var(--c-ls-tight);
  margin:0 0 6px;
  font-size:18px;
  font-weight:600;
  line-height:1.25
}
.new-song-cta-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin:0 0 14px;
  font-size:13px
}
.new-song-cta-btn {
  background:var(--c-accent);
  color:#fff;
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background-color var(--c-t-fast), transform var(--c-t-fast), box-shadow var(--c-t-fast);
  border:none;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  font-size:13.5px;
  font-weight:600;
  display:inline-flex
}
.new-song-cta-btn:hover {
  background:var(--c-accent-deep);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -6px #cc785c73
}
.new-song-cta-btn:active {
  transform:translateY(0)
}
@media (width<=360px) {
  .new-song-cta {
    padding:18px 16px 20px
  }
  .new-song-cta-title {
    font-size:16.5px
  }
}
.locked-card.is-unlocked {
  background:linear-gradient(160deg, var(--c-neutral-900) 0%, #1a3b2c 100%);
  border-color:var(--c-success);
  box-shadow:0 0 0 3px #1f8a5b2e, var(--c-shadow-md);
  padding:18px 16px
}
.locked-card.is-unlocked:before {
  background:radial-gradient(circle,#1f8a5b47 0%,#0000 70%)
}
.locked-card.is-unlocked .locked-card-top {
  justify-content:center;
  margin-bottom:6px
}
.locked-card.is-unlocked .locked-card-eyebrow {
  color:#a7f3d0f2;
  align-items:center;
  gap:6px;
  display:inline-flex
}
.locked-card.is-unlocked .locked-card-eyebrow:before {
  content:"✓";
  background:var(--c-success);
  width:14px;
  height:14px;
  color:var(--c-text-inverse);
  font-size:9px;
  font-weight:800;
  font-family:var(--c-font);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  display:inline-flex
}
.locked-card.is-unlocked .locked-card-title {
  color:var(--c-neutral-50);
  letter-spacing:-.02em;
  font-size:22px
}
.unlocked-headline {
  text-align:center;
  z-index:1;
  margin-bottom:14px;
  position:relative
}
.locked-card-success {
  color:#dcfce7d9;
  letter-spacing:-.005em;
  max-width:280px;
  margin:4px auto 0;
  font-size:13.5px;
  line-height:1.55
}
.unlocked-downloads {
  z-index:1;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  display:grid;
  position:relative
}
.unlocked-btn {
  background:linear-gradient(135deg, #16a34a 0%, var(--c-success) 100%);
  color:var(--c-text-inverse);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  transition:transform var(--c-t-fast), box-shadow var(--c-t-fast);
  white-space:nowrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:12px 10px;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  box-shadow:0 6px 18px #1f8a5b66
}
.unlocked-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 24px #1f8a5b8c
}
.unlocked-btn svg {
  flex-shrink:0
}
@media (width>=480px) {
  .unlocked-btn {
    padding:13px 14px;
    font-size:14px
  }
}
.unlocked-btn.unlocked-btn-producing {
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
  background:linear-gradient(135deg,#d88670 0%,#cc785c 100%);
  box-shadow:0 6px 18px #cc785c59
}
.unlocked-btn.unlocked-btn-producing:hover {
  transform:none;
  box-shadow:0 6px 18px #cc785c59
}
.share-btn.share-btn-producing {
  color:#cc785c;
  border-radius:var(--c-radius-pill,999px);
  width:100%;
  font-family:var(--c-font);
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
  background:#cc785c14;
  border:1px dashed #cc785c80;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:12px 16px;
  font-size:13.5px;
  font-weight:600;
  display:inline-flex
}
.unlocked-producing-spinner {
  border:2px solid #fff6;
  border-top-color:#fff;
  border-radius:50%;
  flex-shrink:0;
  width:16px;
  height:16px;
  animation:.9s linear infinite unlocked-spin;
  display:inline-block
}
.share-btn-producing .unlocked-producing-spinner {
  border:2px solid #cc785c40;
  border-top-color:#cc785c
}
@keyframes unlocked-spin {
  to {
    transform:rotate(360deg)
  }
}
@media (prefers-reduced-motion:reduce) {
  .unlocked-producing-spinner {
    animation:none
  }
}
.unlocked-share {
  width:100%;
  color:var(--c-neutral-50);
  border-radius:var(--c-radius-pill);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  cursor:pointer;
  z-index:1;
  transition:background-color var(--c-t-fast), border-color var(--c-t-fast), transform var(--c-t-fast);
  background:0 0;
  border:1.5px solid #1f8a5b8c;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:12px 16px;
  font-size:13.5px;
  font-weight:600;
  display:inline-flex;
  position:relative
}
.unlocked-share:hover:not(:disabled) {
  border-color:var(--c-success);
  background:#1f8a5b26;
  transform:translateY(-1px)
}
.unlocked-share:active:not(:disabled) {
  transform:translateY(0)
}
.unlocked-share:disabled {
  opacity:.7;
  cursor:progress
}
.unlocked-share svg {
  color:#a7f3d0f2;
  flex-shrink:0
}
.unlocked-share--secondary {
  color:#e8fcf0d9;
  border-color:#1f8a5b59
}
.unlocked-share--ghost {
  border-color:var(--c-border);
  color:var(--c-accent-deep);
  background:0 0;
  margin-top:6px;
  padding:11px 14px;
  font-size:13px
}
.unlocked-share--ghost svg {
  color:var(--c-accent)
}
.unlocked-share--ghost:hover:not(:disabled) {
  background:var(--c-primary-100);
  border-color:var(--c-accent)
}
.unlocked-share--whatsapp {
  color:#fff;
  background:#25d366;
  border-color:#25d366;
  margin-top:6px;
  padding:12px 16px;
  font-size:13.5px;
  font-weight:700;
  box-shadow:0 2px 8px #25d36647
}
.unlocked-share--whatsapp svg {
  color:#fff
}
.unlocked-share--whatsapp:hover:not(:disabled) {
  background:#1ebe5a;
  border-color:#1ebe5a;
  transform:translateY(-1px)
}
.unlocked-shares {
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  display:flex
}
.unlocked-shares .unlocked-share {
  margin-top:0
}
.bonus-card-actions {
  flex-direction:column;
  gap:8px;
  margin-top:12px;
  display:flex
}
.bonus-card-actions .bonus-card-download,
.bonus-card-actions .unlocked-share {
  width:100%;
  margin:0
}
.result-proof {
  margin-top:26px
}
.result-proof-head {
  text-align:center;
  margin-bottom:16px
}
.result-proof-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  margin-bottom:6px;
  font-size:10.5px;
  font-weight:500;
  display:inline-block
}
.result-proof-title {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  margin:0;
  font-size:clamp(18px,4.8vw,22px);
  font-weight:600;
  line-height:1.2
}
.result-proof-list {
  flex-direction:column;
  gap:10px;
  display:flex
}
.testimonial-row {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-xs);
  forced-color-adjust:none;
  padding:12px 14px
}
.testimonial-head {
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  display:flex
}
.testimonial-title {
  font-family:var(--c-font-display);
  letter-spacing:-.01em;
  color:var(--c-text);
  overflow-wrap:anywhere;
  font-size:15px;
  font-weight:600
}
.testimonial-duration {
  font-family:var(--c-font-mono);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  flex-shrink:0;
  font-size:11.5px
}
.testimonial-author {
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  margin-top:2px;
  font-size:12px
}
.testimonial-author strong {
  color:var(--c-accent-deep);
  font-weight:600
}
.testimonial-quote {
  font-family:var(--c-font);
  color:var(--c-text-body);
  letter-spacing:-.005em;
  margin:8px 0;
  font-size:13px;
  font-style:italic;
  line-height:1.55
}
.testimonial-row .mini-player {
  margin-top:8px
}
.testimonial-row .mini-player-btn {
  width:32px;
  height:32px;
  box-shadow:0 3px 8px #ab4b2b40
}
.testimonial-row .mini-player-bar {
  height:4px
}
.testimonial-row .mini-player-time {
  font-size:11px
}
.result-final {
  text-align:center;
  margin-top:26px;
  padding:20px 8px 4px
}
.result-final-spark {
  color:var(--c-accent);
  margin-bottom:8px;
  font-size:22px;
  display:inline-block
}
.result-final-title {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  text-wrap:balance;
  overflow-wrap:anywhere;
  margin:0 0 8px;
  font-size:clamp(18px,5vw,22px);
  font-weight:600;
  line-height:1.3
}
.result-final-title em {
  color:var(--c-accent-deep);
  background:var(--c-surface-tint);
  border-radius:var(--c-radius-sm);
  letter-spacing:.02em;
  padding:1px 8px;
  font-style:normal;
  font-weight:700
}
.result-final-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  letter-spacing:-.005em;
  max-width:380px;
  margin:0 auto;
  font-size:13.5px;
  line-height:1.55
}
.big-player {
  width:100%
}
.big-player-label {
  font-family:var(--c-font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  margin-bottom:8px;
  font-size:10px;
  font-weight:500;
  display:block
}
.big-player-row {
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  display:flex
}
.big-player-btn {
  background:var(--c-gradient-cta);
  width:44px;
  height:44px;
  color:var(--c-text-inverse);
  cursor:pointer;
  transition:transform var(--c-t-fast);
  border:none;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  display:inline-flex;
  box-shadow:0 6px 14px #ab4b2b59
}
.big-player-btn:hover {
  transform:scale(1.05)
}
.big-player-btn:active {
  transform:scale(.96)
}
.big-player-btn svg {
  transform:translate(.5px)
}
.big-player-bar {
  background:var(--c-primary-200);
  border-radius:var(--c-radius-pill);
  cursor:pointer;
  flex:auto;
  height:6px;
  overflow:hidden
}
.big-player-fill {
  background:var(--c-gradient-cta);
  border-radius:var(--c-radius-pill);
  height:100%;
  transition:width .12s linear
}
.big-player-meta {
  font-family:var(--c-font-mono);
  color:var(--c-text-muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  justify-content:space-between;
  font-size:11px;
  display:flex
}
@media (width>=600px) {
  .result-shell {
    max-width:600px
  }
  .preview-card,
  .locked-card {
    padding:24px
  }
  .locked-card-cta {
    padding:18px 20px;
    font-size:16px
  }
}
.gen-root {
  background:var(--c-gradient-hero);
  forced-color-adjust:none;
  min-height:78vh;
  padding:24px 0 56px;
  overflow-x:hidden
}
.gen-lyrics,
.gen-card,
.gen-example-card,
.mini-player-btn,
.mini-player-fill {
  forced-color-adjust:none
}
.gen-container {
  width:100%;
  max-width:540px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px
}
.gen-header {
  text-align:center;
  margin-bottom:18px
}
.gen-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  margin-bottom:8px;
  font-size:10.5px;
  font-weight:500;
  display:inline-block
}
.gen-title {
  font-family:var(--c-font-display);
  letter-spacing:var(--c-ls-tight);
  color:var(--c-text);
  overflow-wrap:anywhere;
  text-wrap:balance;
  max-width:100%;
  margin:0;
  font-size:clamp(20px,5.5vw,24px);
  font-weight:600;
  line-height:1.15
}
.gen-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-sm);
  padding:16px;
  overflow:hidden
}
.gen-card-top {
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin-bottom:8px;
  display:flex
}
.gen-eta-label {
  font-family:var(--c-font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  font-size:10px;
  font-weight:500
}
.gen-eta {
  font-family:var(--c-font-mono);
  color:var(--c-accent-deep);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  font-size:clamp(22px,6.5vw,26px);
  font-weight:700
}
.gen-eta-label {
  flex-shrink:1;
  min-width:0
}
.gen-wave {
  justify-content:center;
  align-items:center;
  gap:4px;
  height:56px;
  margin-bottom:12px;
  padding:6px 0;
  display:flex
}
.gen-wave-bar {
  background:var(--c-accent);
  transform-origin:50%;
  border-radius:2px;
  width:4px;
  height:14px;
  animation:1.1s ease-in-out infinite gen-wave;
  display:block
}
.gen-wave-bar:nth-child(odd) {
  background:var(--c-primary-600)
}
.gen-wave-bar:nth-child(3n) {
  background:var(--c-primary-400)
}
@keyframes gen-wave {
  0%,
  to {
    opacity:.5;
    transform:scaleY(.4)
  }
  50% {
    opacity:1;
    transform:scaleY(1.9)
  }
}
.gen-progress {
  background:var(--c-surface-alt);
  border-radius:var(--c-radius-pill);
  width:100%;
  height:8px;
  margin-bottom:12px;
  position:relative;
  overflow:visible
}
.gen-progress-fill {
  background:var(--c-gradient-cta);
  border-radius:var(--c-radius-pill);
  height:100%;
  transition:width .4s var(--c-ease);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 12px #c9624073
}
.gen-progress-shimmer {
  pointer-events:none;
  background:linear-gradient(100deg,#0000 0%,#fff0 30%,#ffffff8c 50%,#fff0 70%,#0000 100%) 0 0/220% 100%;
  animation:1.6s linear infinite gen-shimmer;
  position:absolute;
  inset:0
}
@keyframes gen-shimmer {
  0% {
    background-position:220% 0
  }
  to {
    background-position:-120% 0
  }
}
.gen-progress-tip {
  background:var(--c-primary-50);
  width:12px;
  height:12px;
  box-shadow:0 0 0 2px var(--c-accent), 0 0 14px 2px #c96240bf;
  pointer-events:none;
  border-radius:50%;
  animation:1.2s ease-in-out infinite gen-tip-pulse;
  position:absolute;
  top:50%;
  right:-2px;
  transform:translateY(-50%)
}
@keyframes gen-tip-pulse {
  0%,
  to {
    opacity:1;
    transform:translateY(-50%)scale(1)
  }
  50% {
    opacity:.85;
    transform:translateY(-50%)scale(1.25)
  }
}
.gen-status {
  font-family:var(--c-font);
  color:var(--c-text-body);
  text-align:center;
  letter-spacing:-.005em;
  margin:0;
  font-size:13.5px;
  line-height:1.5
}
.gen-card-sep {
  border-top:1px dashed var(--c-primary-200);
  margin:16px -16px 14px
}
@media (width>=600px) {
  .gen-card-sep {
    margin:18px -24px 16px
  }
}
.gen-lyrics--embedded {
  box-shadow:none;
  background:0 0;
  border:none;
  margin:0;
  padding:0
}
.gen-lyrics--embedded .gen-lyrics-head {
  border-bottom:1px dashed var(--c-primary-200);
  padding-bottom:10px
}
.gen-lyrics--embedded .gen-lyrics-body {
  height:110px
}
.gen-lyrics {
  background:var(--c-surface);
  border-radius:var(--c-radius-lg);
  border:1px solid var(--c-primary-200);
  box-shadow:var(--c-shadow-sm);
  margin-top:14px;
  padding:14px 16px
}
.gen-lyrics-head {
  border-bottom:1px dashed var(--c-primary-200);
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding-bottom:10px;
  display:flex
}
.gen-lyrics-eyebrow {
  font-family:var(--c-font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-accent-deep);
  font-size:10.5px;
  font-weight:500
}
.gen-lyrics-pulse {
  background:var(--c-accent);
  border-radius:var(--c-radius-pill);
  width:28px;
  height:5px;
  animation:1.4s ease-in-out infinite gen-lyrics-pulse
}
@keyframes gen-lyrics-pulse {
  0%,
  to {
    opacity:.35;
    transform:scaleX(.5)
  }
  50% {
    opacity:1;
    transform:scaleX(1)
  }
}
.gen-lyrics-body {
  scrollbar-width:none;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  height:124px;
  display:flex;
  position:relative;
  overflow-y:auto;
  -webkit-mask-image:linear-gradient(#0000 0,#000 28px);
  mask-image:linear-gradient(#0000 0,#000 28px)
}
.gen-lyrics-body::-webkit-scrollbar {
  width:0;
  height:0
}
.gen-lyrics-line {
  font-family:var(--c-font-mono);
  color:var(--c-text);
  letter-spacing:-.004em;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  flex-shrink:0;
  margin:0;
  font-size:12.5px;
  line-height:1.55
}
.gen-lyrics-line--placeholder {
  color:var(--c-text-muted);
  font-style:italic
}
.gen-lyrics-line--done {
  color:var(--c-text-muted);
  opacity:.7;
  animation:gen-line-up .32s var(--c-ease-out)
}
.gen-lyrics-line--current {
  color:var(--c-accent-deep);
  font-weight:500
}
.gen-lyrics-cursor {
  color:var(--c-accent);
  margin-left:2px;
  font-size:11px;
  animation:.85s steps(2,end) infinite gen-blink;
  display:inline-block;
  transform:translateY(-1px)
}
@keyframes gen-blink {
  0%,
  50% {
    opacity:1
  }
  51%,
  to {
    opacity:0
  }
}
@keyframes gen-line-up {
  0% {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:.85;
    transform:none
  }
}
.gen-examples {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow-sm);
  margin-top:16px;
  padding:14px
}
.gen-examples-eyebrow {
  font-family:var(--c-font-display);
  letter-spacing:-.01em;
  color:var(--c-text);
  text-align:center;
  margin-bottom:4px;
  font-size:15px;
  font-weight:600;
  display:block
}
.gen-examples-sub {
  font-family:var(--c-font);
  color:var(--c-text-muted);
  text-align:center;
  letter-spacing:-.005em;
  margin:0 0 12px;
  font-size:12.5px
}
.gen-example-card {
  border-radius:var(--c-radius-md);
  background:var(--c-surface-tint);
  border:1px solid var(--c-primary-200);
  animation:gen-fade-in .4s var(--c-ease-out);
  grid-template-rows:auto auto;
  grid-template-columns:44px 1fr;
  gap:8px 12px;
  padding:12px;
  display:grid
}
@keyframes gen-fade-in {
  0% {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.gen-example-art {
  grid-row:1/3;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  display:inline-flex
}
.vinyl-disc {
  border-radius:50%;
  display:inline-block;
  position:relative
}
.vinyl-disc.is-spinning svg {
  animation:4.4s linear infinite vinyl-spin
}
@keyframes vinyl-spin {
  to {
    transform:rotate(360deg)
  }
}
.vinyl-lock {
  color:var(--c-primary-100);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background:#00000080;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  display:flex;
  position:absolute;
  inset:0
}
.vinyl-lock svg {
  filter:drop-shadow(0 2px 6px #00000073)
}
.gen-example-meta {
  flex-direction:column;
  min-width:0;
  display:flex
}
.gen-example-title {
  font-family:var(--c-font);
  color:var(--c-text);
  letter-spacing:-.005em;
  font-size:14px;
  font-weight:600
}
.gen-example-sub {
  color:var(--c-text-muted);
  letter-spacing:-.004em;
  font-size:12px
}
.mini-player {
  grid-column:1/-1;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:4px;
  display:flex
}
.mini-player-btn {
  background:var(--c-gradient-cta);
  width:38px;
  height:38px;
  color:var(--c-text-inverse);
  cursor:pointer;
  transition:transform var(--c-t-fast);
  border:none;
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  display:inline-flex;
  box-shadow:0 4px 10px #ab4b2b4d
}
.mini-player-btn:hover {
  transform:scale(1.05)
}
.mini-player-btn:active {
  transform:scale(.96)
}
.mini-player-btn svg {
  transform:translate(.5px)
}
.mini-player-bar {
  background:var(--c-primary-200);
  border-radius:var(--c-radius-pill);
  cursor:pointer;
  flex:auto;
  height:5px;
  position:relative;
  overflow:hidden
}
.mini-player-fill {
  background:var(--c-gradient-cta);
  border-radius:var(--c-radius-pill);
  height:100%;
  transition:width .12s linear
}
.mini-player-time {
  font-family:var(--c-font-mono);
  color:var(--c-text-muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
  flex-shrink:0;
  font-size:11.5px
}
.gen-examples-dots {
  justify-content:center;
  gap:6px;
  margin-top:10px;
  display:flex
}
.gen-example-dot {
  background:var(--c-border);
  cursor:pointer;
  width:7px;
  height:7px;
  transition:background-color var(--c-t-fast), width var(--c-t-fast);
  border:none;
  border-radius:50%;
  padding:0
}
.gen-example-dot:hover {
  background:var(--c-primary-300)
}
.gen-example-dot.active {
  background:var(--c-accent);
  border-radius:var(--c-radius-pill);
  width:18px
}
@media (width>=600px) {
  .gen-root {
    padding:32px 0 64px
  }
  .gen-container {
    max-width:600px
  }
  .gen-title {
    font-size:30px
  }
  .gen-card {
    border-radius:var(--c-radius-xl);
    padding:22px 24px
  }
  .gen-eta {
    font-size:32px
  }
  .gen-wave {
    gap:5px;
    height:72px
  }
  .gen-wave-bar {
    width:5px
  }
  .gen-lyrics {
    border-radius:var(--c-radius-xl);
    padding:18px 22px
  }
  .gen-lyrics-body {
    height:200px;
    font-size:13px
  }
  .gen-lyrics-line {
    font-size:13.5px
  }
  .gen-examples {
    padding:18px 22px
  }
}
@media (width<=600px) {
  .benefit-card,
  .how-card {
    border-radius:var(--c-radius-lg);
    padding:22px 20px
  }
  .bento-card {
    border-radius:var(--c-radius-lg);
    gap:12px;
    padding:22px 20px
  }
  .plan-card,
  .pricing-card {
    border-radius:var(--c-radius-lg);
    padding:24px 20px
  }
  .testimonial-card {
    border-radius:var(--c-radius-lg);
    padding:20px 18px
  }
  .benefit-title,
  .how-title,
  .bento-title,
  .plan-name {
    font-size:17px
  }
  .benefit-text,
  .how-text,
  .bento-text {
    font-size:13.5px;
    line-height:1.6
  }
  .testimonial-quote {
    font-size:13.5px
  }
  .benefit-icon {
    border-radius:var(--c-radius-md);
    width:46px;
    height:46px;
    font-size:22px
  }
  .benefits,
  .examples,
  .pricing,
  .howitworks,
  .preview-showcase,
  .features-bento,
  .plans,
  .faq,
  .testimonials {
    padding:56px 0
  }
  .section-header {
    margin-bottom:32px
  }
  .section-title {
    font-size:clamp(22px,6vw,28px)
  }
  .section-subtitle {
    font-size:14.5px
  }
}
.hero-eyebrow {
  border-radius:var(--c-radius-pill);
  background:var(--c-surface-tint);
  border:1px solid var(--c-primary-200);
  color:var(--c-accent-deep);
  font-family:var(--c-font);
  letter-spacing:-.004em;
  box-shadow:var(--c-shadow-xs);
  align-items:center;
  gap:6px;
  margin-bottom:16px;
  padding:6px 14px;
  font-size:12.5px;
  font-weight:500;
  display:inline-flex
}
.hero-eyebrow svg {
  color:var(--c-accent)
}
.hero-title {
  font-family:var(--c-font-display);
  letter-spacing:-.025em;
  color:var(--c-text);
  text-wrap:balance;
  overflow-wrap:break-word;
  max-width:100%;
  margin-bottom:14px;
  font-size:clamp(26px,6.8vw,56px);
  font-weight:600;
  line-height:1.08
}
.hero-title .gradient-text {
  background:var(--c-gradient-title);
  -webkit-text-fill-color:transparent;
  overflow-wrap:break-word;
  word-break:break-word;
  -webkit-background-clip:text;
  background-clip:text;
  margin-right:-.05em;
  padding-right:.18em;
  font-style:italic;
  display:inline-block
}
.hero-subtitle {
  font-family:var(--c-font);
  font-size:clamp(15px,4vw,18px);
  line-height:var(--c-lh-loose);
  letter-spacing:-.005em;
  color:var(--c-text-body);
  max-width:540px;
  margin-bottom:24px
}
.hero-subtitle strong {
  color:var(--c-accent-deep);
  font-weight:600
}
.hero-risk-reversal {
  font-family:var(--c-font);
  font-size:13.5px;
  line-height:var(--c-lh-normal);
  letter-spacing:-.005em;
  color:var(--c-text-muted);
  align-items:flex-start;
  gap:8px;
  max-width:540px;
  margin-top:14px;
  display:flex
}
.hero-risk-reversal svg {
  color:var(--c-success);
  flex-shrink:0;
  margin-top:3px
}
.hero-risk-reversal strong {
  color:var(--c-accent-deep);
  font-weight:600;
  font-family:var(--c-font-mono);
  white-space:nowrap
}
@media (width<=1023px) {
  .heart {
    display:none
  }
}
@media (width>=1024px) {
  .heart-1 {
    top:8%;
    right:50%
  }
  .heart-2 {
    font-size:32px;
    top:14%;
    right:-2%
  }
  .heart-3 {
    font-size:18px;
    bottom:8%;
    right:45%
  }
}
.hero-typewriter {
  font-family:var(--c-font);
  letter-spacing:-.01em;
  color:var(--c-text-body);
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-height:1.6em;
  margin:6px 0 22px;
  font-size:clamp(15px,4vw,19px);
  font-weight:500;
  line-height:1.55;
  display:inline-flex
}
.hero-typewriter-prefix {
  color:var(--c-text-muted);
  font-weight:400
}
.hero-typewriter-text {
  color:var(--c-accent-deep);
  letter-spacing:-.015em;
  font-style:italic;
  font-weight:600
}
.hero-typewriter-cursor {
  width:2px;
  color:var(--c-accent);
  margin-left:-2px;
  font-weight:400;
  animation:1s steps(2,end) infinite hero-typewriter-blink;
  display:inline-block;
  transform:translateY(1px)
}
@keyframes hero-typewriter-blink {
  0%,
  50% {
    opacity:1
  }
  51%,
  to {
    opacity:0
  }
}
.hero-typewriter-emoji {
  opacity:0;
  transition:opacity .22s var(--c-ease-spring), transform .28s var(--c-ease-spring);
  font-size:1.1em;
  display:inline-block;
  transform:translateY(4px)scale(.7)
}
.hero-typewriter-emoji.is-shown {
  opacity:1;
  transform:translateY(0)scale(1)
}
.quiz-resume-banner {
  background:var(--c-surface-tint);
  border:1px solid var(--c-primary-200);
  border-radius:var(--c-radius-md);
  font-family:var(--c-font);
  color:var(--c-accent-deep);
  letter-spacing:-.005em;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 26px;
  padding:12px 14px;
  font-size:13.5px;
  display:flex
}
.quiz-resume-actions {
  gap:8px;
  display:inline-flex
}
.quiz-resume-keep,
.quiz-resume-discard {
  font-family:var(--c-font);
  border-radius:var(--c-radius-pill);
  cursor:pointer;
  transition:transform var(--c-t-fast), background-color var(--c-t-fast);
  padding:7px 14px;
  font-size:12.5px;
  font-weight:500
}
.quiz-resume-keep {
  background:var(--c-accent);
  color:var(--c-text-inverse);
  border:1px solid var(--c-accent-deep)
}
.quiz-resume-keep:hover {
  background:var(--c-accent-deep);
  transform:translateY(-1px)
}
.quiz-resume-discard {
  color:var(--c-text-muted);
  border:1px solid var(--c-border);
  background:0 0
}
.quiz-resume-discard:hover {
  color:var(--c-accent-deep);
  border-color:var(--c-primary-300)
}
.quiz-review {
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  display:flex
}
.quiz-review-row {
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  border-radius:var(--c-radius-md);
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  display:flex
}
.quiz-review-row>div {
  flex-direction:column;
  flex:auto;
  gap:4px;
  min-width:0;
  display:flex
}
.quiz-review-label {
  font-family:var(--c-font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  font-size:10.5px;
  font-weight:500
}
.quiz-review-value {
  font-family:var(--c-font);
  letter-spacing:-.005em;
  color:var(--c-text);
  word-wrap:break-word;
  overflow-wrap:anywhere;
  font-size:14.5px;
  font-weight:500
}
.quiz-review-edit {
  font-family:var(--c-font);
  color:var(--c-accent-deep);
  border:1px solid var(--c-primary-200);
  border-radius:var(--c-radius-pill);
  cursor:pointer;
  transition:background-color var(--c-t-fast);
  background:0 0;
  flex-shrink:0;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:500
}
.quiz-review-edit:hover {
  background:var(--c-surface-tint)
}
.quiz-rel-card:focus-visible,
.quiz-num:focus-visible,
.genre-card:focus-visible,
.voice-card:focus-visible,
.pill:focus-visible {
  outline:2px solid var(--c-accent);
  outline-offset:3px
}
.quiz-rel-more:focus-visible,
.quiz-chat-link:focus-visible,
.quiz-skip:focus-visible,
.quiz-back:focus-visible,
.quiz-resume-keep:focus-visible,
.quiz-resume-discard:focus-visible,
.quiz-review-edit:focus-visible {
  outline:2px solid var(--c-accent);
  outline-offset:2px
}
.quiz-open-hint {
  border-radius:var(--c-radius-md);
  font-family:var(--c-font);
  letter-spacing:-.005em;
  font-size:13.5px;
  font-weight:500;
  line-height:var(--c-lh-normal);
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:10px 14px;
  display:flex
}
.quiz-open-hint[data-severity=danger] {
  color:var(--c-danger);
  background:#b83a3a1a;
  border:1px solid #b83a3a4d
}
.quiz-open-hint[data-severity=warning] {
  background:var(--c-surface-tint);
  color:var(--c-accent-deep);
  border:1px solid var(--c-primary-200)
}
@media (width<=600px) {
  .quiz-foot {
    gap:4px;
    padding:12px 18px 16px
  }
  .quiz-nav {
    gap:10px
  }
  .quiz-nav .btn-primary {
    border-radius:var(--c-radius-md);
    padding:13px 0;
    font-size:15px
  }
  .quiz-back {
    padding:10px 4px;
    font-size:13px
  }
  .quiz-review-row {
    gap:10px;
    padding:12px 14px
  }
  .quiz-review-edit {
    padding:6px 11px;
    font-size:12.5px
  }
  .quiz-review-value {
    font-size:13.5px
  }
  .quiz-screen {
    padding:18px 20px 22px
  }
  .quiz-top {
    padding:14px 20px 12px
  }
}
.floating-wa-btn {
  color:#fff;
  z-index:80;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:56px;
  height:56px;
  text-decoration:none;
  transition:transform .18s,box-shadow .2s;
  display:flex;
  position:fixed;
  bottom:20px;
  right:20px;
  box-shadow:0 8px 24px #25d36666
}
.floating-wa-btn:hover {
  transform:translateY(-2px)scale(1.05);
  box-shadow:0 12px 28px #25d36680
}
.floating-wa-btn:active {
  transform:scale(.96)
}
@media (width<=480px) {
  .floating-wa-btn {
    width:50px;
    height:50px;
    bottom:16px;
    right:16px
  }
}