/* ==========================================================================
   TuneDance frontend — everything it can do.

   A capability list, and the trap with those is that they all look like a
   feature grid. Two things keep this one out of that.

   First, the prompt. Entry 01 contains the actual sentence a buyer would type,
   and that is the most concrete thing anywhere in this copy, so it is set as
   the input itself: a caret, a monospaced measure, an accent rule down the
   side. Everywhere else on the page describes the product; this is the product.

   The entries are .ability, not .cap: the capability grid earlier on the page
   already owns .cap and centres it, and reusing the name silently centred every
   line in this section.

   Second, restraint. One accent, no gradient text, no colour that changes
   between entries. Entries alternate side to side, which is enough rhythm on
   its own: with the sides already swapping, dividing rules as well would make
   the section read as a table rather than as a run of features.
   ========================================================================== */

.does {
  --accent: #04a86b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(62px, 7.4vw, 118px) 24px clamp(62px, 7.4vw, 116px);
  background: linear-gradient(180deg, #f7f6f3 0%, #f3f2ee 100%);
  color: var(--on-stage);
}

.does::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 92% 6%, rgba(0, 201, 126, 0.2) 0%, transparent 68%),
    radial-gradient(40% 42% at 6% 88%, rgba(0, 201, 126, 0.14) 0%, transparent 70%);
  filter: blur(68px);
}

.does__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

/* --- Header -------------------------------------------------------------- */

/* The doc gives this line a yellow highlighter. An eyebrow does the same job
   without spending the section's loudest voice before the heading starts. */
.does__eyebrow {
  margin: 0 auto clamp(14px, 1.8vw, 22px);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
}

.does__heading {
  margin: 0 auto clamp(46px, 5.6vw, 90px);
  max-width: 20ch;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.038em;
  text-align: center;
  text-wrap: balance;
}

/* Flat accent, not a gradient. It is a brand name, not an effect. */
.does__brand { color: var(--accent); }

/* --- One capability ------------------------------------------------------ */

.ability {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(26px, 4.4vw, 74px);
}

.ability + .ability { margin-top: clamp(44px, 5.8vw, 96px); }

/* Media crosses to the left on every second entry. Order rather than
   direction, so the source stays in reading order for anyone not seeing the
   layout.

   The track widths have to swap with it. Reordering the items alone leaves the
   image sitting in the wide track and the copy crushed into the narrow one,
   which is exactly as wrong as it sounds: the copy column must stay the wide
   one on every entry, whichever side it is on. */
.ability:nth-child(even) { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
.ability:nth-child(even) .ability__body { order: 2; }
.ability:nth-child(even) .ability__media { order: 1; }

.ability__title {
  position: relative;
  z-index: 0;
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  font-size: clamp(25px, 3.2vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

/* One phrase per title, and the device rotates down the list, sweep,
   gradient, underline, chip, so ten headings in a row read as a hand with
   a few pens rather than one stamp. All four are devices the page already
   uses above. */
.ability__mark--sweep {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.1em;
  margin: 0 -0.04em;
  transform: rotate(-1.2deg);
}

.ability__mark--sweep::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.02em;
  right: -0.02em;
  top: 0.1em;
  bottom: 0.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9 C 40 4, 92 6.5, 140 4.5 C 168 3.4, 186 5, 197.5 7 L 196 36 C 150 39.5, 96 37, 52 39 C 30 40, 14 38.5, 3 36.5 Z' fill='%2386f2c6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.ability__mark--grad {
  background-image: linear-gradient(96deg, #06d492 0%, #00bd7f 42%, #0a7fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ability__mark--line {
  position: relative;
  white-space: nowrap;
}

.ability__mark--line::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.06em;
  bottom: -0.12em;
  height: 0.2em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 50 8, 110 11, 196 6' fill='none' stroke='%2300c97e' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M12 19 C 70 14, 130 17, 180 13' fill='none' stroke='%2300c97e' stroke-width='4.5' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.ability__mark--chip {
  display: inline-block;
  padding: 0.02em 0.2em 0.08em;
  border-radius: 0.14em;
  background: linear-gradient(98deg, #05b46c 0%, #0f8fc0 50%, #1f5cf0 100%);
  color: #ffffff;
  transform: rotate(-1.6deg);
  box-shadow:
    0 0.26em 0.8em rgba(5, 169, 107, 0.38),
    0 0.08em 0.2em rgba(46, 107, 255, 0.35);
}

.ability__body p {
  margin: 0 0 clamp(14px, 1.7vw, 20px);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  color: rgba(26, 30, 38, 0.76);
}

.ability__body p:last-child { margin-bottom: 0; }

.ability__body p.ability__cue {
  font-weight: 700;
  color: rgba(26, 30, 38, 0.9);
}

/* A deck line: the entry's title has a second half in the copy, so it sits
   directly under it, tighter than body copy and heavier, before the paragraphs
   start. */
.ability__body p.ability__deck {
  margin-top: calc(clamp(12px, 1.6vw, 20px) * -0.55);
  margin-bottom: clamp(16px, 2vw, 24px);
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.024em;
  color: rgba(26, 30, 38, 0.9);
}

/* The line an entry ends on when the copy has a closer. The doc highlights it
   in yellow; that is the author marking a punchline, not a request for a
   marker pen. Weight and size say the same thing without adding a colour the
   section does not otherwise use. */
.ability__body p.ability__kicker {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(17px, 1.95vw, 24px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.024em;
  color: var(--on-stage);
}

/* --- The prompt ---------------------------------------------------------- */

/* Not a pull quote. It is meant to read as the thing you type, so it gets a
   caret, a tighter measure and the accent rule, and it sits slightly outdented
   from the copy so it breaks the column rather than sitting inside it. */
.prompt {
  margin: clamp(18px, 2.2vw, 28px) 0 clamp(18px, 2.2vw, 28px) 0;
  padding: clamp(14px, 1.8vw, 22px) 0 clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
  border-left: 3px solid var(--accent);
}

.ability__body .prompt p {
  margin: 0;
  font-size: clamp(15px, 1.65vw, 19px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(26, 30, 38, 0.88);
}

/* Sits on the last line of the prompt, so the sentence reads as still being
   typed rather than as a finished quotation. */
.prompt__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 0.28em;
  background: var(--accent);
  vertical-align: -0.16em;
  animation: prompt-blink 1.05s steps(1, end) infinite;
}

@keyframes prompt-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* --- Reserved media ------------------------------------------------------ */

/* Narrower than the copy. Until the real shots exist these are the emptiest
   thing in the section, and empty space does not earn the larger half. */
.ability__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.2vw, 14px);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background:
    radial-gradient(72% 82% at 50% 42%, rgba(0, 201, 126, 0.13) 0%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ability__media-icon {
  width: clamp(24px, 2.7vw, 34px);
  height: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ability__media-note {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(10, 50, 38, 0.42);
}

@media (max-width: 860px) {
  /* both selectors, because the even-row swap above is more specific than a
     bare .ability and was keeping every second feature in two columns on
     phones */
  .ability,
  .ability:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  /* Image first, copy under it, on every entry once stacked: one rhythm
     down the page, so each feature opens with its picture. */
  .ability .ability__media,
  .ability:nth-child(even) .ability__media { order: 1; }
  .ability .ability__body,
  .ability:nth-child(even) .ability__body { order: 2; }
}