/* The creative experiment is a pinned, two-lane illustrative walkthrough. */
.creative-lab { background: var(--canvas); }
.creative-lab .wrap > .h2 { max-width: 16ch; }
.creative-lab__intro { max-width: 62ch; }

.creative-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 42px;
}
.creative-scene,
.creative-beats { grid-area: 1 / 1; }
.creative-scene {
  --ad-size: 370px;
  position: sticky;
  top: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: calc(100svh - 72px);
  min-height: 630px;
  max-height: 900px;
  padding: 6px 8px 5px;
  background: var(--canvas);
}
.creative-scene__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(15px, 2vw, 28px);
  min-height: 52px;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--line);
}
.creative-scene__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.creative-scene__identity > span:last-child { display: grid; gap: 2px; }
.creative-scene__identity strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.creative-scene__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--accent-ink);
}
.creative-scene__mark svg { width: 21px; height: 21px; }
.creative-scene__counter { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.creative-nav { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.creative-nav button {
  min-width: 57px;
  min-height: 37px;
  padding: 6px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.creative-nav button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.creative-nav button[aria-current="step"] { background: var(--accent); color: #fff; }
.creative-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.creative-duel {
  --duel-gap: clamp(18px, 3vw, 48px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--duel-gap);
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 0 2px;
  isolation: isolate;
}
.creative-duel__seam {
  position: absolute;
  top: 8%;
  bottom: 7%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  transform: scaleY(0);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.creative-lane {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  transform: translateX(0) scale(1);
  opacity: 1;
  transition: transform .68s cubic-bezier(.16, 1, .3, 1), opacity .32s ease;
}
.creative-lane--original { z-index: 1; }
.creative-lane--variant { z-index: 2; }
.creative-lane__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(100%, var(--ad-size));
  min-height: 32px;
}
.creative-lane__heading strong { color: var(--ink); font-size: 15px; line-height: 1.1; white-space: nowrap; }
.creative-lane__descriptor { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.creative-lane__letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.creative-lane--variant .creative-lane__letter { background: var(--mist-2); color: var(--ink-2); }
.creative-lane__winner { display: none; margin-left: auto; padding: 6px 9px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 800; }

.creative-ad {
  overflow: hidden;
  width: min(100%, var(--ad-size));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: #222630;
  box-shadow: var(--shadow-float);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.creative-ad__account { display: flex; align-items: center; gap: 8px; padding: 7px 12px 4px; }
.creative-ad__avatar { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border-radius: 50%; background: var(--accent); color: white; font-size: 14px; font-weight: 800; }
.creative-ad__account > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.creative-ad__account strong { font-size: 12px; line-height: 1.15; }
.creative-ad__account small { color: #606777; font-size: 11px; line-height: 1.2; }
.creative-ad__account svg { width: 18px; height: 18px; margin-left: auto; align-self: start; color: #606777; }
.creative-ad__copy { margin: 0; padding: 2px 12px 7px; font-size: 12px; line-height: 1.38; }
.creative-ad > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.creative-ad__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 5px 12px; background: #f1f2f5; }
.creative-ad__link > span:first-child { display: grid; gap: 2px; min-width: 0; }
.creative-ad__link small { overflow: hidden; color: #606777; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.creative-ad__link strong { overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.creative-ad__cta { flex: none; padding: 6px 8px; border: 1px solid #cbd0db; border-radius: var(--r-xs); background: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.creative-ad__engagement { display: flex; justify-content: space-between; gap: 8px; min-height: 26px; padding: 5px 12px; border-bottom: 1px solid #e5e7ed; color: #596171; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .25s ease; }
.creative-ad__engagement strong { color: #202631; font-weight: 800; }
.creative-ad__actions { display: flex; justify-content: space-around; gap: 6px; min-height: 28px; padding: 6px 8px; color: #596171; font-size: 11px; font-weight: 700; }
.creative-ad__actions span { display: inline-flex; align-items: center; gap: 4px; }
.creative-ad__actions svg { width: 12px; height: 12px; }
.creative-lane__metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: min(100%,var(--ad-size)); min-height: 44px; padding-top: 2px; opacity: 0; transition: opacity .25s ease; }
.creative-lane__metrics > div { position: relative; display: grid; gap: 2px; justify-items: center; border-right: 1px solid var(--line); transition: background-color .25s ease, border-color .25s ease; }
.creative-lane__metrics > div:last-child { border-right: 0; }
.creative-lane__metrics span { color: var(--ink-3); font-size: 11px; }
.creative-lane__metrics strong { color: var(--ink); font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.creative-lane__metrics > div.is-creative-compare { border-right-color: transparent; border-radius: var(--r-sm); }
.creative-lane--original .is-creative-compare { background: var(--warn-soft); }
.creative-lane--original .is-creative-compare strong { color: var(--warn); }
.creative-lane--variant .is-creative-compare { background: var(--accent-soft); }
.creative-lane--variant .is-creative-compare strong { color: var(--accent-ink); }
.creative-agent {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 168px;
  padding: 12px 13px 13px;
  border: 1px solid var(--line);
  border-left-color: var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(24, 32, 57, .12);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.creative-agent__identity { display: flex; align-items: center; gap: 7px; }
.creative-agent__identity strong { color: var(--ink); font-size: 13px; }
.creative-agent__avatar { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.creative-agent__avatar svg { width: 19px; height: 19px; }
.creative-agent > p { margin: 8px 0 0; color: var(--ink); font-size: 12px; line-height: 1.43; }
.creative-story[data-phase="0"] .creative-agent,
.creative-story[data-phase="5"] .creative-agent { left: calc(50% + var(--ad-size) / 2 + 24px); width: 236px; transform: translateY(-50%); }
.creative-scene__cue { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 18px; margin: 4px 0 0; color: var(--ink-3); font-size: 12px; }
.creative-scene__cue svg { width: 15px; height: 15px; }

/* State changes use the same two lanes and one contextual Excutia message. */
.creative-story.has-creative-js[data-phase="0"] .creative-lane--original { transform: translateX(calc(50% + var(--duel-gap) / 2)); }
.creative-story.has-creative-js[data-phase="0"] .creative-lane--variant { opacity: 0; transform: translateX(-28px) scale(.96); pointer-events: none; }
.creative-story.has-creative-js[data-phase="5"] .creative-lane--original { opacity: 0; transform: translateX(-55px) scale(.94); pointer-events: none; }
.creative-story.has-creative-js[data-phase="5"] .creative-lane--variant { transform: translateX(calc(-50% - var(--duel-gap) / 2)); }
.creative-story[data-phase="5"] .creative-lane--variant .creative-ad { border-color: var(--ok); box-shadow: 0 1px 2px rgba(20,24,36,.04), 0 12px 32px -10px rgba(30,122,85,.18); }
.creative-story[data-phase="5"] .creative-lane__winner { display: inline-flex; }
.creative-story[data-phase="5"] .creative-lane--variant .creative-lane__letter { background: var(--ok-soft); color: var(--ok); }
.creative-story[data-phase="1"] .creative-duel__seam,
.creative-story[data-phase="2"] .creative-duel__seam,
.creative-story[data-phase="3"] .creative-duel__seam,
.creative-story[data-phase="4"] .creative-duel__seam { transform: scaleY(1); }
.creative-story[data-phase="2"] .creative-ad__engagement,
.creative-story[data-phase="3"] .creative-ad__engagement,
.creative-story[data-phase="4"] .creative-ad__engagement,
.creative-story[data-phase="5"] .creative-ad__engagement,
.creative-story[data-phase="2"] .creative-lane__metrics,
.creative-story[data-phase="3"] .creative-lane__metrics,
.creative-story[data-phase="4"] .creative-lane__metrics,
.creative-story[data-phase="5"] .creative-lane__metrics { opacity: 1; }
.creative-story[data-phase="2"] .creative-agent__avatar,
.creative-story[data-phase="3"] .creative-agent__avatar,
.creative-story[data-phase="4"] .creative-agent__avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.creative-story[data-phase="5"] .creative-lane--variant .creative-lane__metrics > div:last-child { border-radius: var(--r-sm); background: var(--ok-soft); }
.creative-story[data-phase="5"] .creative-lane--variant .creative-lane__metrics > div:last-child strong { color: var(--ok); }

.creative-beats { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.creative-beats > li { position: relative; min-height: 83svh; }
.creative-beats > li:last-child { min-height: 112svh; }
.creative-story.has-creative-js .creative-beat__content { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.creative-story:not(.has-creative-js) { display: block; }
.creative-story:not(.has-creative-js) .creative-scene { position: relative; top: auto; height: auto; max-height: none; }
.creative-story:not(.has-creative-js) .creative-beats > li { min-height: 0; }
.creative-story:not(.has-creative-js) .creative-lane--variant { opacity: 1; transform: none; }
.creative-story:not(.has-creative-js) .creative-beat__content { padding: 24px 0; border-top: 1px solid var(--line); }
.creative-story:not(.has-creative-js) .creative-beat__content > span { color: var(--accent-ink); font-weight: 700; }
.creative-story:not(.has-creative-js) .creative-beat__content h3 { margin: 5px 0; font-size: 20px; }
.creative-story:not(.has-creative-js) .creative-beat__content p { max-width: 65ch; margin: 6px 0; color: var(--ink-2); }

.creative-readout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); margin-top: 0; padding: clamp(26px,4vw,48px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-float); }
.creative-readout__summary h3 { max-width: 20ch; margin: 0 0 14px; font-size: clamp(1.85rem,3.2vw,2.85rem); font-weight: 600; line-height: 1.08; letter-spacing: -.024em; text-wrap: balance; }
.creative-readout__summary p { max-width: 47ch; margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.58; }
.creative-readout__summary strong { color: var(--ink); }
.creative-readout__table { align-self: center; min-width: 0; }
.creative-readout__row { display: grid; grid-template-columns: 1.32fr 1fr 1fr; gap: 8px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.creative-readout__row span { color: var(--ink-2); }
.creative-readout__row strong { font-weight: 750; font-variant-numeric: tabular-nums; }
.creative-readout__row strong:last-child { color: var(--ok); }
.creative-readout__row--head { min-height: 38px; font-size: 12px; font-weight: 700; }
.creative-readout__row--head span:last-child { color: var(--ok); }
.creative-readout__table > p { margin: 16px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }

@media (max-height: 850px) and (min-width: 1001px) {
  .creative-scene { --ad-size: clamp(275px, calc(100svh - 440px), 350px); min-height: 0; }
  .creative-scene__head { min-height: 48px; }
  .creative-duel { padding-top: 2px; }
  .creative-lane { gap: 2px; }
  .creative-lane__metrics { min-height: 39px; }
  .creative-scene__cue { display: none; }
}
@media (max-width: 1150px) and (min-width: 1001px) {
  .creative-scene { --ad-size: clamp(260px, calc((100vw - 440px) / 2), 340px); }
}
@media (max-width: 1080px) and (min-width: 1001px) {
  .creative-nav button { min-width: 49px; padding-inline: 6px; font-size: 11px; }
}
@media (max-width: 1000px) {
  .creative-story { display: block; margin-top: 30px; }
  .creative-scene { position: relative; top: auto; height: auto; min-height: 0; max-height: none; padding: 0; }
  .creative-scene__head { grid-template-columns: 1fr; gap: 0; }
  .creative-scene__counter,
  .creative-nav,
  .creative-duel__seam,
  .creative-scene__cue { display: none; }
  .creative-duel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; align-items: stretch; min-height: 0; padding: 20px 1px 14px; }
  .creative-lane,
  .creative-story.has-creative-js[data-phase="0"] .creative-lane--original,
  .creative-story.has-creative-js[data-phase="0"] .creative-lane--variant,
  .creative-story.has-creative-js[data-phase="5"] .creative-lane--original,
  .creative-story.has-creative-js[data-phase="5"] .creative-lane--variant { flex: 0 0 min(76vw, 350px); transform: none; opacity: 1; pointer-events: auto; scroll-snap-align: start; }
  .creative-lane__heading, .creative-ad, .creative-lane__metrics { width: 100%; }
  .creative-ad__engagement,
  .creative-lane__metrics { opacity: 1; }
  .creative-lane__winner { display: none !important; }
  .creative-agent { position: relative; top: auto; left: auto; width: auto; margin-top: 8px; padding: 15px; transform: none; pointer-events: auto; }
  .creative-story[data-phase="0"] .creative-agent,
  .creative-story[data-phase="5"] .creative-agent { left: auto; width: auto; transform: none; }
  .creative-beats > li,
  .creative-beats > li:last-child { min-height: 0; }
  .creative-story.has-creative-js .creative-beat__content { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .creative-beat__content { padding: 24px 2px; border-top: 1px solid var(--line); }
  .creative-beat__content > span { color: var(--accent-ink); font-size: 13px; font-weight: 750; }
  .creative-beat__content h3 { max-width: 27ch; margin: 8px 0; color: var(--ink); font-size: 21px; line-height: 1.2; }
  .creative-beat__content p { max-width: 62ch; margin: 7px 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
  .creative-beat__content p strong { color: var(--ink); }
  .creative-readout { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
}
@media (max-width: 560px) {
  .creative-duel { margin-right: calc(-1 * var(--gutter)); }
  .creative-readout__row { grid-template-columns: 1.16fr .9fr .9fr; font-size: 12px; }
  .creative-readout__row--head { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .creative-lane, .creative-duel__seam, .creative-ad, .creative-lane__metrics, .creative-ad__engagement { transition-duration: .01ms; }
}