.open-platform-view .detail-content{background:#0b0b0a;color:#f2f0eb}
.open-platform-view .detail-cover,.open-platform-view .detail-intro{display:none}
.open-platform-view .detail-section{width:100%;padding:0}
.op-case{--op-accent:#ff9a3c;color:#f2f0eb;font-family:'Helvetica Neue','PingFang SC',sans-serif}
.op-hero{padding:36px 5% 0;background:radial-gradient(ellipse at 95% 20%,#ff9a3c18,transparent 55%),#11110f}
.op-kicker{display:flex;justify-content:space-between;gap:20px;color:#bcb7ae;font-size:12px;letter-spacing:1px}
.open-platform-view .op-hero h3{font-family:'Songti SC',serif;font-size:clamp(32px,3.6vw,54px);line-height:1.35;font-weight:500;letter-spacing:-.03em;margin:32px 0 24px}
.op-hero em{font-style:normal;color:#e8bd78}
.op-intro{display:flex;flex-direction:column;gap:12px;max-width:660px}
.op-intro h4{font-size:16px;font-weight:500;margin:0}.op-case .op-intro p{font-size:14px;line-height:1.9;color:#bcb7ae;margin:0}
.op-tags{display:flex;gap:0;font-size:12px;color:#a69986;padding:20px 0 32px}.op-tags span+span{border-left:1px solid #a6998638;margin-left:16px;padding-left:16px}
.op-case .op-shot{margin:0}.op-case .op-shot img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:none;border:1px solid #ffffff12}
.op-shot figcaption{font-size:12px;color:#91897e;padding:14px 0 0}
.op-section{padding:64px 5%}.op-warm{background:#151411}
.op-heading{max-width:640px;margin-bottom:30px}.op-heading>span{font-size:12px;letter-spacing:1.6px;color:#d7ac74}
.open-platform-view .op-heading h3{font-size:clamp(28px,3vw,44px);font-weight:400;line-height:1.35;letter-spacing:-.03em;margin:18px 0}
.op-case .op-heading p,.op-case .op-subheading p{font-size:14px;line-height:1.9;color:#bcb7ae;max-width:620px}
.op-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}.op-palette>span{font-size:12px;color:#bcb7ae;border-top:5px solid var(--swatch);padding-top:12px}.op-palette b{display:block;font-weight:400;color:#8e8b85;margin-top:8px}
.op-filmstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.op-filmstrip figure{margin:0;min-width:0}.op-filmstrip video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#181817;border-radius:6px}.op-filmstrip figcaption{display:flex;gap:10px;margin-top:12px;font-size:12px;color:#bcb7ae}.op-filmstrip figcaption span{color:#ff9a3c}
.op-case .op-small{font-size:12px;color:#8e8b85;margin-top:18px}
.op-subheading{margin:44px 0 24px}.op-subheading h4{font-size:24px;font-weight:400;margin:0 0 12px}
.op-tabs{display:flex;gap:24px;flex-wrap:wrap;border-bottom:1px solid #ffffff18;margin:0 0 24px}.op-tabs button{cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;color:#a49b90;padding:14px 0;font-size:14px}.op-tabs button[aria-pressed=true]{color:#ffbc7b;border-color:#ff9a3c}.op-tabs button:hover{color:#f2f0eb}.op-tabs button:focus-visible{outline:2px solid #ff9a3c;outline-offset:4px}
.op-signoff{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:40px 5%;border-top:1px solid #ffffff15}.op-signoff b{font-size:24px;letter-spacing:-1px}.op-case .op-signoff p{font-size:12px;color:#8e8b85;margin-top:8px}.op-signoff a{font-size:14px;padding:12px 20px;border:1px solid #d7ac7455;border-radius:6px;color:#e8bd78}.op-signoff a:hover{background:#d7ac7415}.op-signoff a span{margin-left:20px}
.open-platform-view .detail-ending{border-color:#ffffff15;color:#91897e;font-size:12px}.open-platform-view .detail-close:hover{background:#e8bd78;color:#24150a}
@media(max-width:700px){.op-intro{grid-template-columns:1fr;gap:12px}.op-filmstrip{grid-template-columns:repeat(2,1fr)}.op-palette{grid-template-columns:repeat(2,1fr)}.op-kicker{flex-wrap:wrap}.op-section{padding:44px 5%}.op-signoff{align-items:start;flex-direction:column}.op-tabs{gap:16px}}

/* Shared browser mockup keeps the interface prominent. */
.op-desktop-mockup{margin:8px 0 0}
.op-mockup-stage{position:relative;padding:22px 0 30px;isolation:isolate}
.op-mockup-stage::after{content:"";position:absolute;z-index:-1;bottom:4px;left:10%;width:80%;height:36px;background:#0008;border-radius:50%;filter:blur(22px)}
.op-monitor{position:relative;overflow:hidden;border:1px solid #ffffff26;border-radius:10px;background:#181715;box-shadow:0 18px 36px #0005,0 1px 0 #ffffff12 inset}
.op-browser-bar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:linear-gradient(100deg,#24221f,#1b1a18);border-bottom:1px solid #ffffff0d;color:#92887b;font-size:12px;letter-spacing:1.5px}
.op-browser-dots{display:flex;gap:5px;width:46px}.op-browser-dots i{width:5px;height:5px;border-radius:50%;background:#71685d}.op-browser-dots i:last-child{background:#bb8c55}.op-browser-bar>span:last-child{width:46px;text-align:right}
.op-case .op-monitor-screen img,.mj-case .op-monitor-screen img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.op-monitor-screen{overflow:hidden;background:#0b0b0a}
.op-desktop-mockup figcaption{display:flex;justify-content:space-between;gap:16px;padding:0 0 20px;font-size:12px;letter-spacing:1px;color:#91897e}
.op-desktop-mockup figcaption span{letter-spacing:0}

.case-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:32px 0 24px}
.open-platform-view .case-title-row h3,.mj-case .case-title-row h3{margin:0}
.mj-case .case-title-row{margin-top:48px}
.case-title-row .case-title-link{display:inline-flex;align-items:center;gap:14px;flex-shrink:0;padding:11px 16px;border:1px solid #d7ac7455;border-radius:6px;color:#e8bd78;font-size:14px;line-height:1.4;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.case-title-row .case-title-link:hover{background:#e8bd78;color:#211b12;border-color:#e8bd78}
.case-title-row .case-title-link:focus-visible{outline:2px solid #e8bd78;outline-offset:4px}