.guide-actions,.guide-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.guide-actions{margin-top:20px}.guide-action,.guide-sample{font:650 14px Manrope,Arial;display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:9px;padding:11px 17px;background:var(--ink);color:white;text-decoration:none;cursor:pointer}.guide-action:hover{background:#50365d}.guide-sample{background:white;color:var(--purple);border-color:#d8cae3}.guide-sample:disabled{opacity:.55}#sample-status{display:block;color:var(--quiet);line-height:1.5;margin-top:6px}.guide-nav{border-bottom:1px solid #e3dae9;padding:16px 0 13px;gap:12px 24px}.guide-nav a{font-size:13px;color:var(--purple);font-weight:650}.guide-nav a:hover,.related-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.guide-block{margin:0;padding:clamp(37px,5vw,70px) 0;scroll-margin-top:16px}.guide-block h2{margin:0;font:700 clamp(25px,3vw,38px)/1.17 Manrope,Arial;letter-spacing:-.05em}.guide-block h3{margin:0;font:700 18px/1.3 Manrope,Arial;letter-spacing:-.025em}.guide-block p{margin:8px 0 0;color:var(--quiet);font:400 15px/1.7 Manrope,Arial}.guide-steps ol{counter-reset:guide;list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.guide-steps li{counter-increment:guide;border-top:1px solid #dbcee4;padding:14px 0}.guide-steps li:before{content:counter(guide,decimal-leading-zero);display:block;font-size:13px;font-weight:650;color:var(--purple);margin-bottom:10px}
.workflows{background:#f4edf8;border:1px solid #e5d9ed;border-radius:19px;padding:clamp(24px,4.4vw,58px)}.workflows>header{text-align:center;max-width:740px;margin:0 auto 32px}.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 7%}.workflow-grid article{display:flex;gap:14px;min-width:0}.workflow-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#7545a0;background:#fff;border:1px solid #e6daed}.workflow-icon svg{width:20px;height:20px}.workflow-grid p{font-size:14px;line-height:1.7;margin-top:5px}
.guide-faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:7%}.guide-faq details{border-bottom:1px solid #e4dce9;padding:0 0 14px;margin:0 0 14px}.guide-faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:15px;font-weight:650;cursor:pointer;list-style:none}.guide-faq summary::-webkit-details-marker{display:none}.guide-faq summary:after{content:'+';color:var(--purple);font-weight:500;font-size:20px}.guide-faq details[open] summary:after{content:'−'}.guide-faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.guide-related{border-top:1px solid #e4dce9}.guide-related>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}.related-card{display:block;color:var(--ink);text-decoration:none}.related-card img{display:block;width:100%;aspect-ratio:2.2;object-fit:cover;height:auto;border-radius:10px}.related-card h3{margin:10px 0 3px}.related-card h3 span{color:var(--purple)}.related-card p{font-size:14px;margin:0}
.guide-case,.palette-demo{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:7%;border-top:1px solid #e4dce9}.guide-case .case-art{display:block;height:clamp(220px,27vw,340px);border-radius:15px;overflow:hidden;background:var(--lavender)}.case-art img{width:100%;height:100%;object-fit:cover}.guide-case .guide-label{margin:0 0 10px;font-weight:650;color:var(--purple)}.guide-case .guide-action{margin-top:16px}.palette-demo{border-top:0;border-bottom:1px solid #e4dce9}.palette-demo figure{margin:0;overflow:hidden;border:1px solid #e4dce9;border-radius:13px;background:white}.palette-demo figure>img{width:100%;height:auto;aspect-ratio:3/2;display:block}.palette-demo figcaption{display:flex}.palette-demo figcaption span{flex:1;min-width:0;text-align:center}.palette-demo i{display:block;height:22px}.palette-demo b{font:600 11px/2.6 Manrope,Arial;color:#473750}
@media(max-width:700px){.guide-block{padding:30px 0}.workflows{padding:22px 16px}.workflows>header{text-align:left;margin-bottom:22px}.workflow-grid,.guide-faq,.guide-case,.palette-demo{grid-template-columns:1fr;gap:18px}.guide-steps ol{grid-template-columns:1fr;gap:4px;margin-top:16px}.guide-steps li{display:grid;grid-template-columns:26px 1fr;padding:10px 0}.guide-steps li p{grid-column:2;margin-top:3px}.guide-steps li:before{margin:3px 0 0}.guide-nav{gap:8px 14px}.guide-related>div{grid-template-columns:1fr;gap:15px}.related-card{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:12px}.related-card img{aspect-ratio:1.3}.related-card h3{margin:0}.guide-actions{gap:6px;margin-top:12px}.guide-action,.guide-sample{font-size:12px;padding:8px 12px}.palette-demo b{font-size:10px}}
.worked-output{display:grid;grid-template-columns:1fr 1.06fr;gap:7%;align-items:center;border-bottom:1px solid #e4dce9}.players{padding:18px;background:#f5f0f7;border:1px solid #e8deed;border-radius:14px;min-width:0}.players figure{margin:0}.players figure+figure{margin-top:12px}.players figcaption{font-size:12px;line-height:1.4;margin:0 0 6px;color:var(--purple);font-weight:700}.players video,.players audio{width:100%;display:block}.players video{max-height:230px;background:#251c2a;border-radius:8px}.players img{width:auto;height:auto;max-width:100%;max-height:260px;object-fit:contain;display:block;margin-inline:auto}.players audio{height:36px}
@media(max-width:700px){.worked-output{grid-template-columns:1fr;gap:16px}.players video{max-height:210px}}

.case-gallery {border-top:1px solid #e4dce9}
.case-gallery > h2 {margin-bottom:clamp(20px,3vw,32px);text-align:center}
.inspiration-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.inspiration-card {display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1fr);align-items:center;gap:clamp(13px,2vw,23px);padding:16px;border-radius:16px;border:1px solid #e2d8e9;background:#fff;color:var(--ink);text-decoration:none}
.inspiration-card:hover,.inspiration-card:focus-visible {border-color:#b799ca;background:#fdfaff}
.inspiration-card:focus-visible {outline:2px solid #8155a4;outline-offset:3px}
.case-contact {display:flex;align-items:center;justify-content:center;gap:3px;border-radius:9px;overflow:hidden;background:#f2ecf5;min-width:0}
.case-contact img {display:block;width:100%;max-height:210px;object-fit:contain}
.case-contact.pair {flex-direction:column}
.case-contact.pair img {max-height:98px}
.case-contact.portrait.pair {flex-direction:row}
.case-contact.portrait.pair img {width:calc(50% - 1.5px);max-height:210px}
.case-description h3 {font-size:clamp(17px,1.65vw,22px);letter-spacing:-.035em}
.case-description p {font-size:14px;line-height:1.6;margin-top:7px}
.inspiration-card:hover h3,.related-card:hover h3 {text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.inspiration-grid{grid-template-columns:1fr}.case-contact img{max-height:180px}.inspiration-card{grid-template-columns:minmax(0,.65fr) minmax(0,1fr)}}
@media(max-width:500px){.inspiration-card{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:12px;padding:12px}.case-description p{font-size:13px}.case-contact.pair img{max-height:70px}.case-contact.portrait.pair img{max-height:160px}.case-gallery > h2{text-align:left}}
.workflow-grid {gap:14px}
.workflow-grid article {padding:clamp(15px,2.2vw,25px);border:1px solid #e5daed;border-radius:13px;background:#fff}
.workflow-icon {background:#f3edf8}

.players img.listening-art{width:100%;max-height:190px;object-fit:cover;object-position:center 38%;border-radius:8px;margin-bottom:13px}.players video{max-height:clamp(260px,39vw,430px);width:auto;max-width:100%;margin-inline:auto;background:transparent}.players:has(video){background:#f5eff7}

/* Let the two samples share the page width and a common top edge. */
.worked-output.comparison {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.comparison .worked-text { max-width: 76ch }
.comparison .players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 2vw, 24px);
}
.comparison .players figure { min-width: 0; margin: 0 }
.comparison .players video {
  width: 100%;
  height: clamp(150px, 36vw, 420px);
  max-height: none;
  object-fit: contain;
  background: #211c24;
}
.comparison .players img.listening-art {
  grid-column: 1 / -1;
  margin: 0;
  max-height: 190px;
}
@media (min-width: 900px) {
  .comparison-audio .players {
    grid-template-columns: minmax(140px, .7fr) repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  .comparison-audio .players img.listening-art {
    grid-column: auto;
    height: 110px;
  }
}
@media (max-width: 580px) {
  .comparison .players { padding: 10px }
  .comparison-audio .players { grid-template-columns: minmax(0, 1fr) }
}

.related-card img { aspect-ratio: 1200 / 630; object-fit: contain }
.example-image { display: block; cursor: zoom-in }
.example-image:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px }
.comparison-image .example-image, .mixed-media:has(.example-image) .example-image {
  display: grid;
  place-items: center;
  height: clamp(155px, 38vw, 430px);
  background: #f2ecf5;
}
.comparison-image .example-image img, .mixed-media .example-image img {
  width: 100%; height: 100%; max-height: inherit; min-height: 0; object-fit: contain;
}
.mixed-media:has(audio) .players { align-items: center }
.worked-output.sample-sequence { grid-template-columns: minmax(0,1fr); gap: 20px }
.sample-sequence .players {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(10px,2vw,22px);
}
.sample-sequence .players figure { min-width: 0; margin: 0 }
.sample-sequence .players video { width: 100%; height: auto }
.sample-sequence .guide-sample { grid-column: 1 / -1; justify-self: start }
.document-pages .example-image img { width: 100%; height: auto; max-height: none }
@media(max-width:600px) {
  .sample-sequence .players { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px }
  .sample-sequence:not(.document-pages) figure:last-of-type { grid-column: 1 / -1 }
  .sample-sequence:has(audio) .players, .mixed-media:has(audio) .players { grid-template-columns: minmax(0,1fr) }
}