.spotify-ux-guide{max-width:960px;margin-inline:auto}.spotify-ux-guide .wp-block-heading{line-height:1.2;letter-spacing:-.02em}.spotify-ux-guide .wp-block-image{margin:1.5em 0}.spotify-ux-guide .wp-block-list{margin-bottom:1em}.spotify-ux-guide .spotify-hero{padding:clamp(22px,4vw,42px);background:#121212;color:#fff;border-radius:16px;margin:20px 0 30px}.spotify-ux-guide .spotify-hero .eyebrow{font-size:.8em;letter-spacing:.14em;font-weight:700;color:#1ed760}.spotify-ux-guide .spotify-hero h2{color:#fff;font-size:clamp(2rem,5vw,3.3rem);line-height:1.05;margin:.3em 0}.spotify-ux-guide .spotify-hero p{color:#e6e6e6}.spotify-ux-guide .spotify-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.spotify-ux-guide .spotify-pills span{border:1px solid #555;border-radius:999px;padding:7px 12px;font-size:.9em}.spotify-ux-guide .spotify-callout{border-left:5px solid #1ed760;background:#f2f8f3;padding:18px 22px;margin:22px 0;border-radius:0 10px 10px 0}.spotify-ux-guide .spotify-deliverables{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:22px 0}.spotify-ux-guide .spotify-deliverable{border:1px solid #d9d9d9;border-radius:12px;padding:18px;background:#fff}.spotify-ux-guide .spotify-deliverable span{font-size:.8em;font-weight:700;letter-spacing:.1em;color:#087d3c}.spotify-ux-guide .spotify-deliverable h3{margin:8px 0;font-size:1.15em}.spotify-ux-guide .spotify-deliverable p{margin-bottom:0}.spotify-ux-guide .spotify-reference{margin:24px 0;padding:16px;border:1px solid #dedede;border-radius:12px;background:#fafafa}.spotify-ux-guide .spotify-reference img{display:block;width:100%;height:auto;border-radius:6px}.spotify-ux-guide .spotify-reference figcaption{font-size:.92em;margin-top:10px}.spotify-ux-guide .spotify-video{margin:20px 0;padding:18px;border:1px solid #d9d9d9;border-radius:12px}.spotify-ux-guide .spotify-video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:8px}.spotify-ux-guide .spotify-phone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}.spotify-ux-guide .spotify-phone{background:#171717;color:#fff;border-radius:20px;padding:15px;border:4px solid #303030;min-height:265px}.spotify-ux-guide .spotify-phone .mock-eyebrow{font-size:.72em;color:#1ed760;letter-spacing:.08em}.spotify-ux-guide .spotify-phone h4{color:#fff;font-size:1.05em;margin:8px 0}.spotify-ux-guide .spotify-cover{height:92px;border-radius:8px;background:linear-gradient(135deg,#1ed760,#185b3a);display:flex;align-items:center;justify-content:center;color:#09210f;font-weight:800;font-size:1.3em;margin:10px 0}.spotify-ux-guide .spotify-mock-button{display:block;background:#1ed760;color:#101010!important;text-align:center;border-radius:999px;padding:8px 10px;margin-top:12px;font-weight:700;text-decoration:none}.spotify-ux-guide .spotify-screen-note{font-size:.83em;color:#bdbdbd}.spotify-ux-guide .spotify-checklist{list-style:none;padding-left:0}.spotify-ux-guide .spotify-checklist li{padding:9px 0;border-bottom:1px solid #e4e4e4}.spotify-ux-guide .spotify-checklist li:before{content:'□';font-size:1.2em;margin-right:10px}.spotify-ux-guide .spotify-template-shot{max-width:100%;margin:22px 0}.spotify-ux-guide .spotify-template-shot img{width:100%;height:auto;display:block}.spotify-ux-guide .spotify-template-link{font-weight:700}.spotify-ux-guide .spotify-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0}.spotify-ux-guide .spotify-flow span{border:1px solid #aaa;border-radius:9px;padding:10px 12px;background:#fff}.spotify-ux-guide .spotify-flow b{color:#087d3c}.spotify-ux-guide .spotify-flow .decision{background:#fff4d7;border-color:#d9a441}.spotify-ux-guide .spotify-flow .end{background:#e7f8eb;border-color:#168447}
.spotify-ux-guide .spotify-flow-example{padding:24px;border:1px solid #e2e5e8;border-radius:14px;background:#fbfbfc;margin:24px 0}
.spotify-ux-guide .spotify-flow-title{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}
.spotify-ux-guide .spotify-flow-title>span{font-size:.72rem;letter-spacing:.12em;font-weight:800;color:#6c5ce7}
.spotify-ux-guide .spotify-flow-title>strong{font-size:1.8rem;line-height:1.15;letter-spacing:-.03em;color:#202124}
.spotify-ux-guide .spotify-flow-title>small{color:#62676d}
.spotify-ux-guide .spotify-flow-guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.spotify-ux-guide .spotify-flow-guide-cards>div{border:1px solid #e2e5e8;border-radius:9px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:7px}
.spotify-ux-guide .spotify-flow-guide-cards b{font-size:.68rem;letter-spacing:.04em;color:#6c5ce7;line-height:1.35}
.spotify-ux-guide .spotify-flow-guide-cards span{font-size:.82rem;line-height:1.4;color:#454950}
.spotify-ux-guide .spotify-flow-legend{display:flex;flex-wrap:wrap;gap:9px 16px;padding:13px 0 18px;border-bottom:1px solid #e2e5e8;margin-bottom:18px}
.spotify-ux-guide .spotify-flow-legend span{display:flex;align-items:center;gap:7px;font-size:.75rem;color:#555b63}
.spotify-ux-guide .spotify-flow-legend i{display:inline-block;width:13px;height:13px;border:1px solid #bfc4cc;background:#fff;border-radius:3px}
.spotify-ux-guide .spotify-flow-legend .legend-start{border-radius:7px;background:#f4f1ff;border-color:#6c5ce7}
.spotify-ux-guide .spotify-flow-legend .legend-action{background:#eef5ff;border-color:#8eadd7}
.spotify-ux-guide .spotify-flow-legend .legend-decision{transform:rotate(45deg);border-radius:0;background:#fff7e8;border-color:#d6aa5e;width:11px;height:11px}
.spotify-ux-guide .spotify-flow-legend .legend-error{background:#f0f1f3;border-color:#9aa0a6}
.spotify-ux-guide .spotify-flow-diagram{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:0}
.spotify-ux-guide .spotify-flow-step{box-sizing:border-box;padding:15px 18px;border:1px solid #d9dce3;border-radius:9px;background:#fff;display:flex;flex-direction:column;gap:4px;max-width:440px;width:100%;margin:0 auto}
.spotify-ux-guide .spotify-flow-step>b{font-size:.67rem;letter-spacing:.09em;color:#6c5ce7}
.spotify-ux-guide .spotify-flow-step>strong{font-size:1rem;line-height:1.3;color:#202124}
.spotify-ux-guide .spotify-flow-step>small{font-size:.8rem;line-height:1.4;color:#62676d}
.spotify-ux-guide .spotify-flow-step.flow-start{background:#f4f1ff;border-color:#6c5ce7;border-radius:18px}
.spotify-ux-guide .spotify-flow-step.flow-decision{max-width:280px;text-align:center;background:#fff7e8;border-color:#d6aa5e;border-radius:8px}
.spotify-ux-guide .spotify-flow-step.flow-action{background:#eef5ff;border-color:#8eadd7}
.spotify-ux-guide .spotify-flow-step.flow-error{background:#f0f1f3;border-color:#9aa0a6;max-width:380px}
.spotify-ux-guide .spotify-flow-step.flow-end{background:#effaf3;border-color:#a8d7b8;border-radius:18px;text-align:center}
.spotify-ux-guide .spotify-flow-step.flow-end>b{color:#237447}
.spotify-ux-guide .spotify-flow-connector{text-align:center;height:34px;display:flex;align-items:center;justify-content:center;color:#6c5ce7;font-size:1.35rem;font-weight:800}
.spotify-ux-guide .spotify-flow-branches{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:660px;width:100%;margin:0 auto 12px}
.spotify-ux-guide .spotify-flow-branch{box-sizing:border-box;border-left:3px solid #6c5ce7;padding:12px 14px;background:#f4f1ff;border-radius:0 8px 8px 0;display:flex;flex-direction:column;gap:6px;font-size:.84rem;line-height:1.4}
.spotify-ux-guide .spotify-flow-branch b{font-size:.68rem;letter-spacing:.07em;color:#6c5ce7}
.spotify-ux-guide .spotify-flow-branch span{color:#4e5258}
.spotify-ux-guide .spotify-flow-branch.flow-no{border-left-color:#9aa0a6;background:#f0f1f3}
.spotify-ux-guide .spotify-flow-branch.flow-no b{color:#62676d}
.spotify-ux-guide .spotify-flow-example figcaption{font-size:.85rem;line-height:1.5;color:#62676d;margin-top:18px}
@media(max-width:760px){.spotify-ux-guide .spotify-flow-guide-cards{grid-template-columns:1fr}.spotify-ux-guide .spotify-flow-branches{grid-template-columns:1fr}.spotify-ux-guide .spotify-flow-example{padding:14px}}
@media(max-width:600px){.spotify-ux-guide .spotify-hero{padding:22px}.spotify-ux-guide .spotify-deliverable{padding:14px}}