/* Calm, story-led role visual for products/response.html. */
.x-orchestrator{
  --role-color:var(--accent);
  position:relative;
  overflow:clip;
  background:
    radial-gradient(circle at 74% 48%,color-mix(in srgb,var(--brand-purple) 13%,transparent),transparent 34%),
    var(--bg);
  color:var(--fg);
}
.x-orchestrator__mesh{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 8%,color-mix(in srgb,var(--bg-sunken) 22%,transparent) 55%,transparent 94%)}
.x-orchestrator__intro{position:relative;z-index:2;max-width:var(--maxw);padding-top:var(--section-y)}
.x-orchestrator__intro h2{max-width:14ch;margin-top:var(--sp-5);font-size:clamp(2.75rem,5.5vw,5.5rem);font-weight:300;line-height:.96;letter-spacing:var(--ls-tight)}
.x-orchestrator__intro .lead{max-width:48ch;margin-top:var(--sp-8);font-size:var(--fs-lead)}
.x-orchestrator__scroll{position:relative;height:330svh}
.x-orchestrator__sticky{position:sticky;top:0;display:grid;align-items:center;height:100svh;padding-top:76px}
.x-orchestrator__stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,.78fr) minmax(560px,1.22fr);align-items:center;gap:clamp(48px,7vw,104px)}

.x-role-copy{min-width:0}
.x-role-panels{display:grid;min-height:360px}
.x-role-panel{grid-area:1/1;align-self:center;opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .42s var(--ease),transform .7s var(--ease-expo)}
.x-role-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.x-role-panel__discipline{display:flex;align-items:center;gap:12px;font-size:var(--fs-eyebrow);font-weight:500;color:var(--accent)}
.x-role-panel__discipline::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 7px var(--accent-soft)}
.x-role-panel h3{max-width:10ch;margin-top:var(--sp-6);font-size:clamp(3rem,5.2vw,5.75rem);font-weight:300;line-height:.94;letter-spacing:var(--ls-tight)}
.x-role-panel p{max-width:32ch;margin-top:var(--sp-6);font-size:var(--fs-lead);line-height:var(--lh-normal);color:var(--fg-muted)}
.x-role-nav{display:grid;grid-template-columns:repeat(4,minmax(max-content,1fr));gap:8px;margin-top:var(--sp-8)}
.x-role-nav button{appearance:none;min-height:48px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:transparent;color:var(--fg-subtle);font:500 var(--fs-small)/1 var(--font-sans);text-align:center;cursor:pointer;transition:color var(--dur-state) var(--ease),border-color var(--dur-state) var(--ease),background var(--dur-state) var(--ease),transform var(--dur-state) var(--ease)}
.x-role-nav button:hover{color:var(--fg);border-color:var(--border-strong);transform:translateY(-1px)}
.x-role-nav button.is-active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--fg)}
.x-role-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.x-system{position:relative;min-width:0;isolation:isolate}
.x-system__halo{position:absolute;z-index:-1;top:8%;left:12%;width:76%;aspect-ratio:1.35;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);filter:blur(90px);opacity:.72;animation:x-ambient 9s ease-in-out infinite alternate}

.x-device{position:relative;padding:clamp(8px,1vw,12px);border-radius:clamp(18px,2vw,26px);background:linear-gradient(158deg,#646a78 0%,#3a3e48 3%,#1b1e24 16%,#141619 52%,#191c22 84%,#333741 97%,#5c6270 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.62),0 3px 6px rgba(0,0,0,.4),0 34px 68px -24px rgba(0,0,0,.9)}
.x-device::before{content:"";position:absolute;z-index:3;top:4px;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 34% 32%,#454c5b,#080a0e 72%);box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.x-device__screen{position:relative;overflow:hidden;aspect-ratio:1400/1049;border-radius:clamp(11px,1.2vw,15px);background:#0b0e14;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85)}
.x-screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .5s var(--ease),transform 1.1s var(--ease-expo)}
.x-screen.is-active{opacity:1;transform:scale(1)}

.x-outcomes{display:grid;min-height:92px;margin:var(--sp-6) var(--sp-3) 0}
.x-outcome{grid-area:1/1;display:grid;grid-template-columns:48px 1fr;column-gap:var(--sp-4);align-items:center;margin:0;opacity:0;transform:translateY(12px);transition:opacity .32s var(--ease),transform .55s var(--ease-expo)}
.x-outcome.is-active{opacity:1;transform:none}
.x-outcome .ico{grid-row:1/3;width:48px;height:48px;padding:12px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.x-outcome strong{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:500;line-height:var(--lh-snug)}
.x-outcome>span:last-child{font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--fg-muted)}

@keyframes x-ambient{from{opacity:.5;transform:translate3d(-3%,1%,0) scale(.94)}to{opacity:.78;transform:translate3d(4%,-2%,0) scale(1.05)}}

@media (max-width:1080px),(max-height:700px){
  .x-orchestrator__intro{padding-bottom:var(--sp-16)}
  .x-orchestrator__scroll{height:auto}
  .x-orchestrator__sticky{position:relative;height:auto;padding:0 0 var(--section-y)}
  .x-orchestrator__stage{grid-template-columns:1fr;gap:var(--sp-12)}
  .x-role-panels{min-height:300px}
  .x-role-panel h3{max-width:12ch}
  .x-system{width:100%;max-width:820px;margin-inline:auto}
}

@media (max-width:640px){
  .x-orchestrator__intro h2 br{display:none}
  .x-orchestrator__intro{padding-bottom:var(--sp-12)}
  .x-role-panels{min-height:360px}
  .x-role-panel h3{font-size:clamp(2.75rem,14vw,4.5rem)}
  .x-role-nav{overflow-x:auto;grid-template-columns:repeat(4,minmax(94px,1fr));padding-bottom:var(--sp-2)}
  .x-role-nav button{min-height:46px;padding-inline:12px}
  .x-device{padding:7px;border-radius:var(--r-xl)}
  .x-device::before{top:2px;width:5px;height:5px}
  .x-device__screen{border-radius:var(--r-lg)}
  .x-outcomes{min-height:128px;margin-inline:0}
  .x-outcome{grid-template-columns:42px 1fr}
  .x-outcome .ico{width:42px;height:42px;padding:10px}
}

@media (prefers-reduced-motion:reduce){
  .x-system__halo{animation:none}
  .x-role-panel,.x-screen,.x-outcome{transition:none}
  .x-orchestrator__scroll{height:auto}
  .x-orchestrator__sticky{position:relative;height:auto;padding:0 0 var(--section-y)}
}

/* Baked iPhone render on a white background (Situational awareness): shown
   upright at phone size, with the white multiplied into the section surface. */
.x-phone-shot{max-width:340px;margin-inline:auto}
.x-phone-shot img,.x-tablet-shot img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* Same treatment for a landscape iPad render: it takes the full image column. */