/* Vocal Chops Prelude 2 landing page (/vocal-chops/landing.js): the plug-in's purple, orange and mustard panel on a red organic collage */
.vcl {
  --purple: #4c4d88; --navy: #272744; --orange: #e37829; --mustard: #c8ab30; --cream: #fefaf0; --sage: #a4c0ac; --paper: #f3ead8;
  --ink: #16152a;
  --display: "VC Compadre", "Arlo Sans", sans-serif; --body: "Arlo Sans", Arial, sans-serif; --pad: 25px;
  color: var(--ink); background: var(--paper); overflow-x: clip;
}
.vcl *, .vcl *::before, .vcl *::after { box-sizing: border-box; }

/* buttons: pills with an ink outline and offset shadow, like the plug-in's switch */
.vcl-btn {
  display: inline-block; white-space: nowrap; text-align: center; padding: .95rem 1.8rem .85rem; border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--display); font-size: 1rem; letter-spacing: .04em; text-decoration: none; color: var(--ink); cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease;
}
.vcl-btn:focus { outline: none; }
.vcl-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.vcl-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--ink); }
.vcl-btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.vcl-btn--trial { background: var(--mustard); }
.vcl-btn--buy { background: var(--cream); }
.vcl-btn--small { padding: .7rem 1.2rem .6rem; font-size: .85rem; box-shadow: 2px 3px 0 var(--ink); }
.vcl-kicker { display: block; margin-bottom: .7rem; font-family: var(--display); font-size: .8rem; letter-spacing: .16em; color: var(--orange); }

/* ------------------------------------------------------------------ hero: the collage */
.vcl-hero { position: relative; min-height: 100vh; padding: 120px var(--pad) 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #2a0d10; }
.vcl-collage {
  position: absolute; inset: -6%; background: url(/vc2/collage.webp) center / cover no-repeat; will-change: transform;
}
.vcl-collage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 35% 50%, rgba(22, 21, 42, 0) 30%, rgba(22, 21, 42, .45) 100%); }
.vcl-hero__inner { position: relative; width: min(1240px, 100%); display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 2.6rem; }
.vcl-rig { position: relative; z-index: 2; transform: rotate(-1.2deg); }
.vcl-rack { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }

.vcl-playme {
  --size: 118px; position: absolute; top: -40px; right: -34px; z-index: 6; width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; background: var(--mustard); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(10deg); pointer-events: none;
}
.vcl-playme svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: vcl-spin 14s linear infinite; }
.vcl-playme text { font-family: var(--display); font-size: 10.5px; letter-spacing: 2px; fill: var(--ink); }
.vcl-playme b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: .95; text-align: center; }
@keyframes vcl-spin { to { transform: rotate(360deg); } }
/* "Royalty free" chip at the end of the info card; it jumps to the section that explains it */
.vcl-rfchip {
  display: inline-block; margin-top: 1.1rem; padding: .38rem .85rem .32rem; border: 1.5px solid var(--ink); border-radius: 99px;
  background: var(--sage); color: var(--ink); font-family: var(--display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: transform .15s ease;
}
.vcl-rfchip:hover { transform: translateY(-1px); }
.vcl-rfchip:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* the info card, built like the plug-in's panel: purple, orange dotted frame, sage rim, ink outline */
.vcl-label {
  position: relative; z-index: 3; padding: 2.2rem 2.1rem 2rem; color: var(--cream); border: 11px solid transparent; border-radius: 10px;
  background:
    linear-gradient(var(--purple), var(--purple)) padding-box,
    radial-gradient(circle, rgba(254, 250, 240, .32) 0 1px, transparent 1.4px) 0 0 / 6px 6px border-box,
    linear-gradient(var(--orange), var(--orange)) border-box;
  box-shadow: inset 0 0 0 3px var(--sage), 0 0 0 2px var(--ink), 6px 7px 0 2px var(--ink);
}
.vcl-label .vcl-kicker { color: var(--mustard); }
.vcl-h1 { margin: 0 0 .9rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.08; }
.vcl-lede { margin: 0 0 1.3rem; font-family: var(--body); font-size: 1rem; line-height: 1.55; color: rgba(254, 250, 240, .86); }
.vcl-note { margin: 1.1rem 0 0; font-family: var(--body); font-size: .85rem; line-height: 1.45; color: rgba(254, 250, 240, .65); }
.vcl-note a { color: inherit; text-underline-offset: 2px; }

/* newsletter sign-up (handled by the site's newsletter script: form.klaviyo-form) */
.vcl-signup { margin: 0; display: grid; }
/* the form and the message after sending share one grid cell, so swapping them doesn't change the card's height
   (the site's newsletter script hides the form with an inline display: none) */
.vcl-signup > .vcl-signup__form, .vcl-signup > .w-form-done { grid-area: 1 / 1; display: block !important; }
.vcl-signup > .w-form-done { visibility: hidden; display: flex !important; align-items: center; }
.vcl-signup:has(> .vcl-signup__form[style*="none"]) > .vcl-signup__form { visibility: hidden; }
.vcl-signup:has(> .vcl-signup__form[style*="none"]) > .w-form-done { visibility: visible; }
.vcl-signup__label { display: block; margin-bottom: .55rem; font-family: var(--display); font-size: .82rem; letter-spacing: .06em; }
.vcl-signup__row { display: flex; gap: .6rem; }
.vcl-signup__input {
  flex: 1; min-width: 0; height: auto; margin: 0; padding: .85rem 1.1rem .8rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
}
.vcl-signup__input:focus { outline: none; box-shadow: 0 0 0 3px rgba(227, 120, 41, .45); }
.vcl-signup .vcl-btn { -webkit-appearance: none; appearance: none; }
.vcl-signup .vcl-btn:disabled { opacity: .7; cursor: default; }
.vcl-signup__msg { display: none; padding: .7rem 1rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--sage); font-family: var(--body); font-size: .95rem; line-height: 1.4; }
.vcl-signup__msg--fail { margin-top: .7rem; background: #f6c7b5; }
/* the message itself: Webflow styles it in its display font (with alternates set inline); plain body text here,
   long email addresses may break anywhere */
.vcl-signup__msg .status-message-text {
  font-family: var(--body); font-size: .92rem; line-height: 1.4; color: var(--ink); text-align: left;
  font-feature-settings: normal !important; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ wet or dry */
.vcl-wd { position: relative; padding: 8rem calc(var(--pad) + 2vw); background: var(--purple); color: var(--cream); }
.vcl-wd::before {   /* the panel's orange dotted frame */
  content: ""; position: absolute; inset: 14px; border: 10px solid var(--orange); border-radius: 6px; pointer-events: none; box-shadow: inset 0 0 0 3px var(--sage);
}
.vcl-wd__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1100px; margin: 0 auto; align-items: center; }
.vcl-wd .vcl-kicker { color: var(--mustard); }
.vcl-wd__intro p { margin: 0 0 1.8rem; font-family: var(--body); font-size: 1.08rem; line-height: 1.6; color: rgba(254, 250, 240, .85); }
.vcl-wd__try { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.vcl-wd__hint { display: block; margin-top: 1rem; font-family: var(--body); font-size: .85rem; color: rgba(254, 250, 240, .7); }
/* the plug-in's switch, big: the knob stretches as it slides, the track blends mustard -> orange */
.vcl-wd__switch { display: inline-flex; align-items: center; gap: .8rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--cream); font-family: var(--display); font-size: 1.1rem; letter-spacing: .06em; }
.vcl-wd__switch:focus { outline: none; }
.vcl-wd__switch:focus-visible i { outline: 2px solid var(--cream); outline-offset: 3px; }
.vcl-wd__switch i { position: relative; display: block; width: 96px; height: 40px; border: 3px solid #000; border-radius: 99px; background: var(--mustard); box-shadow: inset -3px 3px 0 #000; transition: background .3s cubic-bezier(.65, 0, .35, 1); }   /* recessed like the pressed ON button: deeper at the top and right */
.vcl-wd__switch b { position: absolute; top: -3px; bottom: -3px; left: -3px; right: 53px; border: 3px solid #000; border-radius: 99px; background: var(--cream);
  /* as in the plug-in: the knob is as tall as the whole switch (it covers the track's outline at its end) and
     stretches lengthwise (round ends stay), the leading end sets off first, the trailing end follows */
  transition: left .27s cubic-bezier(.65, 0, .35, 1), right .27s cubic-bezier(.65, 0, .35, 1) .03s; }
.vcl-wd__switch[aria-checked="true"] i { background: var(--orange); }
.vcl-wd__switch[aria-checked="true"] b { left: 53px; right: -3px; transition: right .27s cubic-bezier(.65, 0, .35, 1), left .27s cubic-bezier(.65, 0, .35, 1) .03s; }
.vcl-wd__switch span { opacity: .55; transition: opacity .2s; }
.vcl-wd__switch[aria-checked="false"] span:first-child, .vcl-wd__switch[aria-checked="true"] span:last-child { opacity: 1; }
.vcl-wd__cards { display: grid; gap: 1.2rem; }
.vcl-card {
  padding: 1.5rem 1.6rem 1.4rem; background: var(--cream); color: var(--ink); border: 2px solid #000; border-radius: 14px; box-shadow: 5px 6px 0 #000;
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.vcl-card h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400; font-size: 1.45rem; }
.vcl-card p { margin: 0; font-family: var(--body); font-size: .97rem; line-height: 1.5; color: rgba(22, 21, 42, .8); }
.vcl-card.is-off { opacity: .6; transform: scale(.97); box-shadow: 2px 3px 0 #000; }
.vcl-card[data-side="wet"]:not(.is-off) { background: var(--mustard); }
.vcl-card[data-side="dry"]:not(.is-off) { background: var(--orange); }

/* ------------------------------------------------------------------ the garden: 98 pads, one octave playable */
.vcl-garden { padding: 7rem var(--pad) 6rem; background: var(--paper); }
.vcl-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.vcl-h2 { margin: 0 0 1rem; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.05; }
.vcl-sub { margin: 0 auto; max-width: 620px; font-family: var(--body); font-size: 1.08rem; line-height: 1.6; color: rgba(22, 21, 42, .78); }
.vcl-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 8px; max-width: 1200px; margin: 0 auto; }
.vcl-pad {
  position: relative; aspect-ratio: 1; padding: 0; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
  background: rgba(22, 21, 42, .06); border-color: rgba(22, 21, 42, .22); cursor: default;
}
.vcl-pad svg { position: absolute; left: 10%; right: 10%; top: 26%; width: 80%; height: 48%; }
.vcl-pad svg rect { fill: rgba(22, 21, 42, .2); }
.vcl-pad b { position: absolute; left: 6px; top: 4px; font-family: var(--display); font-weight: 400; font-size: 10px; color: rgba(22, 21, 42, .35); }
.vcl-pad--on { background: var(--c, var(--cream)); border-color: var(--ink); box-shadow: 2px 3px 0 var(--ink); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.vcl-pad--on svg rect { fill: var(--ink); }
.vcl-pad--on b { color: var(--ink); }
.vcl-pad--on:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
.vcl-pad--on.is-playing { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
.vcl-pad--on:focus { outline: none; }
.vcl-pad--on:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vcl-pad .vcl-pad__prog { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--ink); }

/* ------------------------------------------------------------------ the voice */
.vcl-voice { position: relative; padding: 7rem var(--pad); background: var(--navy); color: var(--cream); overflow: hidden; }
.vcl-voice__inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; max-width: 1150px; margin: 0 auto; align-items: center; }
.vcl-voice .vcl-kicker { color: var(--mustard); }
.vcl-voice .vcl-h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.vcl-voice p { font-family: var(--body); font-size: 1.05rem; line-height: 1.65; color: rgba(254, 250, 240, .82); margin: 0 0 1rem; }
.vcl-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 520px; }
.vcl-pack { display: block; text-decoration: none; color: var(--cream); }
.vcl-pack img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--cream); border-radius: 10px; transition: transform .2s ease; }
.vcl-pack:hover img { transform: rotate(-2deg) scale(1.03); }
.vcl-pack span { display: block; margin-top: .5rem; font-family: var(--display); font-size: .78rem; letter-spacing: .04em; line-height: 1.3; }
.vcl-pack em { font-style: normal; color: var(--mustard); }

/* ------------------------------------------------------------------ under the hood */
/* royalty free: what buyers may and may not do, in plain words, with the full agreement linked */
.vcl-rf { padding: 6.5rem var(--pad); background: var(--sage); text-align: center; scroll-margin-top: 80px; }
.vcl-rf__inner { max-width: 980px; margin: 0 auto; }
.vcl-rf .vcl-kicker { color: var(--ink); opacity: .7; }
.vcl-rf .vcl-sub { color: rgba(22, 21, 42, .82); }
.vcl-rf__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 2.8rem 0 2rem; text-align: left; }
.vcl-rf__card { padding: 1.6rem 1.7rem 1.5rem; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 6px 0 var(--ink); }
.vcl-rf__card h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-family: var(--display); font-weight: 400; font-size: 1.45rem; }
.vcl-rf__card h3::before { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border: 2px solid var(--ink); border-radius: 50%; background: center / 70% no-repeat; }
.vcl-rf__card--yes h3::before { background-color: var(--mustard); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%2316152a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.vcl-rf__card--no h3::before { background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%2316152a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vcl-rf__card ul { margin: 0; padding-left: 1.1rem; font-family: var(--body); font-size: 1rem; line-height: 1.55; color: rgba(22, 21, 42, .85); }
.vcl-rf__card li + li { margin-top: .45rem; }
.vcl-rf__fine { margin: 0 auto; max-width: 640px; font-family: var(--body); font-size: .92rem; line-height: 1.5; color: rgba(22, 21, 42, .75); }
.vcl-rf__fine a { color: inherit; text-underline-offset: 2px; }

.vcl-hood { padding: 7rem var(--pad) 5rem; background: var(--paper); }
.vcl-specs { max-width: 800px; margin: 0 auto 5rem; }
.vcl-specs__title { margin-bottom: 1.4rem; text-align: center; font-family: var(--display); font-size: 1.6rem; }
.vcl-specs__row { display: flex; justify-content: space-between; gap: 2rem; padding: .95rem 0; border-bottom: 1.5px solid rgba(22, 21, 42, .18); font-family: var(--body); font-size: .98rem; }
.vcl-specs__row span:first-child { font-family: var(--display); letter-spacing: .03em; }
.vcl-specs__row span:last-child { text-align: right; }
.vcl-specs__row a { color: inherit; text-underline-offset: 2px; }
.vcl-final { max-width: 560px; margin: 0 auto; text-align: center; scroll-margin-top: 120px; }
.vcl-final .vcl-signup__label { font-family: var(--body); font-size: 1rem; letter-spacing: 0; margin-bottom: 1rem; }

/* ------------------------------------------------------------------ sticky */
.vcl-sticky { position: fixed; right: var(--pad); bottom: 1.6rem; z-index: 90; display: flex; gap: .7rem; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .35s, visibility .35s, transform .35s; }
.vcl-sticky.is-on { opacity: 1; visibility: visible; transform: none; }

/* ------------------------------------------------------------------ tablets and phones */
@media (max-width: 991px) {
  .vcl-hero { padding-top: 100px; }
  .vcl-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .vcl-label { margin: 0 auto; max-width: 560px; }
  .vcl-playme { --size: 86px; top: -26px; right: -8px; }
  .vcl-playme b { font-size: 16px; }
  .vcl-rf__cards { grid-template-columns: 1fr; }
  .vcl-wd { padding: 6rem calc(var(--pad) + 14px); }
  .vcl-wd__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .vcl-grid { grid-template-columns: repeat(7, 1fr); }
  .vcl-voice__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .vcl-specs__row { flex-direction: column; gap: .2rem; }
  .vcl-specs__row span:last-child { text-align: left; }
  .vcl-sticky { left: var(--pad); right: var(--pad); justify-content: center; bottom: 1rem; }
}
@media (max-width: 767px) {
  .vcl.is-phone .vcl-rack { pointer-events: none; }
  .vcl.is-phone .vcl-playme { display: none; }
  .vcl-grid { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .vcl-pad { border-radius: 8px; }
  .vcl-pad b { font-size: 8px; left: 4px; top: 2px; }
  .vcl-signup__row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .vcl-playme svg { animation: none; } .vcl-wd__switch b, .vcl-wd__switch[aria-checked="true"] b { transition: none; } }