/* RunCadre / engine pages without a studio demo (Mission Control, AI Agents & Automations, …).
   Scoped to .ce-*, reads only role tokens from styles.css (--fg, --fg-mut, --rule, --card,
   --gold-*). Each section picks one surface class in the HTML; the console screenshot is the
   product image. Hero/section rules match creative-engine.css until the shared-stylesheet PR. */
/* ---- hero -------------------------------------------------------------- */
.ce-hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:end}
.ce-hero .h-split.h-hero{max-width:none}
.ce-agent-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.ce-agent-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--card);font:500 .8rem/1 var(--mono);letter-spacing:.04em;color:var(--fg);transition:border-color .15s,background .15s}
.ce-agent-chip:hover{border-color:var(--fg-mut);background:var(--lift)}
.ce-agent-chip i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.ce-textlink{align-self:center;font-size:.9rem;color:var(--fg);border-bottom:1px solid var(--rule-strong);padding-bottom:2px;transition:border-color .15s}
.ce-textlink:hover{border-color:var(--gold)}
.ce-gets{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:24px}
.ce-gets-title{font:500 11px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut);margin-bottom:14px}
.ce-gets-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.ce-gets-list li{position:relative;padding-left:24px;font-size:.95rem;line-height:1.55;color:var(--fg)}
.ce-gets-list li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* ---- demo notice (must stay visible) ------------------------------------ */
.ce-demo-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:34px 0 12px;font:.78rem/1.5 var(--mono);color:var(--fg-mut)}
.ce-demo-badge{font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--surface);background:var(--gold-mark);border-radius:4px;padding:2px 7px}

/* ---- console screenshot + counter -------------------------------------- */
.ce-shot{margin:0;border:1px solid var(--rule-strong);border-radius:14px;overflow:hidden;background:var(--ink);box-shadow:0 30px 80px #0003}
.ce-shot img{display:block;width:100%;height:auto}
.ce-counter-strip{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:14px 18px;background:var(--card);border-top:1px solid var(--rule)}
.ce-counter-v{font:600 1.6rem/1 var(--font-sans);letter-spacing:var(--track-display);color:var(--fg)}
.ce-counter-l{font-size:.95rem;color:var(--fg)}
.ce-counter-d{margin-left:auto;font:.72rem/1.5 var(--mono);color:var(--fg-mut)}
.ce-counter-d code,.ce-method code{font:inherit;font-family:var(--mono);overflow-wrap:anywhere}

/* ---- sections ------------------------------------------------------------ */
.ce-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.ce-steps .step h3{font-family:var(--font-sans);font-size:1.05rem;letter-spacing:-.01em}
.ce-steps .step .n{font:500 11px var(--mono);letter-spacing:var(--track-label);color:var(--gold-text)}
.ce-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.ce-num{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:24px}
.ce-num-v{font:600 1.8rem/1.1 var(--font-sans);letter-spacing:var(--track-display);color:var(--fg)}
.ce-num-l{margin-top:10px;font:500 11px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-mut)}
.ce-method{margin-top:16px;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:24px}
.ce-method h3{font-size:1rem;margin-bottom:8px}
/* Placeholder marker: unmistakable until real figures replace it. */
.ce-todo{color:var(--gold-text);outline:1px dashed var(--gold-mark);outline-offset:4px;border-radius:2px}
.ce-num-v.ce-todo{font-size:1.1rem;font-family:var(--mono);letter-spacing:0}
.ce-two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ce-h2{font:600 clamp(1.5rem,2.6vw,2rem)/1.15 var(--font-sans);letter-spacing:var(--track-display);margin:12px 0 20px}
.ce-notfor{list-style:none;display:flex;flex-direction:column;gap:14px}
.ce-notfor li{padding-left:26px;position:relative;color:var(--fg-mut);font-size:.95rem}
.ce-notfor li b{color:var(--fg);font-weight:600}
.ce-notfor li::before{content:"×";position:absolute;left:0;top:-1px;color:var(--fg-mut);font-weight:700}
.ce-incl{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ce-incl ul{list-style:none;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px}
.ce-incl li{font-size:.88rem;padding-left:22px;position:relative;color:var(--fg)}
.ce-yes li::before{content:"✓";position:absolute;left:0;color:var(--gold-mark);font-weight:700}
.ce-no li{color:var(--fg-mut)}.ce-no li::before{content:"–";position:absolute;left:2px;color:var(--fg-mut)}

/* ---- immersive console stage ----------------------------------------- */
.rc-console-stage{position:relative;padding-block:clamp(58px,6vw,92px) clamp(86px,9vw,136px)!important;overflow:hidden;isolation:isolate;border-top:1px solid #2b2824;background:linear-gradient(180deg,#11100f 0%,#151310 44%,#0d0c0b 100%)!important;color:#f4f0e8}
.rc-console-stage::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(210px,24vw,370px);width:min(1360px,92vw);height:clamp(350px,39vw,590px);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,#c8794635 0,#9d5c331d 38%,transparent 72%);filter:blur(18px);pointer-events:none}
.rc-console-stage::after{content:"";position:absolute;z-index:-1;left:50%;top:clamp(430px,43vw,670px);width:min(1480px,96vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#d1906248 22%,#f0b48378 50%,#d1906248 78%,transparent);box-shadow:0 18px 90px 26px #b26a3924;pointer-events:none}
.rc-console-stage>.wrap{width:min(1600px,calc(100% - 32px));max-width:none;margin-inline:auto;perspective:1800px}
.rc-console-stage .sec-head{max-width:940px;margin-inline:auto;text-align:center}
.rc-console-stage .sec-head .mono-tag{color:#a9a39a}
.rc-console-stage .sec-head h2{max-width:900px;margin:14px auto 0;color:#f4f0e8;font-size:clamp(2rem,3.55vw,4.15rem);line-height:.96;letter-spacing:-.055em}
.rc-console-stage .ce-demo-note{justify-content:center;margin:26px 0 18px;color:#8f8980;text-align:center}
.rc-console-stage .rc-product-demo{box-shadow:0 52px 120px #000c,0 0 0 1px #ffffff15,0 1px 0 #d7996b55 inset,0 -26px 110px #b66b362c;transform-origin:50% 8%}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:920px){.ce-agent-chips{justify-content:center}.ce-gets{text-align:left}}
@media(max-width:900px){
  .ce-hero .wrap{grid-template-columns:1fr;gap:28px}
  .ce-steps{grid-template-columns:1fr 1fr}
  .ce-two{grid-template-columns:1fr;gap:40px}
}
@media(max-width:700px){
  .ce-steps,.ce-numbers,.ce-incl{grid-template-columns:1fr}
  .ce-counter-d{margin-left:0;flex-basis:100%}
  .rc-console-stage>.wrap{width:min(100% - 20px,1600px)}
}
@media(prefers-reduced-motion:reduce){.rc-console-stage::before{filter:none}}