/* ==========================================================================
   TuneDance frontend — the offer.

   Copied from cenematic/audio-maker (styles/pricing.css plus the .order tier
   overrides) rather than designed again. Three attempts at a comparison table
   here failed for a reason that was not styling: the section had no price and
   no button in it. A feature matrix is a spec sheet, and nobody buys from a
   spec sheet.

   This block is the one on the funnel that actually sells the same two tiers,
   so the fifteen comparison rows became each tier's benefit list, which is
   what that block was built to carry. The prices and the data-checkout keys
   are the live ones from cenematic/scripts/checkout-modal.js.
   ========================================================================== */

/* ==========================================================================
   Cenematic audio-maker (OTO2 — TuneDance) — closing block: order summary
   ("Here's What You Get"), price + CTA, and the 30-day guarantee.
   Split layout: checklist left, money column (product, price, CTA) right.
   ========================================================================== */

.order {
  padding: clamp(48px, 7vw, 96px) 24px;
  background:
    radial-gradient(44% 36% at 8% 4%, rgba(0, 201, 126, 0.12) 0%, transparent 68%),
    radial-gradient(46% 38% at 94% 10%, rgba(14, 139, 255, 0.1) 0%, transparent 68%),
    var(--ash-white);
  color: var(--ink);
  text-align: center;
}
.order__inner {
  display: grid;
  max-width: 1150px;
  margin: 0 auto;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "title title"
    "list  media"
    "list  normal"
    "list  eyebrow"
    "list  price"
    "list  cta";
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.order__title        { grid-area: title; }
.order__list         { grid-area: list; }
.order__media        { grid-area: media; max-width: 360px; }
.order__normal       { grid-area: normal; }
.order__deal-eyebrow { grid-area: eyebrow; }
.order__price        { grid-area: price; }
.order .cta-button   { grid-area: cta; justify-self: center; }
.order__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "list" "normal" "eyebrow" "price" "cta";
  }
.order__title {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.order__media {
  position: relative;
  max-width: 440px;
  margin: 0 auto clamp(20px, 3vw, 32px);
}
/* Color bloom behind the product shot */
.order__media::before {
  content: "";
  position: absolute;
  inset: 10% 0 2%;
  pointer-events: none;
  background: radial-gradient(54% 58% at 48% 48%, rgba(0, 201, 126, 0.32) 0%, rgba(14, 139, 255, 0.22) 55%, transparent 80%);
  filter: blur(44px);
}
.order__media img {
  position: relative;
  width: 100%;
  height: auto;
}
.order__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.order__list {
    max-width: 560px;
    margin: 0 auto clamp(18px, 2.5vw, 26px);
  }
.order__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(38, 43, 51, 0.1);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.4;
}
.order__list li:first-child {
  border-top: 1px solid rgba(38, 43, 51, 0.1);
}
.order__list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--band-green);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.order__normal {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 700;
  color: var(--muted);
}
.order__normal s {
  text-decoration-thickness: 0.09em;
}
.order__deal-eyebrow {
  margin: 0 0 10px;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pop-blue-deep);
}
/* Price line — same treatment as the offer section up the page: ink type
   with a yellow marker on the number, priced one way throughout */
.order__price {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.order__price-label {
  font-size: 0.38em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}
.order__price-amount {
  padding: 0.02em 0.16em 0.06em;
  background: #ffd91d;
  color: #1a1a1a;
}
.order__price-tail {
  display: block;
  margin-top: 14px;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--ink);
}
.order .cta-button:focus-visible {
  outline: 3px solid #141414;
  outline-offset: 3px;
}
/* Gold CTA (legacy .order__cta — still used by the last-call section) */
.order__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #ffd54d, #f5b820);
  color: #141414;
  font-family: inherit;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 0 #d99a16;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.order__cta:hover { transform: translateY(-1px); box-shadow: 0 11px 0 #d99a16; }
.order__cta:active { transform: translateY(8px); box-shadow: 0 2px 0 #d99a16; }
.order__cta:focus-visible {
  outline: 3px solid #141414;
  outline-offset: 3px;
}
.order__cta svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* ==========================================================================
   Cenematic audio-maker (OTO2 — TuneDance) — two-tier pricing table.

   Structure and class names are lifted from the funnel's proven pricing block
   (cenematic/fb-early/styles/pricing.css, byte-identical across eight sales
   pages) so the layout behaves the way those pages already do. The colours are
   not: that file is Cenematic blue/teal with an orange price, and this page is
   TuneDance emerald + gold. Price sits in ink on the page's yellow marker, the
   same device .offer__price-amount and .order__price-amount already use.

   Scoped to the two TuneDance OTO2 pages, which both link this file: this page
   and ../../audio-producer (a split test that varies the hero demo, not the
   pricing, so both carry the identical table). The eight Cenematic pages keep
   their own blue/teal copy and must not inherit this retheme.

/* --- Section header ------------------------------------------------------
   These were styled by a plans.css that no longer exists, so the heading and
   lead were rendering unstyled. They live here now, with the rest of the
   block. */

.order__heading {
  margin: 0 auto clamp(16px, 2vw, 24px);
  /* Was 24ch, which is about 670px at this size and forced a wrap far earlier
     than the 1150px container needed. Sized in px so it does not shrink as the
     type scales up. */
  max-width: 1000px;
  font-size: clamp(28px, 4.3vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.036em;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}

.order__heading strong { font-weight: 900; }

.order__lead {
  margin: 0 auto clamp(10px, 1.4vw, 16px);
  max-width: 780px;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.5;
  text-align: center;
  color: rgba(26, 30, 38, 0.82);
  text-wrap: balance;
}

   Layout overrides hang off .order__inner--tiers rather than editing order.css,
   which both pages share. That leaves order.css's original single-tier grid
   intact and unused; it is left in place rather than deleted so the two pages
   can be reverted independently.
   ========================================================================== */

/* Neutralise order.css's two-column "checklist left, money right" grid. That
   grid places .order__list / .order__media / .order__price, none of which
   exist in the tiered layout. */
.order__inner--tiers {
  display: block;
  max-width: 1150px;
  margin: 0 auto;
}

.order__sub {
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 700;
  color: var(--muted);
}

/* --- Cards grid ----------------------------------------------------------- */

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 2.6vw, 32px);
  width: 100%;
  text-align: left;
}

.pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  border: 1px solid rgba(5, 157, 110, 0.22);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
  box-shadow: 0 28px 80px -48px rgba(38, 43, 51, 0.38);
}

/* Producer carries the weight; Composer stays calm. overflow stays visible
   here so the badge and the bloom can sit outside the card edge. */
.pricing__card--featured {
  z-index: 2;
  overflow: visible;
  transform: translateY(-22px);
  border: 3px solid transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fdfa 100%) padding-box,
    linear-gradient(135deg, var(--pop-green) 0%, var(--band-green) 52%, var(--pop-blue) 100%) border-box;
  box-shadow:
    0 42px 110px -52px rgba(5, 157, 110, 0.4),
    0 20px 52px -42px rgba(38, 43, 51, 0.6),
    0 0 0 8px rgba(0, 201, 126, 0.06);
}

/* Emerald cap along the top edge */
.pricing__card--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(90deg, var(--pop-green), var(--band-green), var(--pop-blue));
  z-index: -1;
}

/* Bloom pooling behind the head of the featured card */
.pricing__card--featured::after {
  content: "";
  position: absolute;
  inset: -26px -24px auto;
  height: 220px;
  border-radius: 32px;
  pointer-events: none;
  background:
    radial-gradient(45% 70% at 26% 10%, rgba(0, 201, 126, 0.26) 0%, transparent 72%),
    radial-gradient(45% 70% at 78% 18%, rgba(14, 139, 255, 0.18) 0%, transparent 72%);
  filter: blur(24px);
  z-index: -2;
}

.pricing__badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--band-green);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 16px 34px -18px rgba(5, 157, 110, 0.6);
}

/* --- Product shot --------------------------------------------------------- */

.pricing__card-image {
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 48px) 0;
  background: linear-gradient(180deg, rgba(0, 201, 126, 0.07), rgba(255, 255, 255, 0));
}

.pricing__card-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
}

.pricing__card--featured .pricing__card-image {
  padding-top: clamp(34px, 4vw, 56px);
  background:
    radial-gradient(62% 72% at 52% 18%, rgba(0, 201, 126, 0.18) 0%, transparent 70%),
    radial-gradient(44% 52% at 88% 36%, rgba(14, 139, 255, 0.14) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0, 201, 126, 0.06), rgba(255, 255, 255, 0));
}

.pricing__card--featured .pricing__card-image img {
  height: 244px;
  transform: scale(1.04);
  transform-origin: center bottom;
}

/* --- Head + price -------------------------------------------------------- */

.pricing__card-body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 48px) 0;
}

.pricing__card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing__card-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pricing__card--featured .pricing__card-title {
  color: var(--band-green);
}

.pricing__card-license {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 600;
  color: var(--muted);
}

.pricing__card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

/* Ink on the page's yellow marker, not a coloured gradient — the price is
   treated identically in the offer section and the urgency close. */
.pricing__price-current {
  padding: 0.02em 0.14em 0.06em;
  background: #ffd91d;
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.pricing__card--featured .pricing__price-current {
  font-size: clamp(46px, 5.6vw, 72px);
}

.pricing__price-original {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 0.09em;
}

.pricing__price-frequency {
  width: 100%;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  color: var(--muted);
}

.pricing__card-divider {
  height: 1px;
  margin: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 48px) 0;
  background: rgba(38, 43, 51, 0.1);
}

/* --- Benefits ------------------------------------------------------------- */

.pricing__card-benefits {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 48px) 0;
}

.pricing__benefits-title {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 800;
  color: var(--ink);
}

.pricing__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Square emerald tick, matching .order__list li::before rather than the
   circular CDN svg the Cenematic pages use — this page ticks things one way. */
.pricing__benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(38, 43, 51, 0.08);
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.pricing__benefits-list li:first-child {
  border-top: 1px solid rgba(38, 43, 51, 0.08);
}

.pricing__benefits-list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.1em;
  background: var(--band-green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* The six differentiators. All emphasis lives on Director: there every one of
   them is an upgrade, whereas on Producer four of the six are limits ("3 Minutes
   Max Audio Length"), and weighting a limit reads as a boast. */
.pricing__card--featured .pricing__benefits-list li strong {
  font-weight: 900;
  color: var(--band-green);
}

/* <strong> carries a bolder default, so it needs resetting rather than simply
   not being styled — nothing in the Producer card should compete with Director's
   emphasis. */
.pricing__card:not(.pricing__card--featured) .pricing__benefits-list li strong {
  font-weight: inherit;
}

/* The one genuine absence. A tick beside the word "No" reads wrong, so it gets
   a muted cross and keeps its row so both columns still line up. */
.pricing__benefit--off {
  color: var(--muted);
}

.pricing__benefit--off strong {
  color: inherit;
}

.pricing__benefit--off::before {
  content: "✕";
  background: rgba(38, 43, 51, 0.26);
}

/* --- Footer --------------------------------------------------------------- */

.pricing__card-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 48px) clamp(28px, 3.4vw, 48px);
}

.pricing__footer-label {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* Scaled-down twin of the shared .cta-button so every CTA on the page reads as
   the same action. Gold stays on the featured tier. */
.pricing__cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 14px;
  background: linear-gradient(90deg, #ffd54d, #f5b820);
  box-shadow: 0 6px 0 #d99a16;
  color: #141414;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pricing__cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 0 #d99a16;
}

.pricing__cta-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #d99a16;
}

.pricing__cta-button:focus-visible {
  outline: 3px solid #141414;
  outline-offset: 3px;
}

.pricing__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #141414;
  color: #fff;
}

.pricing__cta-arrow svg {
  width: 16px;
  height: 16px;
}

/* Composer: dark button with a gold arrow, the inverse of Producer's */
.pricing__card:not(.pricing__card--featured) .pricing__cta-button {
  background: #1a1a1a;
  box-shadow: 0 6px 0 #000;
  color: #fff;
}

.pricing__card:not(.pricing__card--featured) .pricing__cta-button:hover {
  box-shadow: 0 7px 0 #000;
}

.pricing__card:not(.pricing__card--featured) .pricing__cta-button:active {
  box-shadow: 0 2px 0 #000;
}

.pricing__card:not(.pricing__card--featured) .pricing__cta-arrow {
  background: linear-gradient(90deg, #ffd54d, #f5b820);
  color: #141414;
}

.pricing__footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pricing__footer-badges img {
  width: auto;
  height: 34px;
}

.pricing__guarantee-badge {
  height: 46px;
}

/* --- Narrow --------------------------------------------------------------- */

@media (max-width: 860px) {
  .pricing__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  /* Lifting the featured card only makes sense beside a sibling; stacked, it
     just collides with the card above it. */
  .pricing__card--featured {
    transform: none;
  }

  /* The bloom bleeds -24px sideways, which overhangs the viewport at near
     full width and causes horizontal scroll. */
  .pricing__card--featured::after {
    inset: -26px 0 auto;
  }
}