/* /products/cutti/ — page-specific styles (tokens only; loaded after site.css, before theme.css).
   A product-launch layout: oversized product name, key visual, full-width demo video, alternating
   charcoal bands, a seven-stage flow and a spec table. Colours come from tokens.css (--lp-*). */

/* 01 Hero */
.hero--lp .hero__copy .lp-title { margin-top: var(--s-5); }
.hero--lp .product-lockup { align-items: center; }
.lp-by .product-lockup__by { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.lp-title { display: flex; flex-direction: column; gap: var(--s-2); max-width: none; }
.lp-title__name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(76px, 7vw + 40px, 150px); line-height: .9; letter-spacing: -0.05em;
  color: var(--text);
}
.lp-title__sub {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(22px, 0.9vw + 17px, 30px); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--accent-text);
}
.hero--lp .lead { margin-top: var(--s-5); }
.lp-launch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); }
.lp-launch__date {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.lp-launch__date::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.lp-launch__count { font: 500 13px/16px var(--font-mono); letter-spacing: .04em; color: var(--accent-text); }
.hero--lp .btn-row { margin-top: var(--s-6); }
.hero--lp .hero__copy .status { margin-top: var(--s-4); font-size: 14px; line-height: 21px; }
.lp-hero { align-items: center; row-gap: var(--s-7); }
.lp-pillars { margin-top: var(--s-8); }

/* Key visual: an illustrative arrangement window */
.lp-window {
  margin: 0; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--lp-window);
  box-shadow: var(--sg-halo, var(--shadow-2));
}
.lp-kv { display: block; width: 100%; height: auto; }
.lp-window__cap { padding: 10px 14px; border-top: 1px solid var(--rule); font: 400 12px/18px var(--font-mono); color: var(--text-muted); }
.lp-kv .kv-chrome, .lp-kv .kv-prompt { fill: var(--lp-chrome); }
.lp-kv .kv-dot { fill: var(--lp-dot); }
.lp-kv .kv-title { fill: var(--text-muted); font-size: 11px; }
.lp-kv .kv-lcd { fill: var(--lp-lcd); }
.lp-kv .kv-lcd-text { fill: var(--text); font-size: 10.5px; letter-spacing: .06em; }
.lp-kv .kv-ruler { fill: var(--lp-ruler); }
.lp-kv .kv-bar { fill: var(--text-muted); font-size: 9.5px; }
.lp-kv .kv-sec-label { fill: var(--lp-on-sec); font-size: 10px; font-weight: 500; }
.lp-kv .kv-head { fill: var(--lp-track); }
.lp-kv .kv-lane { fill: var(--lp-lane); }
.lp-kv .kv-num { fill: var(--text-muted); font-size: 10px; }
.lp-kv .kv-name { fill: var(--text); font-size: 11.5px; font-weight: 500; }
.lp-kv .kv-msr { fill: var(--text-muted); font-size: 8.5px; letter-spacing: .08em; }
.lp-kv .kv-reg { fill-opacity: .26; stroke-opacity: .75; stroke-width: 1; }
.lp-kv .kv-note { fill: var(--text); fill-opacity: .72; }
/* Song sections: one marker colour each; regions take their track colour, as in the CuTTI demo */
.lp-kv .kv-sec--intro { fill: var(--lp-intro); }
.lp-kv .kv-sec--hook  { fill: var(--lp-chorus); }
.lp-kv .kv-sec--verse { fill: var(--lp-verse); }
.lp-kv .kv-sec--final { fill: var(--lp-drums); }
.lp-kv .kv-reg--drums { fill: var(--lp-drums); stroke: var(--lp-drums); }
.lp-kv .kv-reg--bass  { fill: var(--lp-bass);  stroke: var(--lp-bass); }
.lp-kv .kv-reg--piano { fill: var(--lp-piano); stroke: var(--lp-piano); }
.lp-kv .kv-reg--bell  { fill: var(--lp-bell);  stroke: var(--lp-bell); }
.lp-kv .kv-reg--pad   { fill: var(--lp-pad);   stroke: var(--lp-pad); }
.lp-kv .kv-playhead { stroke: var(--accent); stroke-width: 1.5; }
.lp-kv .kv-playhead-cap { fill: var(--accent); }
.lp-kv .kv-prompt-caret { fill: var(--accent); font-size: 15px; font-weight: 500; }
.lp-kv .kv-prompt-text { fill: var(--text); font-size: 11px; }

/* 02 The idea */
.lp-idea { margin-top: var(--s-6); row-gap: var(--s-5); }
@media (min-width: 600px) { .lp-idea { margin-top: var(--s-7); } }
.lp-idea h2 { max-width: 18ch; }
.lp-idea__body p + p { margin-top: var(--s-4); }
.lp-idea__body .lead + p { margin-top: var(--s-5); }
.lp-idea__body .lp-pull {
  margin-top: var(--s-6); padding-left: var(--s-4); border-left: 3px solid var(--accent);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--text);
}

/* 03 Demo video */
.lp-video { margin: 0; }
.lp-video__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--lp-video-bg);
  box-shadow: var(--sg-halo, var(--shadow-2));
}
.lp-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--lp-video-bg); }
.lp-video__cap { margin-top: var(--s-4); max-width: 80ch; font-size: 14px; line-height: 22px; color: var(--text-muted); }
/* Demo transcript: the five on-screen steps. 1 column, 2 from 700px, 3 from 1024px with step 1 spanning two */
.lp-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-step:first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-step:first-child { grid-column: span 2; } }
.lp-step { min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.lp-step__head { display: flex; align-items: center; gap: 10px; font: 600 17px/1.3 var(--font-heading); letter-spacing: -0.01em; color: var(--text); }
.lp-step__head .numeral { color: var(--accent-text); font-size: 12px; }
.lp-step__you, .lp-step__cutti { margin-top: var(--s-3); font-size: 15px; line-height: 23px; }
.lp-step__you { color: var(--text); }
.lp-step__cutti { color: var(--text-muted); padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--lp-drums) 60%, transparent); }
.lp-step__cutti--refused { color: var(--text); border-left-color: var(--accent); }
.lp-step__who { display: block; margin-bottom: 2px; font: 500 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.lp-step__cutti .lp-step__who { color: var(--lp-drums); }
.lp-step__cutti--refused .lp-step__who { color: var(--accent-text); }

/* 04 Rather than */
.lp-rather .lp-rather__was { font: 500 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 900px) { .lp-rather .lp-rather__was { min-height: 36px; } } /* two lines, so the three headings align */
.lp-rather h3 { margin-top: var(--s-3); }

/* 05 Ask */
.lp-asks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .lp-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.lp-ask {
  display: flex; align-items: baseline; gap: 14px; padding: 22px 24px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 1.1vw + 17px, 32px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--text);
}
.lp-ask__caret { flex: none; font-family: var(--font-mono); font-weight: 500; color: var(--accent); }
.lp-brief { margin-top: var(--s-6); max-width: 64ch; font-size: 17px; line-height: 26px; color: var(--text-muted); }
.lp-brief .eyebrow { display: block; margin-bottom: 6px; color: var(--accent-text); }

/* 06 Seven stages: 1 column, 2 from 600px, 4 from 1024px; the outcome card spans two */
.lp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px)  { .lp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-stage--out { grid-column: span 2; } }
@media (min-width: 1024px) { .lp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-stage {
  position: relative; min-width: 0; padding: 22px 22px 24px;
  background: var(--sg-card, var(--bg)); border: 1px solid var(--sg-line, var(--rule));
  border-radius: var(--sg-radius-lg, 12px); box-shadow: var(--sg-shadow, none);
}
.lp-stage .numeral { color: var(--accent-text); }
.lp-stage h3 { margin-top: var(--s-3); }
.lp-stage p { margin-top: var(--s-2); font-size: 15px; line-height: 24px; color: var(--text-muted); }
.lp-stage--out { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lp-stage--out::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: var(--sg-gradient, var(--accent)); }
.lp-actions { margin-top: var(--s-7); }
.lp-actions .chips { margin-top: var(--s-3); }

/* 08 Specs */
.lp-tm { margin-top: var(--s-5); max-width: 72ch; }

/* 09 Launch updates form (same layout as the Value Lens beta form) */
.beta-grid { margin-top: var(--s-6); row-gap: var(--s-6); }
@media (min-width: 600px) { .beta-grid { margin-top: var(--s-7); } }
.beta-copy .subcopy { margin-top: var(--s-4); }
.beta-copy .status { margin-top: var(--s-4); }

/* 11 Closing */
.cta-band--lp h2 { max-width: 26ch; }