/* SIMUL8OR OPENCLAW LAYER — Option A on the shared S8 content-page layer. */
.s8cl-hero{grid-template-columns:minmax(0,1fr);padding-bottom:0}
.s8cl-hero h1{max-width:15ch}
.s8cl-kicker{display:flex;align-items:center;gap:var(--s8-4)}
.s8cl .s8c-feat .s8c-h3{margin-top:var(--s8-4);font-size:var(--s8-fs-lg)}
.s8cl-run-done{margin-top:var(--s8-6)}
.s8cl-api-example{margin-top:var(--s8-5)}
.s8cl-heartbeat{max-width:420px}

.s8cl-mark{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;flex:none;border-radius:var(--s8-r-lg);background:var(--s8-panel-2);border:1px solid var(--s8-line-2);font-size:28px;line-height:1}

.s8cl-term{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-inset);overflow:hidden}
.s8cl-term__bar{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-2) 0 var(--s8-4);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line)}
.s8cl-term__name{flex:1;min-width:0;font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;letter-spacing:.05em;color:var(--s8-fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s8cl-term__body{padding:var(--s8-4) var(--s8-5);display:grid;gap:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--s8-fs-sm);line-height:1.7}
.s8cl-cmd{display:flex;gap:10px;color:var(--s8-fg);white-space:pre-wrap;word-break:break-word}
.s8cl-cmd::before{content:"$";flex:none;color:var(--s8-accent-fg)}
.s8cl-cmd .s8cl-flag{color:var(--s8-fg-3)}

.s8cl-run{display:grid;gap:var(--s8-6);margin-top:var(--s8-6)}
.s8cl-run>div{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.s8cl-run h3{margin:var(--s8-3) 0 0;font-size:var(--s8-fs-lg);font-weight:600;color:#fff}
.s8cl-run p{margin:8px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
.s8cl .s8f-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--s8-r-sm);background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;font-variant-numeric:tabular-nums;color:var(--s8-accent-fg)}
@media(max-width:860px){.s8cl-run>div{grid-template-columns:1fr;gap:var(--s8-4)}}

.s8cl-m{display:inline-flex;align-items:center;justify-content:center;height:var(--s8-h-xs);padding:0 8px;flex:none;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-panel-2);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:.08em;color:var(--s8-fg-2)}
.s8cl-m--post{background:var(--s8-accent-tint);border-color:var(--s8-accent-line);color:var(--s8-accent-fg)}
.s8cl-m--get{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.s8cl-path{font-family:var(--s8-mono);font-size:var(--s8-fs-sm);color:var(--s8-fg);word-break:break-all}
.s8cl-ep{display:grid;gap:1px;margin-top:var(--s8-5);background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8cl-ep>div{display:grid;grid-template-columns:64px minmax(0,340px) minmax(0,1fr);align-items:center;gap:var(--s8-5);padding:14px var(--s8-5);background:var(--s8-panel);transition:background var(--s8-t) var(--s8-ease)}
.s8cl-ep>div:hover{background:var(--s8-panel-2)}
.s8cl-ep p{margin:0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);text-wrap:pretty}
@media(max-width:860px){.s8cl-ep>div{grid-template-columns:56px minmax(0,1fr);gap:var(--s8-3) var(--s8-4)}.s8cl-ep p{grid-column:2}}

/* The mockup's accordion contract is scoped here because production s8-faq.css
   uses a different markup contract on FAQ.aspx. */
.s8cl .s8f-acc{margin-top:var(--s8-5);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;background:var(--s8-panel)}
.s8cl .s8f-item+.s8f-item{border-top:1px solid var(--s8-line)}
.s8cl .s8f-q{display:flex;align-items:center;gap:var(--s8-4);width:100%;padding:var(--s8-4) var(--s8-5);background:none;border:0;color:var(--s8-fg);font:inherit;font-size:var(--s8-fs-base);font-weight:500;text-align:left;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}
.s8cl .s8f-q:hover{background:var(--s8-panel-2);color:#fff}
.s8cl .s8f-q:focus-visible{outline:0;box-shadow:inset var(--s8-focus)}
.s8cl .s8f-item.is-open>.s8f-q{background:var(--s8-panel-2);color:#fff}
.s8cl .s8f-chev{flex:none;margin-left:auto;width:14px;height:14px;stroke:var(--s8-fg-4);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--s8-t) var(--s8-ease),stroke var(--s8-t) var(--s8-ease)}
.s8cl .s8f-item.is-open .s8f-chev{transform:rotate(180deg);stroke:var(--s8-accent-fg)}
.s8cl .s8f-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--s8-t-slow) var(--s8-ease)}
.s8cl .s8f-item.is-open>.s8f-wrap{grid-template-rows:1fr}
.s8cl .s8f-wrap>div{overflow:hidden}
.s8cl .s8f-a{padding:var(--s8-1) var(--s8-5) var(--s8-5);max-width:740px}
.s8cl .s8f-a p{margin:0;font-size:var(--s8-fs-sm);line-height:1.62;color:var(--s8-fg-2);text-wrap:pretty}
.s8cl .s8f-a p+p{margin-top:var(--s8-3)}
.s8cl .s8f-a code{font-family:var(--s8-mono);font-size:.92em;background:var(--s8-inset);border:1px solid var(--s8-line);border-radius:var(--s8-r-sm);padding:1px 5px;color:var(--s8-accent-fg);white-space:nowrap}

.s8cl-closebar{margin-top:var(--s8c-gap);border-top:1px solid var(--s8-line);padding:clamp(32px,4vw,56px) 0;background:radial-gradient(100% 160% at 20% 100%,var(--s8-accent-tint),transparent 60%)}
.s8cl-closebar__in{display:flex;align-items:center;gap:var(--s8-5);flex-wrap:wrap}
.s8cl-closebar h2{margin:0;font-size:var(--s8-fs-2xl);letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff}
.s8cl-closebar p{margin:6px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.s8cl-closebar .row{display:flex;gap:var(--s8-3);margin-left:auto}
@media(max-width:640px){.s8cl-kicker{align-items:flex-start;flex-direction:column}.s8cl-closebar .row{width:100%;margin-left:0}}